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

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

Kenji Baheux
Kenji Baheux

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

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

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

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

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

ขอแนะนํา Web Bundles API

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

Web Bundle หรือที่รู้จักกันโดยทั่วไปในชื่อ Bundled HTTP Exchanges เป็นส่วนหนึ่งของข้อเสนอWeb Packaging

รูปภาพแสดงว่า Web Bundle คือคอลเล็กชันแหล่งข้อมูลบนเว็บ
วิธีการทำงานของ Web Bundle

ทรัพยากร 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 ของเกม เช่น แอปนี้สามารถแชร์แบบเพียร์ทูเพียร์ได้อย่างง่ายดายโดยใช้แอปการแชร์ไฟล์
  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 เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ 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 เป็นเปิดใช้

    ภาพหน้าจอของ about://flags
    การเปิดใช้ Web Bundle ใน about://flags
  5. เปิด Chrome อีกครั้ง

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

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

การใช้งาน Preact ของ TodoMVC ที่ทำงานแบบออฟไลน์เป็นแพ็กเกจเว็บ

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

  • 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 ที่ยอดเยี่ยมและความพยายามอย่างไม่หยุดยั้งของเขาในการทำให้เฟรมเวิร์กนี้ดีขึ้น