Question

我们的PWA完全使用新的Angular构建。我们已经实现了所有优化，例如树摇，uglify，AOT，服务工作者等。它运行良好，并且像移动应用程序一样运行。如果用户将其添加到主屏幕，则很难区分。

PWA遇到了一些很大的限制：

我们业务的所有通知（至关重要）必须以短信形式发送。这显然具有巨大的成本效益。我们确实考虑过使用＆＃34; web＆＃34; 在Android上推送通知虽然我们也有很多iOS用户
我们需要有能力跟踪＆＃34;地理位置＆＃34;背景＆＃34;和HTML5 Geolocation API不会削减它。
目前，每当用户导航到URL（作为短信提醒发送）时，它往往会在浏览器中打开新标签（取决于手机）。即使用户实际将应用程序添加到其主屏幕中也是如此。这显然会增加加载时间并创建太多选项卡。我们宁愿将应用程序放在前台并导航到特定路线（或使用推送通知）
我们的一些活跃用户每天可以轻松收到10个通知，他们需要轻松导航到应用。

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

我可能错过了一些东西，但是当我们只想将包装器放在我们的渐进式Web应用程序中时，最好的做法是什么，以便它可以安装为＆＃34; hybrid＆＃34;应用程序。该应用程序只需导航到我们的公共URL，它支持服务工作者，并允许我们访问一些本机功能。

我知道我可能在这里错过了PWA的观点，但写了另一个＆＃34; native＆＃34; app对我们来说不是真正的选择。

在Google Play商店或Apple App Store中展示我们的渐进式网络作为应用的最佳方式是什么？

Answer 1

开始使用托管Web应用程序的好地方是PWABuilder.com。此工具可以在线使用，也可以从CLI使用。它的一部分创建了服务工作者和东西，但它也为Android和iOS创建了Cordova项目。

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

Answer 2

更新2019

现在Google可以在Google Playstore上使用PWA应用了，因此可以使用PWA2APK之类的工具将现有的PWA转换为支持Google Playstore的应用。该工具生成的Android APK（PWApk）可以上传到Playstore。

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

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

Answer 3

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

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

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

Paul Kinlan作者Paul Kinlan Paul首先是开发者倡导者Chrome   介绍了＆＃34;添加到主屏幕＆＃34; Chrome 42中的横幅。这是一个   网络的一大步，因为它为用户提供了轻松保存的能力   他们主屏幕上最喜欢的网站，很像本机应用程序。我们听说过   来自像阿里巴巴这样的开发者，用户重新参与的频率是4倍   将他们的网站添加到主屏幕。我们也看到了调整   启发式添加到主屏幕以提示更快收益率达到48％   安装。

我们很高兴地分享该团队已经开展了改进的添加工作   主屏幕体验，使网络应用程序成为一流的公民   Android系统。现在，网络应用程序将不再仅仅是一个快捷方式图标   与Android集成。这意味着向其添加PWA的用户   主屏幕将能够在他们看到其他应用的任何地方找到它（例如   在应用程序抽屉或搜索应用程序），并从中打开该网站   意图。我们认为这是许多改进中的第一步   来打算把它作为添加到家的默认体验   屏幕在未来几个月。

已经提供了改进的主屏幕增加体验   Chrome Canary将在下一季推出Chrome 57测试版   几个星期。

注意：它已经在Chrome的稳定频道上播放给所有用户   Chrome 59.要测试您的网站，请访问您的PWA。你可以开始安装   从三点菜单＆gt; ＆＃34;添加到主屏幕＆＃34;或通过添加到   主屏幕横幅。

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

更新应用的图标和名称您现在可以更新   您的Progressive Web App的图标和名称，并将其反映到   用户。更改清单中的图标或名称将更新图标   在用户随后打开网站后在主屏幕上。
     通过安装Progressive Web App时，
Android Intent过滤器   这个新的改进添加到主屏幕体验它将被注册   将系统作为其域的URL空间的目标。这个   表示用户点击其中包含的链接的时间   在您的应用程序的范围内，您的应用程序将被打开   在您的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为您的所有路径打开，该怎么办？   域？这就是范围Web应用程序清单属性所在的位置   玩。范围是......

Answer 4

您可以轻松将PWA打包为离子/ Cordova应用程序。

目前无法在ios上实现网络推送。使用Cordova。
无法进行背景跟踪。考虑定期推送通知和放大器的混合。后台同步以查看是否有任何帮助。
在Android上，用户需要做的就是在链接打开时第一次点击，不记得它是如何在ios上进行的。
推送通知允许您指定网址。

你可以阅读这篇文章，了解更多关于我如何将cordova与PWA混合使用。

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

添加渐进式Web应用程序游戏商店/应用商店

4 个答案: