如何对 Web Push 进行特征检测？答案

【问题标题】：How to do feature detection for Web Push?如何对 Web Push 进行特征检测？
【发布时间】：2016-12-19 03:36:52
【问题描述】：

是否有任何简单的方法可以在浏览器（桌面和移动）中检测 Web Push API

【问题讨论】：

标签： javascript service-worker web-push push-api

【解决方案1】：

某些浏览器版本仅支持 service worker，但不支持 Push API。

建议您尝试检测 Push API 本身。

如果您需要以同步方式（即无需等待 Promise）检查浏览器支持，您可以使用这个（复制自Pushpad SDK）：

function isPushApiSupported() {
  return 'PushManager' in window;
}

【讨论】：

有趣的是，我不知道有些浏览器不支持 Push API 但支持 Service Worker！它们是哪些？
Firefox for mobile 支持 serviceworker 但不支持 Push API
这项检查在 Service Worker 中不起作用，因为窗口对象根本不可用。
@Marco 还有 Safari 12

【解决方案2】：

目前，任何支持 Service Worker 的浏览器也都支持 Web Push。

所以只需检查navigator 是否有serviceWorker 属性。

如果您担心将来某些浏览器可能会在 Web Push 之前开始支持 Service Worker，那么这样的事情会起作用：

navigator.serviceWorker.getRegistration()
.then(function(registration) {
  if (registration.pushManager) {
    // Web Push supported.
  } else {
    // Web Push not supported.
  }
});

【讨论】：

registration 是 null 如果服务工作者没有控制当前页面。
在我看来这将是最好的解决方案，因为这个检查也可以在 Service Worker 中完成。接受的答案使用 window 对象，该对象在 Service Worker 中不可用。