เริ่มต้นใช้งานเว็บ Bundle

แชร์เว็บไซต์เป็นไฟล์เดียวผ่านบลูทูธ และเรียกใช้แบบออฟไลน์ในบริบทของต้นทาง

ยูสุเกะ อุสึโนมิยะ

Twitter หน้าแรก

Kenji Baheux

คำเตือน: การใช้งานการไปยังส่วนต่างๆ ของ Web Bundle รุ่นทดลองถูกนำออกจาก Chrome ในเดือนกุมภาพันธ์ 2023

การรวมเว็บไซต์ทั้งเว็บเป็นไฟล์เดียวและทําให้แชร์ได้ เปิดกรณีการใช้งานใหม่ๆ สําหรับเว็บ ลองนึกถึงโลกที่คุณสามารถทำสิ่งต่อไปนี้

• สร้างเนื้อหาของคุณเองและเผยแพร่ในรูปแบบที่หลากหลาย โดยไม่มีการจำกัดอยู่ในเครือข่าย
• แชร์เว็บแอปหรือเนื้อหาเว็บกับเพื่อนผ่านบลูทูธหรือ Wi-Fi Direct
• พกเว็บไซต์ไว้ใน USB ของคุณเอง หรือแม้แต่โฮสต์เว็บไซต์บนเครือข่าย LAN ของคุณเอง

Web Bundles API เป็นข้อเสนอ Bleeding Edge ที่ให้คุณดำเนินการทั้งหมดนี้ได้เลย

ความเข้ากันได้กับเบราว์เซอร์

ปัจจุบัน Web Bundles API รองรับเฉพาะในเบราว์เซอร์แบบ Chromium เบื้องหลังแฟล็กเวอร์ชันทดลอง

ขอแนะนำ Web Bundles API

Web Bundle คือรูปแบบไฟล์สำหรับการรวมทรัพยากร HTTP อย่างน้อย 1 รายการไว้ในไฟล์เดียว โดยสามารถประกอบด้วยไฟล์ HTML, ไฟล์ JavaScript, รูปภาพ หรือสไตล์ชีตอย่างน้อย 1 ไฟล์

Web Bundle หรือที่รู้จักกันอย่างเป็นทางการว่า Bundled HTTP Exchange เป็นส่วนหนึ่งของข้อเสนอการรวมแพ็กเกจเว็บ

วิธีการทำงานของ Web Bundle

ทรัพยากร HTTP ใน Web Bundle จะได้รับการจัดทำดัชนีตาม URL คำขอ และมาพร้อมกับลายเซ็นที่รับรองทรัพยากรได้ ลายเซ็นช่วยให้เบราว์เซอร์เข้าใจและ ยืนยันว่าแต่ละแหล่งข้อมูลมาจากไหน และถือว่าแต่ละแหล่งข้อมูลนั้นมาจากที่มาที่แท้จริง ซึ่งจะคล้ายกับวิธีจัดการ Signed HTTP Exchange ซึ่งเป็นฟีเจอร์สำหรับการลงนามทรัพยากร HTTP รายการเดียว

บทความนี้จะอธิบายความหมายของ Web Bundle และวิธีใช้

คำอธิบายเกี่ยวกับ Web Bundle

หากจะกล่าวให้ชัดเจนคือ Web Bundle คือไฟล์ CBOR ที่มีส่วนขยาย .wbn (ตามรูปแบบปกติ) ซึ่งแพ็กเกจทรัพยากร HTTP อยู่ในรูปแบบไบนารีและให้บริการด้วยประเภท application/webbundle MIME อ่านข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในส่วนโครงสร้างระดับบนสุดของฉบับร่างของข้อกำหนด

Web Bundle มีฟีเจอร์ที่ไม่ซ้ำกันหลายอย่าง ดังนี้

• ห่อหุ้มหน้าเว็บหลายๆ หน้า ทำให้สามารถรวมเว็บไซต์ที่สมบูรณ์เป็นไฟล์เดียว
• เปิดใช้ JavaScript ที่ดำเนินการได้ ซึ่งต่างจาก MHTML
• ใช้ตัวแปร HTTP เพื่อทำการเจรจาเนื้อหา ซึ่งทำให้เป็นสากลด้วยส่วนหัว Accept-Language ได้แม้ว่าจะใช้แพ็กเกจแบบออฟไลน์ก็ตาม
• โหลดในบริบทของต้นทางเมื่อผู้เผยแพร่โฆษณาลงนามแบบเข้ารหัส
• โหลดได้เกือบจะทันทีเมื่อแสดงในเครื่อง

