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

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

Yusuke Utsunomiya

Kenji Baheux

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

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

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

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

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

ขอแนะนำ Web Bundles API

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

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

วันที่

ทรัพยากร 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 Bundles คุณจะทำสิ่งต่อไปนี้ได้

1. ขอให้เพื่อนแชร์ไฟล์ .wbn ของเกม เช่น ไฟล์ สามารถแชร์โดยตรงระหว่างเครื่องผู้ใช้ได้ง่ายๆ โดยใช้แอปการแชร์ไฟล์
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 แล้ว

นอกจากนี้ยังมีตัวเลือกอื่นๆ สำหรับการรวมกลุ่มและอีกมากมายที่กำลังจะตามมา CLI ในgo/bundle ช่วยให้คุณสร้าง 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. ตั้งค่าแฟล็กเว็บ Bundle เป็นเปิดใช้

   วันที่

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

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

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

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

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

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

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