ขอแนะนำ Cross-Origin Storage API

Thomas Steiner

เผยแพร่เมื่อ: 10 พฤศจิกายน 2569

เว็บแอปสมัยใหม่มักอาศัยชิ้นงานขนาดใหญ่ เช่น เฟรมเวิร์ก JavaScript, เกมเอนจิน และโมเดล AI แม้ว่าเว็บไซต์จะใช้ชิ้นงานที่เหมือนกัน แต่แต่ละเว็บไซต์ก็ต้องดาวน์โหลดและจัดเก็บสำเนาของชิ้นงานแต่ละรายการของตนเอง

ด้วย Cross-Origin Storage API แบบข้ามต้นทาง ที่เสนอ หรือเรียกสั้นๆ ว่า COS ไคลเอ็นต์จะระบุเนื้อหาที่ต้องการตามแฮช และดึงข้อมูลจาก URL ใดก็ได้เพื่อแชร์ในเว็บไซต์ที่กำหนด (หรือทุกเว็บไซต์) ซึ่งหมายความว่าสามารถแชร์ทรัพยากรที่ทราบและตรงกันข้ามเว็บไซต์ได้ โดยไม่ขึ้นอยู่กับการแสดงเนื้อหา ข้อเสนอนี้มาพร้อมกับข้อดีด้านความปลอดภัยและความท้าทายด้านความปลอดภัย

กรณีการใช้งาน

เราได้เขียนบทความเกี่ยวกับความสำคัญของโมเดลการแคชและการแคชเนื้อหาด้วย Cache Storage API ไว้โดยละเอียด Cross-Origin Storage API มีความสามารถมากกว่านั้น และอาจเป็นประโยชน์เมื่อเว็บไซต์ที่เกี่ยวข้อง (หรืออื่นๆ) หลายเว็บไซต์ต้องการเข้าถึงทรัพยากรเดียวกัน ดังนี้

  • โมเดล AI: โมเดลอย่าง Gemma หรือตัวแปร Llama มีขนาดตั้งแต่ประมาณ 1 กิกะไบต์ไปจนถึงหลายสิบกิกะไบต์ การจัดเก็บและดึงข้อมูลสำเนาเดียวผ่าน COS จะช่วยหลีกเลี่ยงการดาวน์โหลดที่ซ้ำกันจำนวนมาก ซึ่งเป็นแรงจูงใจสำคัญเบื้องหลังข้อเสนอนี้
  • โมดูล Wasm: เฟรมเวิร์กอย่าง Flutter จะส่งไฟล์ Wasm ที่มีการขอหลายล้านครั้งต่อวันจากต้นทางที่แตกต่างกันหลายพันรายการ โดยมีไบต์ที่เหมือนกันเสมอ
  • ไลบรารีและเฟรมเวิร์ก JavaScript ยอดนิยม: การรวมโค้ดของผู้ให้บริการแยกกันและทั้งหมด (เช่น ไลบรารี React ที่สมบูรณ์และไม่มีการทำ Tree Shaking) ช่วยให้แอปหลายแอปแชร์สำเนาที่แคชไว้รายการเดียวผ่าน COS ได้
  • เกมเอนจิน: เกมบนเบราว์เซอร์ที่สร้างบนเอนจินอย่าง Godot หรือ Unity สามารถแชร์รันไทม์ของเอนจินผ่าน COS และดึงเฉพาะเนื้อหาเฉพาะเกมผ่านเครือข่ายได้ พอร์ทัลเกมที่โฮสต์เกมเล่นฆ่าเวลาจำนวนมากจากต้นทางหรือ iframe ที่แตกต่างกันจะได้รับประโยชน์มากที่สุด
  • แบบอักษรบนเว็บขนาดใหญ่: ระบบจะดาวน์โหลดแบบอักษรไอคอน แบบอักษรอีโมจิ และแบบอักษรที่มีการครอบคลุม Unicode ในวงกว้างในหน้าเว็บจำนวนมาก การแชร์ข้อมูลเหล่านี้ผ่าน COS เพียงครั้งเดียวจะช่วยทั้งในด้านประสิทธิภาพและความยั่งยืน