ฟีเจอร์เหล่านี้จะใช้กับสถานการณ์ต่างๆ ได้มากมาย สถานการณ์หนึ่งที่พบบ่อยคือความสามารถในการสร้างเว็บแอปในตัว ซึ่งสามารถแชร์และใช้งานได้ง่ายโดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต ตัวอย่างเช่น สมมติว่าคุณอยู่บนเครื่องบินจากโตเกียวไปซานฟรานซิสโกกับเพื่อน คุณไม่ชอบความบันเทิงบนเครื่องบิน เพื่อนของคุณกำลังเล่นเกมบนเว็บที่น่าสนใจที่ชื่อ PROXX และบอกคุณว่าพวกเขาดาวน์โหลดเกมนี้เป็น Web Bundle ก่อนขึ้นเครื่องบิน สามารถทำงานแบบออฟไลน์ได้อย่างไร้ที่ติ ก่อนที่จะใช้ Web Bundle เรื่องราวจะจบลงที่นั่นและคุณจะต้องผลัดกันเล่นเกมบนอุปกรณ์ของเพื่อน หรือค้นหาอย่างอื่นเพื่อฆ่าเวลา แต่เมื่อใช้ Web Bundle คุณจะทำสิ่งต่อไปนี้ได้แล้ว

1. ขอให้เพื่อนแชร์ไฟล์ .wbn ของเกม เช่น ไฟล์อาจแชร์แบบเพียร์ทูเพียร์ได้อย่างง่ายดายโดยใช้แอปแชร์ไฟล์
2. เปิดไฟล์ .wbn ในเบราว์เซอร์ที่รองรับ Web Bundle
3. เริ่มเล่นเกมบนอุปกรณ์ของคุณเองและพยายามเอาชนะคะแนนสูงสุดของเพื่อนคุณ

นี่เป็นวิดีโอที่อธิบายสถานการณ์นี้

อย่างที่คุณเห็น Web Bundle สามารถมีทรัพยากรทั้งหมดได้ ทำให้ทำงานแบบออฟไลน์และโหลดได้ทันที

หมายเหตุ: ปัจจุบัน Chrome 80 รองรับเฉพาะแพ็กเกจที่ไม่มีการรับรอง (ซึ่งก็คือ Web Bundle ที่ไม่มีลายเซ็นต้นทาง) การรวม PROXX ที่ไม่มีลายเซ็นจะไม่ค่อยได้ผล เนื่องจากปัญหาแบบข้ามต้นทางของ Web Worker Chrome กำลังแก้ไขปัญหานี้ ในระหว่างนี้ โปรดดูการจัดการปัญหาทั่วไปในแพ็กเกจที่ไม่มีการรับรองเพื่อดูวิธีหลีกเลี่ยงปัญหาแบบข้ามต้นทาง

การสร้าง Web Bundle

ปัจจุบัน CLI ของ go/bundle เป็นวิธีที่ง่ายที่สุดในการรวมเว็บไซต์ go/bundle เป็นการใช้งานข้อมูลอ้างอิงของข้อกำหนด Web Bundle ที่สร้างขึ้นใน Go

1. Install Go

2. ติดตั้ง go/bundle

   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
   

3. โคลนที่เก็บ preact-todomvc แล้วสร้างเว็บแอปเพื่อเตรียมพร้อมสำหรับการรวมทรัพยากร

   git clone https://github.com/developit/preact-todomvc.git
   cd preact-todomvc
   npm i
   npm run build
   

4. ใช้คำสั่ง gen-bundle เพื่อสร้างไฟล์ .wbn

   gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
   

ยินดีด้วย TodoMVC เปลี่ยนเป็น Web Bundle แล้ว

เรายังมีตัวเลือกอื่นๆ สำหรับการจัดแพ็กเกจและอื่นๆ อีกมากมายที่กำลังจะตามมา go/bundle CLI ช่วยให้คุณสร้าง Web Bundle โดยใช้ไฟล์ HAR หรือรายการ URL ของทรัพยากรที่กำหนดเอง โปรดไปที่ ที่เก็บ GitHub เพื่อดูข้อมูลเพิ่มเติม เกี่ยวกับ go/bundle นอกจากนี้ คุณยังลองใช้โมดูล Node.js แบบทดลองสำหรับการรวมกลุ่มอีเมลได้ wbn โปรดทราบว่า wbn ยังอยู่ในขั้นแรกของการพัฒนา

ทดลองใช้ Web Bundle

หากต้องการลองใช้ Web Bundle ให้ทำดังนี้

