javascript - Html 弹出窗口将 PWA 图标添加到电话

标签 javascript angular service-worker progressive-web-apps

好吧,我还没有找到这个问题的答案。 我需要在 HTML 中创建一个弹出窗口,允许我在主屏幕上安装 PWA 图标,我不是在谈论常规安装横幅。 我已经知道如何使用 list 和 Service Worker 来执行此操作。

现在,要了解这一点,我需要您在安装 Instagram PWA 时看到此行为。

  1. Instagram 显示了这个 html 弹出窗口,我猜想有某种 javacript 代码在按下按钮时会触发,它会触发常规的 安装横幅。

pwa install

有什么想法吗?

最佳答案

当 PWA 满足添加到主屏幕的要求时,浏览器会触发“beforeinstallprompt”事件。稍后可能会再次手动捕获并触发该事件。基本上:监听事件,如果触发则捕获它,如果用户单击重新触发通风口,则向用户显示您的自定义添加到主屏幕 View 。

具体细节和代码示例:https://developers.google.com/web/fundamentals/app-install-banners/

关于javascript - Html 弹出窗口将 PWA 图标添加到电话,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50283401/

相关文章:

javascript - 当 Assets 发生变化时更新 service worker

javascript - .html() 、 innerHTML() 和 .text() 不更改文本

javascript - 替换JS语言文件加载旧值

angular - TypeError : control. setParent 不是函数

具有 ux_mode : redirect 的 Angular/Typescript Google 登录 API

javascript - 覆盖 Angular 的 Service Worker 来处理 POST 请求

javascript - Service Worker 在缓存更新时重新加载页面

javascript - 为什么 JavaScript 框架会保存核心方法以供快速引用?

javascript - 单击图像以打开带有静态文本的幻灯片

node.js - Karma 测试在 chrome 中失败,但在 phantomjs 中通过