Skip the App Stores: Build an Installable, Native-Like Mobile App with Angular, Ionic & PWA

查看原文 / View Original 编辑 / Edit

Skip the App Stores: Build an Installable, Native-Like Mobile App with Angular, Ionic & PWA

跳过应用商店：使用 Angular、Ionic 和 PWA 构建可安装的类原生移动应用

[!NOTE] Summary: Progressive Web Apps (PWAs) combine the reach of the web with the native experience and speed of mobile apps. In this guide, we walk step-by-step through building an installable, native-like mobile app with Angular, Ionic, and PWA capabilities—covering service workers, web manifests, iOS Safari requirements, and instant free deployment. [!NOTE] 摘要：渐进式 Web 应用 (PWA) 将 Web 的广泛覆盖与移动应用的本地体验和速度结合在一起。在本指南中，我们将逐步介绍如何使用 Angular、Ionic 和 PWA 功能构建一个可安装的、类原生的移动应用——涵盖 Service Workers、Web 清单、iOS Safari 要求以及即时免费部署。

Why Ionic Delivers That Authentic Native-Like Feel

为什么 Ionic 能提供纯正的类原生体验

Building a web app for mobile is easy, but making it feel native is where most web applications fail. This is where Ionic shines: 为移动设备构建 Web 应用很容易，但让它拥有原生体验却是大多数 Web 应用的短板。而这正是 Ionic 的闪光点：

  • Native Touch Gestures: Ionic brings built-in mobile gestures—such as swipe-to-go-back, pull-to-refresh (ion-refresher), swipeable modals, and instant touch feedback—directly into the browser.

  • 原生触摸手势： Ionic 将内置的移动手势（如滑动返回、下拉刷新 (ion-refresher)、可滑动模态框和即时触摸反馈）直接带入浏览器。

  • Hardware-Accelerated Animations: Transitions between pages (iOS slide-in, Android material push) run on the Web Animations API at 60fps/120fps with zero jank.

  • 硬件加速动画： 页面间的过渡效果（iOS 滑入、Android Material 推入）基于 Web Animations API 运行，帧率可达 60fps/120fps，且无卡顿。

  • Adaptive Platform Styling: Ionic automatically adapts its UI controls—rendering iOS Human Interface Guidelines styling on Apple devices and Material Design on Android devices automatically from a single codebase.

  • 自适应平台样式： Ionic 会自动调整其 UI 控件——通过单一代码库，在 Apple 设备上自动渲染 iOS 人机界面指南样式，在 Android 设备上渲染 Material Design 样式。

Combining Ionic’s native UI controls with Angular’s PWA capabilities gives your users a mobile app that looks, feels, and responds exactly like an app downloaded from the App Store. 将 Ionic 的原生 UI 控件与 Angular 的 PWA 功能相结合，可以为用户提供一款在外观、触感和响应速度上与从应用商店下载的应用完全一致的移动应用。

1. Setting Up Angular PWA Support

1. 设置 Angular PWA 支持

Angular CLI provides an official automated schematic to convert your project into a PWA: Angular CLI 提供了一个官方的自动化原理图，可将你的项目转换为 PWA：

npx ng add @angular/pwa

What this schematic generates: 该原理图生成的内容包括：

  • public/manifest.webmanifest: Configures app name, theme color, display mode (standalone), and app icons.
  • public/manifest.webmanifest：配置应用名称、主题颜色、显示模式（独立模式）和应用图标。
  • ngsw-config.json: Defines caching strategies for static assets (index, JS, CSS) and dynamic lazy-loaded chunk bundles.
  • ngsw-config.json：定义静态资源（index、JS、CSS）和动态懒加载分块包的缓存策略。
  • src/main.ts: Registers provideServiceWorker().
  • src/main.ts：注册 provideServiceWorker()。
  • public/icons/: Generates a standard set of PWA icon assets (72x72 up to 512x512).
  • public/icons/：生成一套标准的 PWA 图标资源（从 72x72 到 512x512）。

2. The manifest.webmanifest Asset Configuration

2. manifest.webmanifest 资源配置

When serving your application with ionic serve or building for production, ensure angular.json maps your static public/ directory so the browser serves manifest.webmanifest cleanly at the root URL. 在使用 ionic serve 运行应用或进行生产构建时，请确保 angular.json 正确映射了静态 public/ 目录，以便浏览器能在根 URL 下清晰地访问 manifest.webmanifest。

Update angular.json: Add the public/ directory mapping to the “assets” array in angular.json: 更新 angular.json：将 public/ 目录映射添加到 angular.json 的 “assets” 数组中：

"assets": [
  { "glob": "**/*", "input": "public", "output": "." },
  { "glob": "**/*", "input": "src/assets", "output": "assets" }
]

