service-worker - PWA 添加到主屏幕不显示弹出窗口

Question

我为我的静态站点实现了 PWA。服务 worker 注册成功，我的页面也像我预期的那样离线工作，但真正的问题是添加到 主页

我包括 manifest.json 使用适当的图标，我仍然看不到添加主屏幕弹出，并且在尝试将添加从已检查推送到主屏幕时，我只能看到弹出窗口

这是我的网站网址:https://www.savesoftinc.com/

list JSON:

{
 "name": "Save Soft",
 "short_name": "SaveSoft",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#0EC3F7",
  "description": "IT Services & Solutions.",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/ms-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png",
   "density": "5.0"
  }
 ]
}

并尝试下面的代码来弹出横幅
正如谷歌所建议的

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});
window.addEventListener('appinstalled', (evt) => {
  app.logEvent('a2hs', 'installed');
});

但它显示错误:

Uncaught ReferenceError: btnAdd is not defined

引用: https://developers.google.com/web/fundamentals/app-install-banners/

Answer 1

所有指南均在以下位置提供:
https://developers.google.com/web/fundamentals/app-install-banners/
以下是 PWA“添加到主屏幕”横幅的要点

该网络应用程序尚未安装。

添加服务 worker 和 list 文件。 service worker 应该在 start_url 范围内的目录中。

(e.g. '/public/home' is in scope of '/' or '/public/')

在 manifest.json 中，prefer_related_applications 未设置为 true

manifest.json 包括:

短名称或名称，

图标必须包含 192px 和 512px 大小的图标，

起始网址，

显示必须是以下之一:全屏、独立或最小用户界面

通过 HTTPS 提供服务(服务人员需要)

已使用 fetch 事件处理程序注册了一个服务 worker 。例如self.addEventListener('fetch', function(event) {})

目前，用户已与域交互至少 30
秒

代码被放置在根 JS 文件中以加载服务 worker 。

function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/serviceWorker.js') //
        .then(function(reg){
            console.log("service worker registered")
        }).catch(function(err) {
            console.log(err)
        });
  }
  else {
    console.log("Could not find serviceWorker in navigator")
  }
}
registerServiceWorker()

在 html 页面 list 文件中添加<link rel="manifest" href="/pwa/manifest.json">

横幅之前没有被取消(根据 mini-info-bar 的指南，3 个月内不会出现)。您可以通过清除 cookie 将其恢复。

对于iOS设备，需要提供在html页面中设置的图标Safari Web Content Guide :.目前仅 Safari 浏览器支持“添加到主屏幕”。您可以通过单击共享图标找到它。