ionic 3 将应用程序发布为 PWA（渐进式 Web 应用程序）答案

【问题标题】：ionic 3 publish app as PWA (Progressive Web App)ionic 3 将应用程序发布为 PWA（渐进式 Web 应用程序）
【发布时间】：2017-05-26 06:52:56
【问题描述】：

我想将我的应用发布为 PWA，所以我所做的是

将此脚本插入 index.html

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

然后安装

npm run ionic:build --prod

它看起来像部署它，但我的问题是：

我需要上传哪些文件到主机才能将应用发布为 PWA？
为什么当我在应用程序中更改某些内容并运行 ionic serve 时没有任何变化，并且仅在 WWW 文件夹的 index.html 中发生了变化？为什么？（因为现在是 PWA？？）
当我打开 www 文件夹并运行 open index.html 时，当我按下打开警报对话框的按钮时，它不会打开它。为什么？
什么时候运行命令？仅在开发结束时？

【问题讨论】：

标签： ionic-framework ionic2 progressive-web-apps ionic3

【解决方案1】：

运行

ionic cordova platform add browser

ionic build browser --prod --release

然后去[project_folder]/platforms/browser/www复制你的http服务器上的内容。

【讨论】：

我什么时候这样做？当我完成应用程序的开发？因为我现在运行，当我在应用程序中更改某些内容并运行 ionic serve 时，我看不到更改。
应该用ionic emulate browser --livereload完成。但是它有一些问题（stackoverflow.com/questions/44178594/…）（github.com/driftyco/ionic-cli/issues/790）
当我运行 ionic cordova emulate add browser --livereload 它显示“你添加的平台没有 Api.js”
ionic emulate add browse 不正确。先添加平台，再仿真。
只是ionic emulate browser --livereload（从你的句子中删除add）

【解决方案2】：

不要为 PWA 烦恼 Cordova。只需使用npm run build --prod 并上传/www 文件夹即可。

PWA 更多的是概念的集合，因此它不仅仅是“开”或“关”。至少你可能想添加一个清单文件，这样你就可以通过隐藏浏览器框架、设置你的图标、应用程序名称等来使它更像“应用程序”。取消注释添加服务工作者的行并不会神奇地使它成为PWA 如果您没有将任何“有用”的东西放入 Service Worker（您可能需要也可能不需要这样做，具体取决于您的应用程序的工作方式）。另请注意，您需要 HTTPS 才能使用服务工作者。

您还需要手动从 index.html 中删除包含 cordova.js 的行（如果您只是上传 /www，则会出现 404 错误）。

【讨论】：

这种做法会影响开发架构，例如排除支持浏览器平台的原生插件。
没错。不过，我还没有看到太多在浏览器中“运行良好”的功能，因此通常会在我的代码中检查平台并隐藏某些按钮等。其余的本机特定代码已经检查了可用性，但当然可以，这取决于您的您可能必须使用cordova浏览器的应用类型，但我认为“可以”用作PWA的应用除外。
请详细说明将平台浏览器添加到Ionic的优点（或缺点）。它有什么作用，为什么我需要它？据我了解，一些 Cordova 插件（或 Ionic Native）也可以针对浏览器，如果您将其作为 PWA 运行，它会自动回退到此？不支持浏览器的插件需要为 web 提供一个包装器和回退服务 - 对吗？
@Rodney 这个决定基本上归结为是否使用cordova（平台浏览器）（www文件夹）。如果您只针对 PWA，那么您实际上并没有想要从 cordova 获得任何东西，因为大多数插件浏览器包装器只会为您提供您在手机上获得的一小部分功能，所以您会就像不想将它们用于网络应用一样。
这也确实取决于您使用的插件，但据我所知，您更愿意检查插件是否存在，如果不是，则为用户提供与大多数包装器提供的不同/更好的体验。

【解决方案3】：

我使用这个命令来构建 web 应用程序

ionic cordova build browser

然后将 IONIC-PROJECT/platforms/browser/www 中的内容复制到网络服务器。

【讨论】：

我真的不认为这回答了如何部署 PWA 应用程序的真正问题