By mapping "input": "public" to "output": ".", public/manifest.webmanifest is output cleanly at /manifest.webmanifest with HTTP 200 OK. 通过将 "input": "public" 映射到 "output": "."，public/manifest.webmanifest 将被清晰地输出到 /manifest.webmanifest，并返回 HTTP 200 OK。

3. Understanding Mobile & iOS Safari PWA Requirements

3. 理解移动端和 iOS Safari 的 PWA 要求

To test real PWA capabilities on an iPhone: 要在 iPhone 上测试真实的 PWA 功能：

  • HTTPS Requirement: Desktop Chrome treats http://localhost as a secure origin. However, mobile devices (especially iOS Safari) require a valid HTTPS connection to register Service Workers and enable installable features.
  • HTTPS 要求： 桌面版 Chrome 将 http://localhost 视为安全源。然而，移动设备（尤其是 iOS Safari）需要有效的 HTTPS 连接才能注册 Service Workers 并启用可安装功能。
  • Standalone Installation: On iOS, standalone PWA capabilities activate after the user opens Safari, taps Share $\rightarrow$ Add to Home Screen, and launches the app from the standalone home screen icon.
  • 独立安装： 在 iOS 上，用户需打开 Safari，点击“共享 $\rightarrow$ 添加到主屏幕”，并从主屏幕上的独立图标启动应用后，才能激活 PWA 的独立运行功能。

4. Instant Production Deployment with Surge

4. 使用 Surge 进行即时生产部署

To test real PWA capabilities on any mobile device without complex SSL certificate setup, deploy your production build folder (www/) using Surge.sh: 为了在任何移动设备上测试真实的 PWA 功能而无需复杂的 SSL 证书设置，请使用 Surge.sh 部署你的生产构建文件夹 (www/)：

  • Step 1: Build the production bundle: ionic build --prod
  • 第一步： 构建生产包：ionic build --prod
  • Step 2: Deploy to Surge: npx surge www
  • 第二步： 部署到 Surge：npx surge www

Surge will immediately output a live, trusted HTTPS URL (e.g. https://my-ionic-pwa.surge.sh). Surge 将立即输出一个实时的、受信任的 HTTPS URL（例如 https://my-ionic-pwa.surge.sh）。

5. Testing Mobile Capabilities on iPhone

5. 在 iPhone 上测试移动功能

  1. Open Safari on your iPhone and navigate to your Surge HTTPS URL.

  2. Tap the Share button in Safari $\rightarrow$ Select Add to Home Screen.

  3. Launch the app from the new icon on your home screen.

  4. Experience your native-like mobile app running directly from the home screen!

  5. 在 iPhone 上打开 Safari 并导航到你的 Surge HTTPS URL。

  6. 点击 Safari 中的“共享”按钮 $\rightarrow$ 选择“添加到主屏幕”。

  7. 从主屏幕上的新图标启动应用。

  8. 体验你的类原生移动应用直接从主屏幕运行的感觉！

6. Pro Tip: Future-Proof Code with Capacitor Plugins

6. 专业提示：使用 Capacitor 插件实现代码的未来兼容性

Instead of calling browser Web APIs directly (like navigator.clipboard or custom camera file inputs), access device capabilities through official Capacitor Plugins (such as @capacitor/camera, @capacitor/clipboard, @capacitor/share, @capacitor/geolocation, and @capacitor/preferences). 不要直接调用浏览器 Web API（如 navigator.clipboard 或自定义相机文件输入），应通过官方 Capacitor 插件（如 @capacitor/camera、@capacitor/clipboard、@capacitor/share、@capacitor/geolocation 和 @capacitor/preferences）来访问设备功能。

[!TIP] Why This Matters: Official Capacitor plugins feature first-class web implementations. When your app runs in the browser or PWA, Capacitor automatically uses standard web APIs and UI fallbacks (via @ionic/pwa-elements). If you ever decide to publish your app to the Apple App Store or Google Play Store down the road, you won’t need to change a single line of code—Capacitor seamlessly switches to native iOS and Android SDKs! [!TIP] 为什么这很重要：官方 Capacitor 插件具有一流的 Web 实现。当你的应用在浏览器或 PWA 中运行时，Capacitor 会自动使用标准 Web API 和 UI 回退（通过 @ionic/pwa-elements）。如果你将来决定将应用发布到 Apple App Store 或 Google Play Store，你无需更改一行代码——Capacitor 会无缝切换到原生的 iOS 和 Android SDK！

Conclusion

结论

Building an installable, native-like mobile PWA with Angular & Ionic gives your users instant loading times, smooth gestures, and a native mobile feel right from the browser—bypassing app store review delays completely while leaving the door open for native app store deployment anytime. Happy coding! 🚀 使用 Angular 和 Ionic 构建可安装的类原生移动 PWA，可以让用户直接从浏览器获得即时加载速度、流畅的手势和原生移动体验——完全绕过应用商店的审核延迟，同时随时为发布到原生应用商店留出空间。祝编码愉快！🚀

← 返回新闻列表 / Back to news list