PWA 开发踩坑：如何解决 iOS 系统上的 Push Notifications 问题？-JavaScript中文网-JavaScript教程资源分享门户

在 PWA 开发中，Push Notifications 是一个非常重要的功能，它可以让用户在应用不在前台的情况下也能接收到重要的消息。然而，在 iOS 系统上，Push Notifications 的实现与其他系统存在较大的差异，开发者需要注意一些细节才能让它正常工作。本文将介绍在 iOS 系统上开发 Push Notifications 时需要注意的问题，并提供解决方案。

问题一：Safari 不支持 Service Workers

在 iOS 系统上，Safari 浏览器不支持 Service Workers，这是 PWA 开发中 Push Notifications 的重要基础。因此，我们需要寻找其他方案来实现 Push Notifications。

解决方案：

使用 Apple 提供的 Push Notification 服务。这需要开发者申请 Apple Developer 账号，并在应用中集成 Apple 的 Push Notification 服务。具体步骤可以参考 Apple 的官方文档。
使用第三方 Push Notification 服务，比如 Firebase。Firebase 提供了完整的 Push Notification 解决方案，包括 iOS 系统的支持。具体步骤可以参考 Firebase 的官方文档。

问题二：iOS 系统上的 Push Notifications 不支持自定义声音

在 iOS 系统上，Push Notifications 的声音是由系统来控制的，开发者无法自定义。这会给用户带来一些不便，因为他们无法辨别不同类型的消息。

解决方案：

在 Push Notifications 中添加更多的信息，比如标题、摘要、图片等，让用户能够更好地理解消息的内容。
在应用中添加自定义声音，让用户可以在应用前台收到消息时听到不同的声音。这需要开发者在应用中预加载声音文件，并在 Push Notifications 到达时播放相应的声音。示例代码如下：

// javascriptcn.com 代码示例
// preload sound file
const audio = new Audio('path/to/sound.mp3');
audio.load();

// handle push notification
self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: data.icon,
    vibrate: [200, 100, 200],
    data: {
      url: data.url
    }
  };
  // play sound
  audio.play();
  event.waitUntil(self.registration.showNotification(data.title, options));
});

问题三：iOS 系统上的 Push Notifications 不支持图片

在 iOS 系统上，Push Notifications 不支持图片，这会影响用户对消息的理解和感受。

解决方案：

在 Push Notifications 中添加更多的信息，比如标题、摘要、链接等，让用户能够更好地理解消息的内容。
在应用中使用类似于 In-App Messaging 的方式，让用户在应用内查看消息，并显示图片。这需要开发者在应用中集成相应的组件，并在 Push Notifications 到达时跳转到对应的页面。示例代码如下：

// javascriptcn.com 代码示例
// handle push notification
self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: data.icon,
    vibrate: [200, 100, 200],
    data: {
      url: data.url
    }
  };
  event.waitUntil(self.registration.showNotification(data.title, options));
});

// handle notification click
self.addEventListener('notificationclick', event => {
  event.notification.close();
  const url = event.notification.data.url;
  event.waitUntil(clients.matchAll({
    type: 'window'
  }).then(windowClients => {
    for (let i = 0; i < windowClients.length; i++) {
      const client = windowClients[i];
      if (client.url === url && 'focus' in client) {
        return client.focus();
      }
    }
    if (clients.openWindow) {
      return clients.openWindow(url);
    }
  }));
});

总结

在 iOS 系统上开发 Push Notifications 是 PWA 开发中的一个重要挑战。我们需要寻找其他方案来实现 Push Notifications，并在实现过程中注意一些细节，比如添加更多的信息、使用自定义声音、使用 In-App Messaging 等。这些技巧可以让我们更好地为用户提供 Push Notifications 的服务。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657859a1d2f5e1655d240882