背景与问题起源

在现代移动应用开发中，Hybrid App模式非常普遍，许多应用会内嵌多个WebView来展示不同功能模块。最近我在开发时遇到了一个典型场景：

1. 用户从列表WebView A 点击进入详情WebView B
2. 在详情页将进行一些操作后，需要实时更新列表WebView A 里的数据， 打开WebView B 的时候WebView A 是没有关闭的
3. A B 是两个独立的 WebView

这本质上就是多个WebView之间的通信问题。经过研究发现，这与浏览器多个Tab页签之间的通信是同样的问题模型。因此我系统调研了各种浏览器环境下的跨Tab通信方案，这些方案同样适用于App内的WebView通信。

完整通信方案总结

1. 基于存储事件的通信（最基础方案）

实现原理：利用localStorage的storage事件

// 发送方
localStorage.setItem('cart_update', JSON.stringify({count: 5}));

// 接收方
window.addEventListener('storage', (event) => {
  if (event.key === 'cart_update') {
    updateCartBadge(JSON.parse(event.newValue).count);
  }
});

优点：

• 兼容性极好（包括低版本浏览器）
• 实现简单

缺点：

• 只能传递字符串数据
• 同源页面修改才会触发
• 当前页修改不会触发自身监听（仅触发其他Tab）

适用场景：简单的数据同步，如用户登录状态、购物车数量等

2. BroadcastChannel API（现代浏览器首选）

实现原理：专门的跨Tab通信API

// 所有Tab页
const channel = new BroadcastChannel('app_channel');

// 发送消息
channel.postMessage({
  type: 'cart_updated',
  count: 5
});

// 接收消息
channel.onmessage = (event) => {
  if (event.data.type === 'cart_updated') {
    updateCartBadge(event.data.count);
  }
};

优点：

• 专为跨上下文通信设计
• 支持复杂对象传输
• API简洁直观

缺点：

• 不兼容IE和早期Edge
• 需要同源策略

适用场景：现代浏览器环境下的复杂通信

3. SharedWorker方案（持久化通信）

实现原理：通过共享Worker中转消息

// worker.js
const connections = [];

self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);
  
  port.onmessage = (e) => {
    connections.forEach(conn => {
      if (conn !== port) conn.postMessage(e.data);
    });
  };
};

// 页面代码
const worker = new SharedWorker('worker.js');
worker.port.onmessage = (e) => {
  // 处理消息
};
worker.port.postMessage({/*数据*/});

优点：

• 适合频繁通信场景
• 可实现状态共享
• 后台持续运行

缺点：

• 实现较复杂
• 需要额外Worker文件

适用场景：需要共享状态或频繁通信的复杂应用

4. Window.postMessage + 窗口引用（父子窗口场景）

实现原理：通过window对象直接通信

// 父窗口打开子窗口
const childWindow = window.open('child.html');

// 父窗口发送消息
childWindow.postMessage('hello', 'https://yourdomain.com');

// 子窗口接收
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://yourdomain.com') return;
  // 处理消息
});

优点：

• 点对点精准通信
• 低延迟

缺点：

• 需要维护窗口引用
• 仅限有关联的窗口间

适用场景：明确父子关系的窗口通信

5. Service Worker中转方案（PWA适用）

实现原理：通过Service Worker广播消息

// Service Worker
self.addEventListener('message', (event) => {
  event.waitUntil(
    self.clients.matchAll().then(clients => {
      clients.forEach(client => {
        client.postMessage(event.data);
      });
    })
  );
});

// 页面发送
navigator.serviceWorker.controller.postMessage({
  type: 'cart_update',
  count: 5
});

// 页面接收
navigator.serviceWorker.addEventListener('message', (event) => {
  // 处理消息
});

优点：

• 支持离线场景
• 可拦截网络请求

缺点：

• 需要支持Service Worker
• 实现复杂度较高

适用场景：PWA应用或需要离线能力的场景

方案对比选型指南

在WebView中的特殊考虑

1. Android WebView配置：

   // 需要启用DOM storage
   webView.getSettings().setDomStorageEnabled(true);
   

2. iOS WKWebView注意：

   // 需要配置允许跨窗口通信
   let config = WKWebViewConfiguration()
   config.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
   

3. 性能优化：移动端WebView通信应考虑节流，避免频繁通信影响性能

最终建议

1. 简单场景：优先使用storage事件方案，兼容性最好
2. 现代浏览器：使用BroadcastChannel，API最简洁
3. 复杂应用：考虑SharedWorker或Service Worker方案
4. 父子窗口：直接使用postMessage效率最高

在实际App的WebView实现中，建议封装统一的通信模块，根据运行环境自动选择最优方案，并做好降级处理，这对于提升Hybrid App的用户体验至关重要。