构建渐进式 Web 应用
Capacitor 对渐进式 Web 应用有一流支持,使得构建一个在 iOS 和 Android 上原生运行,同时在 Web 上作为移动 Web 应用或"渐进式 Web 应用"运行的应用变得容易。
什么是渐进式 Web 应用?
简单来说,渐进式 Web 应用(PWA)是一种使用现代 Web 能力为用户提供类似应用体验的 Web 应用。这些应用部署在传统 Web 服务器上,可通过 URL 访问,并且可以被搜索引擎索引。
渐进式 Web 应用实际上只是针对移动性能进行了优化,并利用新可用的 Web API 来提供类似于传统原生应用的功能(如推送通知和离线存储)的网站的另一个术语。
Capacitor 和渐进式 Web 应用
Capacitor 对渐进式 Web 应用_和_原生应用都有一流支持。这意味着 Capacitor 的 bridge 支持在原生上下文或 Web 中运行,许多插件在_两种上下文_中都可以使用,具有完全相同的 API 和调用约定。
这意味着您可以将 @capacitor/core 和 Capacitor 插件用作原生应用_和_渐进式 Web 应用的依赖,Capacitor 在需要时会无缝地调用 Web 代码,在可用时调用原生代码。
此外,Capacitor 还提供了许多用于查询当前平台的实用程序,以便在原生或 Web 上运行时提供定制化的体验。
为应用添加渐进式 Web 应用支持
渐进式 Web 应用应具有应用清单(App Manifest)和服务工作者(Service Worker)。
应用清单
首先,您需要一个位于 index.html 文件旁边并提供应用元数据(如其名称、主题颜色和图标)的应用清单文件(manifest.json)。例如,当您的应用安装到主屏幕时,将使用这些信息。
服务工作者
接下来,为了发送推送通知和离线存储数据,服务工作者将使您的 Web 应用能够代理网络请求并执行处理和同步数据所需的后台任务。
服务工作者功能强大但复杂。通常,不建议从头开始编写。相反,请查看像 Workbox 这样的工具,它们提供了常见的服务工作线程配方,您可以轻松地将其整合到应用中。
有关使用服务工作者的更多信息,包括如何注册它们,请阅读 MDN 上的使用服务工作者页面。
渐进式 Web 应用性能
渐进式 Web 应用通过多个性能标准来评判,包括可交互时间和首次有意义的绘制。
在上线前遵循渐进式 Web 应用清单,并使用 Lighthouse 来审计和测试您的应用。
如果您在使用现有的前端技术栈时难以达到渐进式 Web 应用性能标准,请查看 Ionic Framework,它可以几乎零配置实现快速的 PWA 支持。