1. ไปที่ about://version เพื่อดูเวอร์ชัน Chrome ที่คุณใช้อยู่ หากคุณใช้เวอร์ชัน 80 ขึ้นไป ให้ข้ามขั้นตอนถัดไป
2. ดาวน์โหลด Chrome Canary หากไม่ได้ใช้ Chrome 80 ขึ้นไป
3. เปิด about://flags/#web-bundles

4. ตั้งค่าสถานะ Web Bundle เป็น Enabled

   

   การเปิดใช้ Web Bundle ใน about://flags

5. เปิด Chrome อีกครั้ง

6. ลากและวางไฟล์ todomvc.wbn ลงใน Chrome หากใช้เดสก์ท็อป หรือแตะไฟล์ในแอปการจัดการไฟล์หากใช้ Android

ทุกอย่างทำงานได้อย่างน่าอัศจรรย์

การติดตั้งใช้งาน Preact ของ TodoMVC ที่ทำงานแบบออฟไลน์เป็น Web Bundle

นอกจากนี้ คุณยังสามารถลองใช้ชุดเว็บอื่นๆ ตัวอย่างได้อีกด้วย

• web.dev.wbn เป็นภาพรวมของเว็บไซต์ web.dev ณ วันที่ 15 ตุลาคม 2019
• proxx.wbn: PROXX คือการโคลน Minesweeper ที่ทำงานแบบออฟไลน์ได้
• squoosh.wbn: Squoosh เป็นเครื่องมือเพิ่มประสิทธิภาพรูปภาพที่ใช้ง่ายและรวดเร็ว โดยให้คุณเปรียบเทียบการบีบอัดรูปภาพรูปแบบต่างๆ ควบคู่กันไป พร้อมรองรับการปรับขนาดและจัดรูปแบบ Conversion

หมายเหตุ: ขณะนี้คุณไปยัง Web Bundle ที่จัดเก็บไว้ในไฟล์ในเครื่องได้เท่านั้น แต่นี่เป็นเพียงข้อจำกัดชั่วคราวเท่านั้น

ส่งความคิดเห็น

การใช้งาน Web Bundle API ใน Chrome ยังอยู่ในขั้นทดลองและยังไม่สมบูรณ์ อุปกรณ์บางส่วนอาจไม่ทํางานและอาจล้มเหลวหรือขัดข้อง จึงอยู่เบื้องหลัง Flag ทดลอง แต่ API ก็พร้อมให้คุณสำรวจใน Chrome มากพอแล้ว ความคิดเห็นจากนักพัฒนาเว็บมีความสำคัญต่อการออกแบบ API ใหม่ๆ ดังนั้น โปรดทดลองใช้และบอกให้ผู้ที่ทำงานบน Web Bundle ทราบว่าคุณคิดอย่างไร

• ส่งความคิดเห็นทั่วไปมาที่ [e-mail]
• หากคุณมีความคิดเห็นเกี่ยวกับข้อกำหนดดังกล่าว โปรดไปที่ https://github.com/WICG/webpackage/issues/new เพื่อแจ้งปัญหาเกี่ยวกับข้อมูลจำเพาะใหม่ หรือส่งอีเมลไปที่ [e-mail]
• หากพบปัญหาใดๆ เกี่ยวกับลักษณะการทำงานของ Chrome ให้ไปที่ https://crbug.com/new เพื่อรายงานข้อบกพร่องของ Chromium
• การร่วมให้ข้อมูลในการพูดคุยและเครื่องมือข้อกำหนดใดๆ ก็ถือเป็นเรื่องที่เราพึงพอใจมาก โปรดไปที่ที่เก็บข้อกำหนดเพื่อมีส่วนร่วม

ข้อความแสดงการยอมรับ

ขอขอบคุณทีมวิศวกร Chrome ผู้ยอดเยี่ยมอย่าง Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda และ Jeffrey Yasskin ซึ่งทำงานอย่างหนักเพื่อจัดทำข้อมูลจำเพาะของ Canary และอ่านบทความนี้ ในระหว่างกระบวนการทำให้เป็นมาตรฐาน Dan York ได้ช่วยให้เข้าไปหารือกับ IETF และ Dave Cramer ก็เป็นแหล่งข้อมูลที่ยอดเยี่ยมที่ผู้เผยแพร่เนื้อหาต้องการอย่างแท้จริง เราอยากจะขอบคุณ Jason Miller สำหรับ preact-todomvc ที่น่าทึ่ง และเขายังพยายามทำให้เฟรมเวิร์กดีขึ้นด้วย