PWA 中如何跨页面通讯？

PWA（Progressive Web App）是指一种能够像原生应用一样提供类似于离线访问、推送通知等功能的 Web 应用。在 PWA 中，由于是基于 Web 技术实现的，所以页面之间的通讯方式和普通 Web 应用有所不同。本文将介绍在 PWA 中如何跨页面通讯。

PWA 中的页面通讯方式

在 PWA 中，页面之间的通讯方式主要有两种：

1. 使用 Service Worker 中的 postMessage 方法进行通讯。
2. 使用 localStorage 进行通讯。

使用 Service Worker 中的 postMessage 方法进行通讯

Service Worker 是 PWA 中的一个重要概念，它是一个在后台运行的 JavaScript 线程，可以拦截和处理网络请求，实现离线访问、推送通知等功能。Service Worker 中提供了 postMessage 方法，可以实现页面之间的通讯。

例如，在页面 A 中发送消息：

navigator.serviceWorker.controller.postMessage({
  type: 'message',
  data: 'Hello, world!'
});

在页面 B 中接收消息：

navigator.serviceWorker.addEventListener('message', event => {
  if (event.data.type === 'message') {
    console.log(event.data.data); // 输出：Hello, world!
  }
});

使用 localStorage 进行通讯

localStorage 是 Web Storage 中的一种，可以在浏览器端存储数据。在 PWA 中，可以使用 localStorage 实现页面之间的通讯。

例如，在页面 A 中存储数据：

localStorage.setItem('message', 'Hello, world!');

在页面 B 中读取数据：

const message = localStorage.getItem('message');
console.log(message); // 输出：Hello, world!

需要注意的是，localStorage 存储的数据是字符串类型，如果需要存储对象或数组等复杂数据类型，需要使用 JSON.stringify 和 JSON.parse 方法进行转换。

示例代码

以下是一个使用 Service Worker 进行页面通讯的示例代码：

在 Service Worker 中监听 message 事件：

// javascriptcn.com 代码示例
self.addEventListener('message', event => {
  if (event.data.type === 'message') {
    // 向所有客户端发送消息
    self.clients.matchAll().then(clients => {
      clients.forEach(client => {
        client.postMessage({
          type: 'message',
          data: event.data.data
        });
      });
    });
  }
});

在页面 A 中发送消息：

navigator.serviceWorker.controller.postMessage({
  type: 'message',
  data: 'Hello, world!'
});

在页面 B 中接收消息：

navigator.serviceWorker.addEventListener('message', event => {
  if (event.data.type === 'message') {
    console.log(event.data.data); // 输出：Hello, world!
  }
});

总结

在 PWA 中，页面之间的通讯方式有两种：使用 Service Worker 中的 postMessage 方法和使用 localStorage。其中，使用 Service Worker 进行通讯更加灵活，可以实现实时通讯和广播等功能。在实际开发中，需要根据具体需求选择合适的通讯方式。

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