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

Question

我为我的 static 网站实施了 PWA。 service worker 注册成功，我的页面也像我预期的那样离线工作，但真正的问题是添加到主屏幕

我包含了带有适当图标的manifest.json ，但我仍然没有看到弹出的添加主屏幕，并且在尝试将添加推送到主屏幕时，我只能看到弹出窗口

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

清单 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');
});

但它显示错误：

未捕获的 ReferenceError：未定义 btnAdd

参考： https://developers.google.com/web/fundamentals/app-install-banners/

Answer 1

添加到主屏幕 (A2HS) 自动弹出测试的第一步是使用灯塔审计工具。
您需要在那里运行 PWA 审计并纠正警告，直到您看到
---“可以提示用户安装Web App”

灯塔审计工具可作为 Chrome 开发工具中的选项卡或作为 Chrome 扩展程序使用。
扩展通常具有更新的功能。

看到该消息后，您可以在 Chrome 桌面和 Android（Chrome 和 Edge）上测试自动弹出消息

需要注意的重要事项

第一次看到它后，要再次看到弹出窗口，您可能需要完全清除浏览器缓存，以便
Edge - 删除快捷方式
Chrome 桌面 - 在此处卸载应用程序：chrome://apps/
Crome Android - 卸载应用程序中的 WebApk

一旦您知道自动 A2HS 弹出窗口的工作原理，您就可以（如果需要）拦截自动弹出窗口以减少对用户的烦扰。 向他们展示一个按钮，让他们知道他们可以在方便时使用 A2HS。
如此处所述
https://developers.google.com/web/fundamentals/app-install-banners/

这是我的 A2HS 测试仪。
您将看到按钮显示而不是自动弹出窗口。

Answer 2

所有指南均在以下网址提供： https : //developers.google.com/web/fundamentals/app-install-banners/

以下是 PWA“添加到主屏幕”横幅的要点

1. 网络应用程序尚未安装。
2. 添加服务工作者和清单文件。 service worker 应该位于 start_url 范围内的目录中。

（例如“/public/home”在“/”或“/public/”的范围内）

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

4. manifest.json 包括：

   • short_name 或名称，
   • 图标必须包含一个 192px 和一个 512px 大小的图标，
   • 起始网址，
   • 显示必须是以下之一：全屏、独立或最小用户界面

5. 通过 HTTPS 提供服务（服务工作者需要）

6. 已使用 fetch 事件处理程序注册了 Service Worker。 例如

   self.addEventListener('fetch', function(event) {})

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

8. 代码被放置在根 JS 文件中加载 service 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()

9. 在 html 页面清单文件中添加

   <link rel="manifest" href="/pwa/manifest.json">

10. 横幅没有更早被解雇（根据迷你信息栏的指南，3 个月内不会出现）。 您可以通过清除 cookie 将其恢复。

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

Answer 3

有什么方法可以从桌面打开已经安装的 PWA。

Answer 4

试试下面的代码..

let btnAdd = document.querySelector(".btnAdd"); // .btnAdd maybe id or class

应用于自定义提示按钮

btnAdd.style.display = "block";