Skip to main content

渐进式网络应用

Web...但更好​

🌐 The web...but better

渐进式网络应用（PWA）是一种使用现代网络功能为用户提供类似应用体验的网络应用。这些应用满足某些要求（见下文）、部署在服务器上、可以通过 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:

  • 渐进式 - 适用于每个用户，无论使用哪种浏览器，因为它们以渐进增强为核心原则构建。
  • 自适应 - 适应任何形态因素，桌面、移动设备、平板电脑，或未来的任何设备。
  • 连接独立 - 通过服务工作者增强，可在离线或低质量网络下工作。
  • 类应用 - 使用应用外壳模型来提供应用风格的导航和交互。
  • 新鲜 - 始终保持最新状态，感谢服务工作者的更新过程。
  • 安全 - 通过 HTTPS 提供服务，以防止窃听并确保内容未被篡改。
  • 可被发现 - 由于 W3C 清单和服务工作线程注册范围的存在，可以将其识别为“应用”，从而允许搜索引擎找到它们。
  • 可重新参与 - 通过推送通知等功能让重新参与变得容易。
  • 可安装 - 允许用户将他们认为最有用的应用保存在主屏幕上，而无需经过应用商店的麻烦。
  • 可链接 - 通过 URL 轻松分享，无需复杂安装。

阿迪·奥斯马尼：渐进式网页应用

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

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

离线支持​

🌐 Offline Support

应用应该能够离线工作。无论是显示一个适当的“离线”消息，还是缓存应用数据以供显示使用。

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

Web 应用清单​

应用清单文件应描述你的应用所需的资源。这包括你应用显示的名称、图标以及启动画面。如果你在 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.

服务工作者​

服务工作者可以在离线支持中提到，但它确实值得有自己独立的部分。服务工作者提供了一种以编程方式缓存应用资源的方法。无论是 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.

目录