解决我的 PWA 在 Safari 上缺少“Web Push”的问题

Question

我正在开发一个需要推送通知的 PWA。遗憾的是 IOS/Safari目前不支持https://w3c.github.io/push-api/#pushmanager-interface ，所以我想我可能必须以某种方式包装一个本机应用程序。

在 Android 中（在“受信任的 Web 活动”出现之前），您可以使用 WebView 基本上在您的应用程序中显示无头 Chrome 视图。IOS 中的等效项是什么以及推送通知和 Webapp 之间的交互（浏览器需要跳转到特定页面）如何工作？

我还需要的一件事是与我们公司的移动设备管理（即 Microsoft Intune）集成。过去在 Android 中集成了 MDM，我知道这可能是一个主要的痛苦，所以我正在考虑自己构建包装器，以获得最大的灵活性。另一种选择是类似 Ionic 的东西，现在不确定。

Answer 1

这可能不一定适合您的情况，但我在 Safari 的 PWA 中遇到了完全相同的问题，我通过使用长轮询解决了它。它将允许您绕过 Safari 的所有限制，并且我能够在我们的 SPA 中重定向和加载部分。

async function subscribe() {
  let response = await fetch("/subscribe");

  if (response.status == 502) {
    // Status 502 is a connection timeout error,
    // may happen when the connection was pending for too long,
    // and the remote server or a proxy closed it
    // let's reconnect
    await subscribe();
  } else if (response.status != 200) {
    // An error - let's show it
    showMessage(response.statusText);
    // Reconnect in one second
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
    // Get and show the message
    let message = await response.text();
    showMessage(message);
    // Call subscribe() again to get the next message
    await subscribe();
  }
}

subscribe();

https://javascript.info/long-polling