เริ่มต้นใช้งานเว็บ 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, รูปภาพ หรือสไตล์ชีตอย่างน้อย 1 ไฟล์

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
• เรายินดีรับฟังความคิดเห็นเกี่ยวกับการพูดคุยเกี่ยวกับข้อกำหนดและเครื่องมือ โปรดไปที่ spec repo เพื่อมีส่วนร่วม

การขอบคุณ

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