添加渐进式网络应用商店/应用商店答案

【问题标题】：Add progressive web app play store/app store添加渐进式网络应用商店/应用商店
【发布时间】：2017-12-01 08:04:36
【问题描述】：

我们的 PWA 完全使用新的 Angular 构建。我们已经实现了所有的优化，例如 tree shaking、uglify、AOT、service worker 等。它运行得非常好，并且表现得像移动应用程序一样。如果用户将其添加到主屏幕，则很难区分。

我们在使用 PWA 时遇到了一些重大限制：

我们业务的所有通知（重要）都必须以 SMS 的形式发送。这显然具有巨大的成本效益。我们确实研究过使用“网络” 尽管我们也有很多 iOS 用户，但在 Android 上推送通知 .
我们需要在“背景”中“跟踪”地理位置的能力，而 HTML5 Geolocation API 不能满足要求。
目前，每次用户导航到 URL（作为 SMS 提醒发送）时，它往往会在浏览器中打开新选项卡（取决于手机）。即使用户实际将应用程序添加到他们的主屏幕中。这显然会增加加载时间并创建太多选项卡。我们宁愿将应用程序置于前台并导航到特定路线（或使用推送通知）
我们的一些活跃用户每天可以轻松收到 10 条通知，他们需要通过简单的方式导航到应用程序。

我们研究了 NativeScript 和 Ionic。两者都提供了开发 Angular 应用程序的能力，但它们“似乎”都是围绕专门为移动设备编写应用程序而设计的（......或从头开始）。

我可能遗漏了一些东西，但是当我们只想在渐进式网络应用程序周围放置包装器以便它可以作为“混合”应用程序安装时，最佳实践是什么。该应用程序只需导航到我们的公共 URL，它支持服务工作者，还允许我们访问一些本机功能。

我知道我可能在这里忽略了 PWA 的意义，但编写另一个“原生”应用对我们来说并不是真正的选择。

在 Google Play Store 或 Apple App Store 中公开我们的渐进式网络作为应用程序的最佳方式是什么？

【问题讨论】：

创建一个普通的cordova + Angular项目..!!!
对于 Cordova，我注意到它总是指向 HTML/JS/css 内容所在的“本地”文件夹。指向远程 URL 不会造成任何大问题吗？推荐练习吗？
PWA2APK 工具值得一试。它使用 TWA（受信任的 Web 活动）工作，可以将任何 PWA 转换为 APK 文件，该文件可以上传到 Google Playstore。

标签： android ios angular progressive-web-apps

【解决方案1】：

开始使用托管 Web 应用程序的好地方是 PWABuilder.com。该工具可以在线使用，也可以从 CLI 使用。其中一部分创建了 service worker 和其他东西，但它也创建了适用于 Android 和 iOS 的 Cordova 项目。

我使用 PWABuilder 只是为了创建一个起点。最终将生成的 iOS 和 Android 项目合二为一，适用于 iOS、Android 和 Windows。因为它是 Cordova，所以您也可以使用插件。

【讨论】：

这很有帮助，谢谢！！我最近还发现了 Android 上的新标志 (enable-improved-a2hs)，它允许将 PWA 作为标准应用程序安装在 android 中：developers.google.com/web/updates/2017/02/…

【解决方案2】：

2019 年更新

现在 Google 对 Google Playstore 上的 PWA 应用程序开放，因此可以使用 PWA2APK 等工具将现有 PWA 转换为 Google Playstore 就绪应用程序。该工具生成的Android APK（PWApk）可以上传到Playstore。

PWA 的发明者之一 Alex Russel 在推特上发布了此工具。

https://twitter.com/slightlylate/status/1093681791297187840

【讨论】：

【解决方案3】：

您可能想要搜索深层链接。

https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen#android_intent_filters

新的和改进的添加到主屏幕

Paul Kinlan 作者：Paul Kinlan Paul 是 Chrome 的开发者倡导者在 Chrome 42 中引入了“添加到主屏幕”横幅。这是一个 Web 迈出了一大步，因为它为用户提供了轻松保持在他们的主屏幕上最喜欢的网站，就像原生应用程序一样。我们听说过来自阿里巴巴等开发者的用户重新参与的频率增加了 4 倍将他们的网站添加到主屏幕。我们还看到调整添加到主屏幕的启发式方法以提示更快的产量提高 48% 安装。

我们很高兴与大家分享团队已经致力于改进添加到使 Web 应用程序成为一流公民的主屏幕体验安卓。 Web 应用程序不再只是一个快捷方式图标，而是现在与安卓集成。这意味着将 PWA 添加到他们的主屏幕将能够在他们看到其他应用程序的任何地方找到它（例如在应用程序抽屉中或搜索应用程序），然后从意图。我们认为这是众多改进中的第一步来并打算使其成为添加到家庭的默认体验未来几个月的屏幕。

改进的添加到主屏幕体验已在 Chrome Canary 并将在接下来的 Chrome 57 测试版中推出几周。

注意：它已在 Chrome 稳定频道上面向所有用户推出 Chrome 59. 要测试您的网站，请访问您的 PWA。你可以开始安装从三点菜单>“添加到主屏幕”或通过添加到主屏幕横幅。

这种新体验是对原始版本的巨大改进添加到主屏幕，但这些之间存在一些差异安装了 Progressive Web Apps 和 Android Apps。

更新应用的图标和名称您现在可以更新您的 Progressive Web App 的图标和名称，并将其反映到用户。更改清单中的图标或名称将更新图标用户随后打开网站后在主屏幕上显示。

当一个 Progressive Web App 通过这个新改进的添加到主屏幕体验将被注册将系统作为其域的 URL 空间的目标。这表示当用户单击包含在其中的链接时渐进式 Web 应用程序的范围，您的应用程序将改为打开运行 PWA 时打开 Chrome 的次数。

当您安装 Progressive Web App 时，我们会查看您的 Web App 清单和其他元数据并创建一个 APK（Android Package Kit）安装到用户的设备上，这可能需要很短的时间任何用户第一次安装您的 Web 应用时的那一刻。

注意：每当 Web App Manifest 发生变化时，我们都需要生成一个新的 APK，因此频繁更新清单不是一个好主意。确保您不使用特定于用户的内容尤为重要清单中的标识符（例如每个用户的自定义 start_url）为这会生成一个唯一的 APK，这意味着您的安装时间将是比你预期的要长很多。在那个 APK 中，我们定义了一个 Android Intent 定义 Web 应用程序何时应该打开的过滤器。为了例如，只要该链接打开，就打开https://airhorner.com 应用程序点击后，Chrome 会创建以下内容。

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:scheme="https"
    android:host="airhorner.com"
    android:pathPrefix="/" />
</intent-filter>

这非常强大，但不是很灵活。这简单地说，当一个链接被点击或拦截在Android中为https://airhorner.com/的整个域打开应用程序。

但是，如果您不希望 PWA 为您的所有路径打开，该怎么办？领域？这就是范围网络应用清单属性的用武之地玩。范围是......

【讨论】：

【解决方案4】：

您可以轻松地将 PWA 打包为 ionic/Cordova 应用。

目前无法在 ios 上实现 web 推送。使用 Cordova。
无法进行后台跟踪。考虑混合使用定期推送通知和后台同步，看看是否有帮助。
在 android 上，用户需要做的就是在链接第一次打开时总是点击，不记得它在 ios 上是怎样的。
推送通知允许您指定 URL。

您可以阅读这篇文章以进一步了解我如何将 cordova 与 PWA 混合。

https://medium.com/awebdeveloper/pwa-is-future-of-mobile-how-to-tame-it-855dd42df0ec

【讨论】：