Cross-Tab & Files

ประสานงานข้ามแท็บและบันทึกไฟล์

แอปพลิเคชันเว็บสมัยใหม่มักทำงานในหลายแท็บพร้อมกัน เมื่อแท็บหนึ่งอัปเดตข้อมูล แท็บอื่นจะรู้ได้อย่างไร? เมื่อแอปต้องเขียนไฟล์ขนาดใหญ่จะหลีกเลี่ยงการเขียนทับงานของแท็บอื่นได้อย่างไร? โมดูลนี้จะตอบคำถามทั้งสองข้อ

browser มี API สี่ตัวที่ทำงานร่วมกัน:

BroadcastChannel — รับ-ส่งข้อความแบบ publish/subscribe ระหว่างทุกแท็บ (และ worker) บน origin เดียวกัน
storage event — เกิดขึ้นในแท็บอื่นเมื่อมีการเขียน localStorage; กลไกการแจ้งเตือนดั้งเดิมก่อน BroadcastChannel
Web Locks — primitive สำหรับ mutual-exclusion ที่ทำให้การเข้าถึง resource ทำงานเป็น serial ป้องกัน race condition
File System Access / OPFS — อ่านและเขียนไฟล์จริง (หรือ sandbox ส่วนตัวของ origin) ด้วย API แบบ async

วิธีที่แท็บสื่อสารกัน

flowchart LR
  subgraph Origin["Same origin (scheme + host + port)"]
    TabA["Tab A\n(writer)"] -->|postMessage| BC["BroadcastChannel\n'app-updates'"]
    BC -->|onmessage| TabB["Tab B\n(listener)"]
    BC -->|onmessage| TabC["Tab C\n(listener)"]
    TabA -->|setItem| LS[(localStorage)]
    LS -->|storage event| TabB
    LS -->|storage event| TabC
  end

BroadcastChannel และ storage event ส่งข้อความไปยังทุกแท็บอื่นบน origin เดียวกัน

เนื้อหาของโมดูลนี้

บทเรียน	สิ่งที่จะเรียนรู้
หน้านี้	API ทั้งสี่สำหรับ cross-tab และไฟล์ และเวลาที่ควรใช้แต่ละตัว
`broadcastchannel`	`new BroadcastChannel(name)`, `postMessage`, `onmessage`, `close`; เทียบกับ `storage` event
`web-locks`	`navigator.locks.request`, โหมด exclusive กับ shared, `ifAvailable`, `locks.query()`
`cross-tab-state`	รวม BroadcastChannel + localStorage/IndexedDB สำหรับ shared state; leader election ด้วย Web Locks
`file-system-access-opfs`	`showOpenFilePicker` / `showSaveFilePicker` (ต้องใช้ gesture) และ OPFS `navigator.storage.getDirectory()`

เปรียบเทียบด่วน

API	การส่งข้อมูล	ต้อง gesture	ทำงานใน workers	เก็บถาวร
BroadcastChannel	แท็บอื่น	ไม่	ใช่	ไม่
`storage` event	แท็บอื่น	ไม่	ไม่	ไม่
Web Locks	แท็บเดียวกัน	ไม่	ใช่	ไม่
File System Access	—	ใช่ (picker)	ไม่	ใช่
OPFS	—	ไม่	ใช่	ใช่

ตัวอย่างข้อความ cross-tab แรก

โค้ดด้านล่างสร้าง BroadcastChannel แล้ว post และรับข้อความในหน้าเดียวกัน ในแอปจริง sender และ receiver อยู่คนละแท็บ

Browser Storage

// Both sender and receiver use the same channel name.
const ch = new BroadcastChannel('demo:intro');

// Listen for messages (in this demo: same-tab echo)
ch.onmessage = (e) => {
  console.log('Received:', JSON.stringify(e.data));
  ch.close();
};

// Send a message — in another tab this would arrive via onmessage there
ch.postMessage({ type: 'PING', ts: Date.now() });
console.log('Message posted. Waiting for echo...');
// NOTE: cross-tab delivery requires a real second tab open on the same origin.