Skip to main content

渐进式网络应用

Web...但更好​

¥The web...but better

渐进式 Web 应用 (PWA) 是一种使用现代 Web 功能为用户提供类似应用的体验的 Web 应用。这些应用满足某些要求（见下文），部署到服务器，可通过 URL 访问，并由搜索引擎编制索引。

¥A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines.

这可以与 Capacitor 结合使用，为所有用户提供多个部署目标。你可以将应用部署为 PWA 和原生应用，并利用这两个渠道。

¥This can work in conjunction with Capacitor to provide a multiple deploy targets for all your users. You can deploy your app as a PWA as well as Native app and take advantage of both channels.

Ionic 不仅允许你将应用发布到应用商店，还可以作为 PWA 部署到移动网络。

¥Ionic allows you to ship your app to not only the app store, but also deploy to the mobile web as a PWA.

需要什么​

¥What is required

要被视为渐进式 Web 应用，你的应用必须：

¥To be considered a Progressive Web App, your app must be:

  • 进步 - 适用于每个用户，无论选择何种浏览器，因为它们是以渐进增强为核心原则构建的。

    ¥Progressive - Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.

  • 反应灵敏 - 适合任何外形尺寸：台式机、移动设备、平板电脑或任何其他设备。

    ¥Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next.

  • 独立于连接性 - 通过 Service Worker 进行增强，可以离线或在低质量网络上工作。

    ¥Connectivity independent - Enhanced with service workers to work offline or on low quality networks.

  • 类似应用 - 使用应用外壳模型提供应用样式的导航和交互。

    ¥App-like - Use the app-shell model to provide app-style navigation and interactions.

  • 新鲜的 - 得益于 Service Worker 更新过程，始终保持最新状态。

    ¥Fresh - Always up-to-date thanks to the service worker update process.

  • 安全的 - 通过 HTTPS 提供服务，以防止窥探并确保内容未被篡改。

    ¥Safe - Served via HTTPS to prevent snooping and ensure content has not been tampered with.

  • 可发现的 - 由于 W3C 清单和 Service Worker 注册范围允许搜索引擎找到它们，因此可识别为“应用”。

    ¥Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

  • 可重新参与 - 通过推送通知等功能轻松重新参与。

    ¥Re-engageable - Make re-engagement easy through features like push notifications.

  • 可安装 - 允许用户将他们认为最有用的应用“保留”在主屏幕上，而无需使用应用商店的麻烦。

    ¥Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

  • 可链接 - 通过 URL 轻松共享，无需复杂的安装。

    ¥Linkable - Easily share via URL and not require complex installation.

Addy Osmani: Progressive web apps

这里有很多内容，但对于 Ionic 应用来说，可以归结为几点。

¥There is a lot here, but it boils down to a few points for Ionic apps.

离线支持​

¥Offline Support

应用应该能够离线工作。无论是显示正确的 "offline" 消息还是缓存应用数据以用于显示目的。

¥Apps should be able to work offline. Whether that be displaying a proper "offline" message or caching app data for display purpose.

Web 应用清单​

¥Web App Manifest

应用清单文件应描述你的应用所需的资源。这包括应用的显示名称、图标以及启动屏幕。如果你链接到 index.html 中的清单文件，浏览器将检测到并为你加载资源。

¥An app manifest file should describe the resources your app will need. This includes your app's displayed name, icons, as well as splash screen. If you link to the manifest file in your index.html, browsers will detect that and load the resources for you.

服务工作进程​

¥Service Worker

Service Worker 可以在离线支持中提及，但它确实值得单独的部分。Service Worker 提供了一种编程方式来缓存应用资源。无论是 JavaScript 文件还是来自 HTTP 请求的 JSON 数据。编程式 API 允许开发者决定如何处理缓存，并提供比其他选项更灵活的体验。

¥Service worker could be mentioned in Offline Support, but it really deserves its own section. Service worker provides a programmatic way to cache app resources. Be it JavaScript files or JSON data from a HTTP request. The programmatic API allows developers to decide how to handle caching and provides a much more flexible experience than other options.

目录