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

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

Yusuke Utsunomiya

Kenji Baheux

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

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

Web Bundles API เป็นข้อเสนอสุดล้ำที่ช่วยให้คุณทำสิ่งเหล่านี้ได้

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

ปัจจุบัน Web Bundles API ใช้งานได้เฉพาะในเบราว์เซอร์ที่พัฒนาบน Chromium โดยใช้ Flag ทดลองเท่านั้น

ขอแนะนํา Web Bundles API

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

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

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

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

คำอธิบาย Web Bundle

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

Web Bundle มีคุณสมบัติที่ไม่ซ้ำกันหลายประการ ดังนี้

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

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

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

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

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

การสร้าง Web Bundle

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

1. ติดตั้ง 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 repo เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ 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. ตั้งค่า Flag Web Bundles เป็นเปิดใช้

   

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

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

ทุกอย่างทำงานได้ดีเยี่ยม

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

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

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

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

• ส่งความคิดเห็นทั่วไปไปที่ webpackage-dev@chromium.org
• หากมีความคิดเห็นเกี่ยวกับข้อกำหนด โปรดไปที่ https://github.com/WICG/webpackage/issues/new เพื่อแจ้งปัญหาเกี่ยวกับข้อกำหนดใหม่ หรือส่งอีเมลไปที่ wpack@ietf.org
• หากพบปัญหาเกี่ยวกับลักษณะการทํางานของ 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 ที่ยอดเยี่ยมและความพยายามอย่างไม่หยุดยั้งของเขาในการทำให้เฟรมเวิร์กนี้ดีขึ้น