angular - Ionic PWA 与传统 Ionic 是分开的吗？

Question

这似乎是一个简单但又令人困惑的问题。我已经使用 Ionic 1 很长时间了，两年前才接触到 Ionic 2+，但已经有一段时间没有使用它了。

最近，我注意到 Ionic 发布了 Ionic PWA但我不明白他们是否属于同一个项目或完全分开。我知道 Ionic PWA 是一个网络应用程序框架，而传统的 Ionic 仅用于/推荐用于混合应用程序。

所以我的问题是:

1. 它们是合并在一起还是分开？

2. 如果它们是分开的，是否可以轻松地从 Ionic3 迁移到 Ionic PWA？ (我可能需要更多浏览器支持)

   谢谢!

更新这个问题是基于错误的假设提出的，即 Ionic PWA 是一个独立但与原始 Ionic 相似的框架。显然，Ionic PWA 只是原始 Ionic 的一个术语，经过一些小改动(您必须自己做)以使其成为 PWA。

Answer 1

PWA 与混合应用的不同之处在于，它们在网络浏览器的上下文中运行，而不是在操作系统级别的 WebView 中运行(更多关于 Android 和 iOS 的 WebView)。 PWA 就像一个网页，有自己的应用程序图标，并在没有标签和 URL 栏等的全屏 Web 浏览器中运行。

因此，PWA 无法像混合应用那样访问原生功能。例如，如果您想在混合应用程序中访问手机的相机，您可以使用 Cordova 插件之类的东西(在您的 Ionic 应用程序中，您将使用 @ionic-native/camera )。要从 PWA(本质上是从网络浏览器)访问相机，Cordova 将无法工作——您需要使用网络 API ( see what web APIs can do! )。

由于 PWA 的架构需要与常规混合应用程序的架构完全不同(应用程序越复杂，差异越大)，Ionic 已从 Ionic PWA 分支出来，以帮助开发人员更轻松地创建 PWA。

要使您的 Ionic3 应用程序作为 PWA 运行:如果您使用 ionic start 从 Ionic 入门应用程序模板之一创建了 Ionic 应用程序，您可以做两件事来让您的应用程序作为 PWA 运行。

1. 添加 manifest.json文件到您的/src文件夹并在您的 index.html 中添加指向它的链接: <link rel="manifest" href="/manifest.json"> . An example的 manifest.json和 further reading .

2. 通过在您的 index.html 中找到以下代码片段来启用 Service Worker 支持并取消注释。不过，我发现需要做更多的工作才能真正让 Service Worker 工作。更多信息 MDN .

<!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
      }
  </script>-->

然后运行ionic build并部署 www文件夹到网络，最好通过 HTTPS 提供。如果您从移动浏览器打开该页面，您应该能够在 Android 和 iOS(iOS > 版本 11.3)上“添加到主屏幕”并将该应用程序作为 PWA 运行。

请记住，您拥有的任何 Cordova 功能都将不起作用。此外，如果您使用 lazy-loading ，这将有助于提升应用性能。