manifest - 添加到主屏幕在 Beforeinstallprompt 事件触发后不提示

标签 manifest service-worker progressive-web-apps beforeinstallprompt

即使满足所有 PWA 规范并在 Light House 上检查后,添加到主屏幕也不会提示。

我已尝试以下代码来检查应用程序是否已安装。但 appinstalled 事件未触发,而 beforeinstallprompt 事件已成功触发。

//应用程序已安装

window.addEventListener('appinstalled', (evt) => { app.logEvent('a2hs', '已安装'); });

//安装提示之前

  window.addEventListener('beforeinstallprompt', (event) => {
   event.preventDefault();
   deferredPrompt = event;
 });```

// manifest.json

`{
    "name": "demo",
    "short_name": "demo",
    "icons": [{
            "src": "/static/public/icon/icon-192x192.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "/static/public/icon/icon-512x512.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "orientation": "portrait",
    "display": "standalone",
    "theme_color": "#085689",
    "background_color": "#085689",
    "gcm_sender_id": "103xx3xxx50x",
    "gcm_user_visible_only": true
}
`

// service worker

`self.addEventListener('fetch', (event) => {
    console.log('event', event);
});`

最佳答案

从代码中删除此行

event.preventDefault();

从 Chrome 76 开始,preventDefault() 停止显示自动迷你信息栏

更多详情请点击这里
https://developers.google.com/web/fundamentals/app-install-banners/

关于manifest - 添加到主屏幕在 Beforeinstallprompt 事件触发后不提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58081643/

相关文章:

service-worker - 在单页应用中检查 Service Worker 更新

angular - Service Worker 中的后台同步在 android 上的 chrome 中不起作用

google-chrome - 强制在 chrome 上第二次提示 "Add to homescreen"

java - 如何从 Constant Value 类中分配 list 中的 API key ?

java - 运行使用 Gradle 构建的 JAR 文件时“没有主要 list 属性”

ios - 如何在 iOS 中保存 PWA 状态

ionic-framework - Ionic 4 PWA Angular 8 - 无法通过服务 worker 错误获取开始 URL

reactjs - 我可以使用React Native开发PWA吗

html - 如何配置 list 文件

android - 单击文件浏览器中的文件时,将我的程序添加到 "Complete action using..."列表