时间戳

首页 > 解决方案 > 如何将我的 pwa 启动到我的 Android 手机

android - 如何将我的 pwa 启动到我的 Android 手机

问题描述

我是 PWA 的新手，我用 angular-cli 创建了一个简单的 PWA。

我可以成功地将我的应用程序运行到浏览器。但我想在我的移动设备上作为应用程序启动它。我无法通过浏览器在我的手机上本地访问我的应用程序，因为我的 PC 和手机位于不同的网络中。我该如何启动它？

提前致谢。

标签： androidangularangular-cliprogressive-web-apps

解决方案

您不能直接将其安装在您的移动设备上，例如移动应用程序。

但是你需要在你的网页上添加一个安装按钮 -> 从手机打开它 -> 点击它

浏览器将检查是否满足在设备上安装的所有要求，然后继续

从 Chrome 68 开始，每次用户访问您的应用时，Chrome 都会触发 beforeinstallprompt 事件（但不一定建议安装）。您可以捕获此事件以创建自定义安装按钮。

首先，您需要知道事件只触发一次，而且非常快！你会想尽快听它。让我们将它添加到我们之前创建的 PwaService 的构造函数中：

window.addEventListener('beforeinstallprompt', event => {  
> this.promptEvent = event; });

如果事件触发，我们将其保留在服务中。然后我们可以检查是否可以安装，如下所示：

 <button *ngIf="Pwa.promptEvent" (click)="installPwa()">   Install
 </button> And in the component:

 constructor(public Pwa: PwaService) {} installPwa(): void {  
 this.Pwa.promptEvent.prompt(); }

单击该按钮将向用户显示用于将应用程序添加到主屏幕的浏览器对话框。

您可以查看此链接以获取更多详细信息

推荐阅读