เกม Three.js ที่ไม่เกี่ยวข้องกัน 2 เกม ได้แก่ Descent และ Quake แชร์สำเนาของเครื่องมือผ่าน COS ซึ่งตรวจสอบในเครื่องมือสำหรับนักพัฒนาเว็บ
เกม Three.js ที่ไม่เกี่ยวข้องกัน 2 เกม ได้แก่ Descent (ในแท็บเบื้องหลัง) และ Quake (ในแท็บเบื้องหน้า) แชร์สำเนาของเครื่องมือผ่าน COS ซึ่งตรวจสอบในเครื่องมือสำหรับนักพัฒนาเว็บ ภาพหน้าจอนี้มาจาก Chromium เวอร์ชันทดลอง และอาจไม่แสดงการออกแบบขั้นสุดท้าย

ขั้นตอนพื้นฐานในการทำงานกับ COS

COS API มีเมธอด navigator.crossOriginStorage.getFileHandle() ซึ่งเว็บแอปใช้จัดเก็บและดึงข้อมูลไฟล์ข้ามขอบเขตต้นทาง โดยระบุด้วยแฮชแบบเข้ารหัส คำอธิบายมีตัวอย่างที่แสดงขั้นตอนพื้นฐานในการทำงานกับ API

ลองใช้งานได้แล้ววันนี้

คุณทดลองใช้ COS ได้ 2 วิธีดังนี้

  • ติดตั้งส่วนขยายเบราว์เซอร์จาก Chrome เว็บสโตร์, ส่วนเสริมของ Firefox หรือ Safari App Store เพื่อใช้ Polyfill กับ API Surface และการผสานรวมทั้งหมด คุณทดสอบขั้นตอนของ API ในเบราว์เซอร์ใดก็ได้ หรือโหลดส่วนขยายที่คลายแพ็กเกจแล้วจากซอร์สโค้ด
  • การทดสอบใน Chromium: มีการใช้งาน Chromium เวอร์ชันทดลอง ดาวน์โหลดสำหรับ macOS บน Apple Silicon หรือ Linux x86_64 จาก goo.gle/cos-chromium จากนั้นเปิด about://flags ค้นหา "Cross-Origin Storage" ตั้งค่าเป็นเปิดใช้ และรีสตาร์ทเมื่อได้รับข้อความแจ้ง บิลด์นี้มีการผสานรวมเครื่องมือสำหรับนักพัฒนาเว็บ: ค้นหาพื้นที่เก็บข้อมูลแบบข้ามต้นทางในแท็บแอปพลิเคชัน

ความสนใจในระบบนิเวศ

COS เป็นข้อเสนอในระยะเริ่มต้น และหลายโปรเจ็กต์ได้จัดส่งการสนับสนุนเวอร์ชันทดลองแล้ว โดยปกติจะอยู่หลังแฟล็กการเลือกใช้และแบ่งชั้นเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ดังนี้

  • Emscripten จะแชร์เอาต์พุต Wasm ที่สร้างขึ้น
  • Flutter แชร์รันไทม์ Skia Wasm
  • Transformers.js แชร์น้ำหนักโมเดลและรันไทม์ Wasm ที่ใช้
  • WebLLM แชร์โมเดลและรันไทม์
  • wllama แชร์โมเดล AI
  • Nuxt.js โหลดทรัพยากร Dependency ที่แชร์จากพื้นที่เก็บข้อมูลแบบข้ามต้นทางและดูแลรักษาปลั๊กอิน Vite COS
  • Prompt API Polyfill แชร์โมเดล AI ในแบ็กเอนด์ WebLLM และ Transformers.js
  • Prebid.js มีการกระจาย CDN ที่พร้อมใช้งาน COS ของไลบรารีการเสนอราคาส่วนหัว

การกำหนดมาตรฐาน

พื้นที่เก็บข้อมูลแบบข้ามต้นทางเป็นข้อเสนอ WICG ในระยะเริ่มต้น คุณสามารถอ่านการตรวจสอบการออกแบบ TAG ของ W3C ในช่วงแรกได้

เรายินดีรับฟังความคิดเห็นเกี่ยวกับ API และข้อเสนอนี้ คุณสามารถรายงานปัญหา แสดงการสนับสนุน หรือเปิด Pull Request ในที่เก็บข้อมูลแบบข้ามต้นทางได้

แหล่งข้อมูล

นอกจากนี้ โปรดดูเครื่องมือและการสาธิตต่อไปนี้

การอ่านข้อมูลเบื้องหลังเพิ่มเติม

การพูดคุยและพอดแคสต์