将渐进式Web应用程序添加到应用商店

27

我们的PWA完全使用新版Angular构建。我们已经实现了所有优化,如树摇、混淆、AOT、服务工作者等。它运行良好,表现得就像移动应用一样。如果用户将其添加到主屏幕上,很难区分出差异。

我们遇到了几个PWA的限制:

  • 我们业务中所有关键通知必须以短信的形式发送。这显然具有巨大的成本优势。虽然我们有许多iOS用户,但我们确实考虑使用"web"推送通知在Android上。
  • 我们需要能够在后台“跟踪”地理位置,但HTML5地理位置API并不足够。
  • 当前每次用户导航到URL(作为短信提醒发送)时,它往往会在浏览器中打开新标签页(取决于手机)。即使用户实际上将应用程序添加到主屏幕上,这显然会增加加载时间并创建太多标签页。我们更愿意将应用程序带到前台并导航到特定路由(或使用推送通知)。
  • 我们的一些活跃用户可以轻松接收到每天10条通知,并且他们需要一种简单的方式来进入应用程序。

我们研究了NativeScript和Ionic。它们都提供了开发Angular应用程序的能力,但它们似乎都是围绕着为移动设备编写应用程序(...或从头开始使用它们)设计的。

我可能错过了某些东西,但是当我们只想在我们的渐进式Web应用程序周围放置包装器以便将其安装为“混合”应用程序时,最佳实践是什么?该应用程序简单地导航到我们的公共URL,支持服务工作者,并允许我们访问一些原生功能。

我明白我可能没有理解PWA的要点,但对我们来说,编写另一个“本机”应用程序并不是真正的选择。

将我们的渐进式Web作为应用程序发布到Google Play Store或Apple App Store的最佳方法是什么?


1
创建一个纯 Cordova + Angular 项目..!!! - Parth Ghiya
使用Cordova时,我注意到它总是指向包含HTML/JS/CSS内容的“本地”文件夹。指向远程URL不会引起任何大问题吗?这是推荐的做法吗? - user5442843
1
PWA2APK工具值得一试。它使用TWA(可信任的Web活动)并可以将任何PWA转换为APK文件,可上传到Google Play商店。 - Felix josemon
4个回答

9
一个开始使用托管Web应用程序的好地方是PWABuilder.com。这个工具可以在线使用或从CLI中使用。其中一部分创建了一个服务工作者和其他东西,但它也为Android和iOS创建了Cordova项目。
我曾经使用过PWABuilder来创建一个起点。最终将生成的iOS和Android项目合并为一个iOS、Android和Windows项目。因为它是Cordova,你也可以使用插件。

1
这非常有帮助,谢谢!我最近还发现了 Android 上的新标志(enable-improved-a2hs),它允许 PWA 作为标准应用程序安装在 Android 中:https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen - user5442843

5

2019更新

现在Google已经开放了PWA应用在Google Play商店上的使用,因此可以使用像PWA2APK这样的工具将现有的PWA转换为适用于Google Play商店的应用程序。该工具生成的Android APK(PWApk)可以上传到Play商店。

这个工具已经被PWA的发明者之一Alex Russel推荐过。

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


2

您可能需要搜索深度链接。

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

改进后的“添加到主屏幕”功能
Chrome在42版本中首次引入了“添加到主屏幕”的横幅。这对于Web来说是一个重大的进步,因为它使用户能够轻松地将喜欢的网站保留在主屏幕上,就像本地应用程序一样。我们听到像阿里巴巴这样的开发者说,将网站添加到主屏幕后,用户的再次参与率要高4倍。我们还发现,将“添加到主屏幕”的启发式算法调整得更早会导致48%的安装量增加。
我们很高兴地分享,团队已经改进了“添加到主屏幕”的体验,使Web应用程序成为Android的一流公民。Web应用程序不再只是快捷方式图标,而是与Android集成在一起。这意味着将PWA添加到主屏幕的用户将能够在任何其他应用程序(例如在应用程序抽屉中或搜索应用程序时)中找到它,并从意图中打开该网站。我们将其视为即将推出的一系列改进措施中的第一步,并打算在未来几个月内将其作为“添加到主屏幕”的默认体验。
改进后的“添加到主屏幕”体验已经在Chrome Canary中可用,并将在未来几周内推出到Chrome 57 beta版。
注:从Chrome 59开始,已经将其推广到Chrome的稳定频道中的所有用户。要测试您的网站,请访问您的PWA。您可以从三个点菜单中开始安装,然后选择“添加到主屏幕”,或者通过添加到主屏幕横幅进行操作。
这种新体验与“添加到主屏幕”的原始版本相比是一个巨大的进步,但是这些安装的渐进式Web应用程序和Android应用程序之间存在一些差异。
更新您应用程序的图标和名称
现在,您可以更新您的渐进式Web应用程序的图标和名称,并使其反映给用户。在清单中更改图标或名称将在用户随后打开该站点后更新主屏幕上的图标。
Android意图过滤器
当通过这种新的改进的“添加到主屏幕”体验安装渐进式Web应用程序时,它将被注册到系统中,成为其域的URL空间的目标。这意味着,当用户点击包含在您的渐进式Web应用程序范围内的链接时,您的应用程序将被打开,而不是Chrome打开并运行您的PWA。
当您安装渐进式Web应用程序时,我们查看您的Web应用程序清单和其他元数据,并创建一个APK(Android Package Kit)安装到用户的设备上,第一次安装您的Web应用程序可能需要一段时间。
注意:每当Web应用程序清单更改时,我们都需要生成一个新的APK,因此不建议经常更新清单。特别重要的是确保您不在清单中使用用户特定的标识符(例如每个用户的自定义start_url),因为这将生成一个唯一的APK,这意味着您的安装时间将比您预期的要长。在该APK中,我们定义了一个Android Intent Filter,它定义了何时打开您的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在域上的所有路径中打开呢?这就是scope web应用程序清单属性发挥作用的地方。范围是一个....


0

你可以轻松地将你的PWA打包成ionic/Cordova应用程序。

  1. 目前无法在iOS上实现Web推送。请使用Cordova。
  2. 无法进行后台跟踪。考虑混合定期推送通知和后台同步,看看是否有帮助。
  3. 在Android上,用户只需在第一次打开链接时点击“始终”,不记得在iOS上如何操作。
  4. 推送通知允许您指定URL。

你可以阅读这篇文章,了解我如何将cordova与PWA混合使用。

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接