Chrome Mobile 上的 Service Worker 的 HTML5 通知不起作用

Question

我在我的应用程序中使用 HTML5 桌面通知。但我对 Google Chrome Mobile 有疑问。据我所知，我需要使用 Service Workers 在 Chrome Mobile 上创建一个新的通知，因为浏览器对它们的处理方式不同（HTML5 Notification not working in Mobile Chrome）。我尝试集成以下堆栈溢出问题的示例（以及更多变体），但我无法使其运行。他永远不会到达 serviceWorker 中的 .showNotification 方法。我以前从未与 Service Workers 合作过，所以我不知道我需要做什么才能让他们工作。我需要把这个 sw.js 文件放在项目的某个地方吗？我的应用程序是一个 Java Spring 项目，我不知道我必须把这个 .js 文件放在哪里。我把它放在项目的根目录下，和这段代码的文件所在的目录相同，但没有区别。因此，如果有人可以帮助我，那就太好了。如果需要更多代码或项目结构来回答问题，我可以提供更多。

if (!("Notification" in window)) {
  //
} else if (Notification.permission === "granted") {
  var localUserSettings = new LocalUserSettings(loggedInUser);
  if (localUserSettings.notificationRights == "granted") {
    try {
      var notification = new Notification(s, {
        body: t,
        icon: "/image/" + id,
        lang: "de",
        tag: notificationId
      });
      setTimeout(function () {
        notification.close();
      }, 10000);
    } catch (e) {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').then(function (registration) {
          registration.showNotification(s, {
            body: t,
            icon: "/image/" + id,
            vibrate: [200, 100, 200, 100, 200, 100, 200],
            tag: notificationId
          });
        });
      }
    }
  }
}

谢谢:)

编辑：是的，我正在从安全来源 (https) 运行代码

Answer 1

确保您首先通过在 Notification 对象上调用 requestPermission() 来请求权限，如下所示：

Notification.requestPermission();