แชร์เว็บไซต์เป็นไฟล์เดียวผ่านบลูทูธและเรียกใช้แบบออฟไลน์ในบริบทของต้นทาง
รวมเว็บไซต์แบบเต็มเป็นไฟล์เดียวและทำให้แชร์ได้ จะเปิด 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 เป็นส่วนหนึ่งของเว็บแพ็กเกจ
![ภาพที่แสดงให้เห็นว่า Web Bundle คือชุดทรัพยากรบนเว็บ](https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=5&hl=th)
ทรัพยากร 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 คุณจะทำสิ่งต่อไปนี้ได้
- ขอให้เพื่อนแชร์ไฟล์
.wbn
ของเกม เช่น ไฟล์ สามารถแชร์โดยตรงระหว่างเครื่องผู้ใช้ได้ง่ายๆ โดยใช้แอปการแชร์ไฟล์ - เปิดไฟล์
.wbn
ในเบราว์เซอร์ที่รองรับ Web Bundle - เริ่มเล่นเกมในอุปกรณ์ของคุณเองแล้วลองทำลายสถิติกับเพื่อนๆ คุณภาพ
นี่คือวิดีโอที่อธิบายสถานการณ์นี้
จะเห็นได้ว่า Web Bundle สามารถประกอบด้วยทรัพยากรทั้งหมด ทำให้ใช้งานแบบออฟไลน์ได้ และโหลดได้ทันที
การสร้าง Web Bundle
ปัจจุบัน CLI ของ go/bundle
คือ
วิธีที่ง่ายที่สุดในการรวมกลุ่มเว็บไซต์ go/bundle
เป็นการใช้งานอ้างอิงของ Web Bundle
ข้อกำหนดเฉพาะของ Go
- ติดตั้ง Go
ติดตั้ง
go/bundle
go get -u github.com/WICG/webpackage/go/bundle/cmd/...
โคลนที่เก็บ preact-todomvc และสร้าง เว็บแอปเพื่อเตรียมพร้อมรวมกลุ่มทรัพยากร
git clone https://github.com/developit/preact-todomvc.git cd preact-todomvc npm i npm run build
ใช้คำสั่ง
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
- ไปที่
about://version
เพื่อดูว่าคุณใช้ Chrome เวอร์ชันใดอยู่ หากคุณกำลังใช้เวอร์ชัน 80 ขึ้นไป ให้ข้ามขั้นตอนถัดไป - ดาวน์โหลด Chrome Canary หากไม่ได้ใช้ Chrome 80 หรือรุ่นที่ใหม่กว่า
- เปิด
about://flags/#web-bundles
ตั้งค่าแฟล็กเว็บ Bundle เป็นเปิดใช้
วันที่ กำลังเปิดใช้ Web Bundle ใน about://flags
เปิด Chrome อีกครั้ง
ลากและวางไฟล์
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 สำหรับขั้นตอนการสร้างภูมิคุ้มกันทางความคิดที่ดีและ ในการปรับปรุงเฟรมเวิร์กให้ดีขึ้น