如何使用 Ionic 2 为 PWA 和本机应用程序部署不同版本的 index.html答案

【问题标题】：How to deploy a different version of index.html for PWA and native Apps with Ionic 2如何使用 Ionic 2 为 PWA 和本机应用程序部署不同版本的 index.html
【发布时间】：2017-10-13 16:14:43
【问题描述】：

我们的 PWA 位于此处：https://m.quemesa.com，我们也有具有相同代码库的本机应用程序。

但是，我们并不是针对 Cordova 浏览器平台（因为它似乎没有得到官方支持，而且我看不出它有什么好处）所以我们必须为 PWA 添加与我们的原生应用程序相比略有不同的代码构建。例如，在 PWA 中，我们使用纯 Google Analytics 解决方案，它需要 index.html 中的 2 行 javascript。

对于我们的原生构建，我们使用 Cordova GA 插件，因此这不是必需的。在 PWA 中，我们不需要链接到 Cordova.js 和 Vendor.js，例如（它们会收到 404 错误）。在我们做的原生应用中。

目前，我在为 PWA 上传到 Azure 之前手动编辑（讨厌）输出文件夹。

是否有某种方法可以编辑 Ionic 构建过程，以便我可以拥有 2 个版本的索引，它可以根据构建类型为输出文件夹抓取它想要的版本，或者它可以在构建时修改 html 文件?

【问题讨论】：

标签： ionic2 build-process progressive-web-apps

【解决方案1】：

目前的 ionic 构建工具本身并不支持这一点。

您可以只拥有两个版本的 index.html 和一个小脚本来在它们之间交换并构建两个版本。

这也是您可以使用“完整”CI 构建工具来完成的事情。由于您提到了 Azure，您可以使用 Visual Studio Team Services。现有任务可用于 npm（安装 ionic、运行 PWA 构建）和运行命令/PowerShell 脚本。通过设置一个“代理”虚拟机开始构建应用程序（节点、离子、Android Studio 等）所需的一切，然后从那里构建您的构建过程，可能会更容易开始。

【讨论】：

好的，谢谢罗里。我目前在 GIT 中使用 2 个不同的分支来做这件事，但我更喜欢自动化它。使用 VSTS 构建的完整 CI 已在我的列表中列出了一段时间 - 我必须尽快完成

【解决方案2】：

我使用gulp-preprocess根据目标平台更新构建时的 index.html。预处理的想法是在离子服务/构建之前生成一个目标 index.html，其中包含所选模式、pwa 或本机所需的确切声明。有关此帖子的更多详细信息"Using Ionic/Cordova app sources as PWA"

【讨论】：