PWA添加到主屏幕没有弹出窗口

Question

PWA添加到主屏幕没有弹出窗口

service-workerprogressive-web-apps

24

我为我的静态网站实现了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');
});

但它显示错误:

Uncaught ReferenceError: btnAdd未定义

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

- Harish Karthick

1

我不知道你代码的其余部分，但错误明确表示你没有一个名为 btnAdd 的元素。要么创建一个按钮并像那样调用变量，要么只是在其他事件中调用 prompt()（我不建议这样做）。 - Agash Thamo.

你并没有使用"both ways"，因为你通过调用e.preventDefault()来阻止Chrome 67及更早版本的默认行为。例如，在你的第一个事件中尝试调用e.prompt()。 - Agash Thamo.

不要误解，我的意思是我两种方法都会用。但在实际开发中，我不会使用那段代码。第二种方法可能只是在一个月前的Chrome 67发布时才被引入，我当时在本地尝试了一下。 - Harish Karthick

1

您的网站存在混合内容。这可能会阻止服务工作者的运行。看起来您的 Google 字体 URL 仍为 HTTP。http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic - Mathias

1

不需要。你需要一个按钮和代码。这是我的A2HS测试器。你会看到按钮显示而不是弹出窗口。Https://a2hs.glitch.me - Mathias

显示剩余12条评论

3个回答

14

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

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

(例如，'/public/home'在'/'或'/public/'的范围内)

在manifest.json中，prefer_related_applications未设置为true
manifest.json包括：
- short_name或name,
- 图标必须包含192px和512px大小的图标，
- start_url，
- 显示必须是以下之一：全屏、独立或最小化界面
使用HTTPS提供（服务工作者所需）
已使用fetch事件处理程序注册了服务工作者。例如:

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浏览器。您可以通过点击共享图标找到它。

- sat20786

1

你是怎么想到需要使用 self.addEventListener('fetch', function(event) {}) 的？我之前已经实现过更全面的 PWA，并阅读了大量相关文档。这是我第一次实现仅具有将应用添加到主屏幕功能的 PWA，文档中只说要包含一个空的 service worker。直到看到你指出即使它什么也不做，fetch 事件处理程序仍然是必要的，我才意识到这一点。非常感谢！ - Andrew Koster

@Andrew Koster 在阅读了这个答案并继续研究后，我发现了这个页面https://developer.chrome.com/blog/improved-pwa-offline-detection/。在“更新的离线检测逻辑”部分中，解释了fetch情况。这是一个新的东西，所以我猜这个答案的作者生活在未来。 - Bruno Tavares

-4

尝试下面的代码...

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

这是应用于自定义提示按钮的代码：

btnAdd.style.display = "block";

- vabi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mathias · Accepted Answer

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

Lighthouse审核工具可作为Chrome dev工具中的一个选项卡或Chrome扩展程序提供。
扩展通常具有更当前的功能。

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

一旦您知道自动A2HS弹出窗口有效，您可以选择截获自动弹出窗口，以使其对用户更不烦人。向他们展示一个按钮，让他们知道可以在方便的时候进行A2HS。
如此描述：
https://developers.google.com/web/fundamentals/app-install-banners/ 这里是我的A2HS测试程序。
您将看到按钮显示，而不是自动弹出窗口。