// 發(fā)送消息的標(biāo)簽頁(yè)
localStorage.setItem('message', JSON.stringify({ 
  type: 'LOGIN_STATUS_CHANGE',
  data: { isLoggedIn: true }
}));

// 接收消息的標(biāo)簽頁(yè)
window.addEventListener('storage', (event) => {
  if (event.key === 'message') {
    const message = JSON.parse(event.newValue);
    console.log('收到消息:', message);
    // 處理消息...
  }
});

// 創(chuàng)建或加入頻道
const channel = new BroadcastChannel('app_channel');

// 發(fā)送消息
channel.postMessage({
  type: 'DATA_UPDATE',
  payload: { /* 數(shù)據(jù) */ }
});

// 接收消息
channel.onmessage = (event) => {
  console.log('收到消息:', event.data);
  // 處理消息...
};

// 關(guān)閉連接
channel.close();

// 父窗口打開(kāi)子窗口
const childWindow = window.open('child.html');

// 父窗口向子窗口發(fā)送消息
childWindow.postMessage('Hello from parent!', '*');

// 子窗口接收消息
window.addEventListener('message', (event) => {
  // 驗(yàn)證來(lái)源
  if (event.origin !== 'https://yourdomain.com') return;
  
  console.log('收到消息:', event.data);
  
  // 回復(fù)消息
  event.source.postMessage('Hello back!', event.origin);
});

// 頁(yè)面代碼
navigator.serviceWorker.controller.postMessage({
  type: 'BROADCAST',
  payload: { /* 數(shù)據(jù) */ }
});

// Service Worker代碼
self.addEventListener('message', (event) => {
  if (event.data.type === 'BROADCAST') {
    self.clients.matchAll().then(clients => {
      clients.forEach(client => {
        client.postMessage(event.data.payload);
      });
    });
  }
});

// 其他頁(yè)面接收
navigator.serviceWorker.addEventListener('message', (event) => {
  console.log('收到廣播:', event.data);
});

// 寫入數(shù)據(jù)
function writeMessage(db, message) {
  const tx = db.transaction('messages', 'readwrite');
  tx.objectStore('messages').put({
    id: Date.now(),
    message
  });
}

// 讀取新消息
function pollMessages(db, lastId, callback) {
  const tx = db.transaction('messages', 'readonly');
  const store = tx.objectStore('messages');
  const index = store.index('id');
  const request = index.openCursor(IDBKeyRange.lowerBound(lastId, true));
  
  request.onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      callback(cursor.value);
      cursor.continue();
    }
  };
}

// 初始化數(shù)據(jù)庫(kù)
const request = indexedDB.open('messaging_db', 1);
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('messages')) {
    const store = db.createObjectStore('messages', { keyPath: 'id' });
    store.createIndex('id', 'id', { unique: true });
  }
};

// 登錄成功后
localStorage.setItem('auth', JSON.stringify({
  isAuthenticated: true,
  user: { name: 'John', token: '...' }
}));

// 所有標(biāo)簽頁(yè)監(jiān)聽(tīng)
window.addEventListener('storage', (event) => {
  if (event.key === 'auth') {
    const auth = JSON.parse(event.newValue);
    if (auth.isAuthenticated) {
      // 更新UI顯示已登錄狀態(tài)
    } else {
      // 更新UI顯示未登錄狀態(tài)
    }
  }
});

// 使用BroadcastChannel
const editChannel = new BroadcastChannel('document_edit');

// 開(kāi)始編輯時(shí)發(fā)送鎖定請(qǐng)求
editChannel.postMessage({
  type: 'LOCK_REQUEST',
  docId: 'doc123',
  userId: 'user456'
});

// 接收鎖定狀態(tài)
editChannel.onmessage = (event) => {
  if (event.data.type === 'LOCK_RESPONSE') {
    if (event.data.docId === currentDocId && !event.data.success) {
      alert('文檔正在被其他標(biāo)簽頁(yè)編輯，請(qǐng)稍后再試');
    }
  }
};

// 使用Service Worker緩存資源
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        // 從緩存返回
        return response;
      }
      
      // 獲取并緩存
      return fetch(event.request).then(res => {
        return caches.open('shared-cache').then(cache => {
          cache.put(event.request, res.clone());
          return res;
        });
      });
    })
  );
});