Question

这似乎是一个容易但又令人困惑的问题。我已经和Ionic 1合作了很长时间，两年前刚刚介绍了Ionic 2+但是暂时还没有使用它。

最近，我注意到Ionic已经发布了Ionic PWA，但我无法理解他们是否属于同一个项目或完全分开。我知道Ionic PWA是一个Web应用程序框架，同时传统的Ionic仅用于混合应用程序。

所以我的问题是：

他们是合并在一起还是分开？
如果它们是分开的，是否可以轻松地从Ionic3迁移到Ionic PWA？（我可能需要更多的浏览器支持）

谢谢！

更新这个问题是基于错误的假设，即Ionic PWA是一个与原始离子相似的独立框架。显然，Ionic PWA只是原始离子的一个术语，有一些微小的变化（你必须自己做）才能使它成为一个PWA。

Answer 1

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

因此，PWA与混合应用程序不具有相同的本机功能访问权限。例如，如果你想在混合应用程序中访问手机的相机，你可以使用类似Cordova插件的东西（在你的Ionic应用程序中，你可以使用@ionic-native/camera）。要从PWA（基本上是从Web浏览器）访问摄像头，Cordova将无法工作 - 您需要使用Web API（see what web APIs can do!）。

由于PWA的体系结构需要与常规混合应用程序的体系结构完全不同（并且应用程序越复杂，分歧越大），Ionic已经分离出Ionic PWA，以帮助开发人员更轻松地创建PWA。

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

将manifest.json文件添加到/src文件夹，并在index.html：<link rel="manifest" href="/manifest.json">中添加指向该文件夹的链接。 manifest.json和An example的further reading。
通过在index.html中找到以下代码段并取消注释，启用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＆gt;版本11.3）上“添加到主屏幕”并将该应用程序作为PWA运行。

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

Ionic PWA与传统的Ionic分开吗？

1 个答案: