Question

我为我的静态站点实施了PWA。服务人员成功注册，我的页面也可以按预期脱机工作，但真正的问题在于添加到主屏幕

我在 manifest.json 中添加了适当的图标，但仍然看不到弹出的添加主屏幕，并且试图将“添加到主屏幕”从受检查的位置推入时，我只能看到弹出

这是我的网站网址：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"
  }
 ]
}

并尝试以下代码弹出横幅根据Google的建议

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

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

Answer 1

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

灯塔审核工具可作为Chrome开发者工具中的标签或作为Chrome扩展程序使用。
该扩展程序通常具有更多最新功能。

一旦看到该消息，就可以在Chrome桌面和Android（Chrome和Edge）上测试自动弹出消息
要注意的重要事项
第一次看到它后，要再次看到弹出窗口，您可能需要完全清除浏览器缓存，并
边缘-删除快捷方式
Chrome桌面-在此处卸载应用：chrome：// apps /
Crome Android-卸载应用程序中的WebApk

一旦您知道自动A2HS弹出窗口可以工作，则可以（如果需要）拦截自动弹出窗口，以使其对您的用户不那么令人讨厌。向他们显示一个按钮，让他们知道在方便时可以使用A2HS。
如此处所述
https://developers.google.com/web/fundamentals/app-install-banners/

这里是my tester for A2HS。
您将看到按钮显示，而不是自动弹出窗口。

Answer 2

所有准则均在以下位置提供： https://developers.google.com/web/fundamentals/app-install-banners/

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

该网络应用尚未安装。
添加服务工作者和清单文件。服务工作者应该位于start_url在其范围内的目录中。

（例如'/ public / home'的范围为'/'或'/ public /'）

。

在manifest.json中，prefer_related_applications未设置为true
manifest.json包括：
- 短名称或名字
- 图标必须包含192px和512px大小的图标，
- start_url，
- 显示必须是全屏，独立或最小用户界面之一
通过HTTPS服务（服务工作者必需）
已使用获取事件处理程序注册了服务工作者。例如

self.addEventListener('fetch', function(event) {})
当前，用户与该域进行了至少30次互动秒
放置代码以将服务工作者加载到JS根文件中。

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页面清单文件中添加了

<link rel="manifest" href="/pwa/manifest.json">
横幅未提前解雇（根据mini-info-bar的指南，该横幅将在3个月内不会出现）。您可以通过清除Cookie来将其恢复。
对于iOS设备，需要提供根据Safari Web Content Guide在html页面中设置的图标：目前，仅Safari浏览器支持“添加到主屏幕”。您可以通过单击共享图标找到它。

Answer 3

尝试下面的代码。

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

应用于自定义提示按钮

btnAdd.style.display = "block";

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

3 个答案: