תחילת העבודה עם Web Bundle

שיתוף אתרים כקובץ יחיד באמצעות Bluetooth והפעלה שלהם במצב אופליין בהקשר של המקור

Yusuke Utsunomiya

Kenji Baheux

אזהרה: ההטמעה הניסיונית של ניווט לחבילות אינטרנט בוצעה הוסר מ-Chrome בפברואר 2023.

קיבוץ אתר מלא כקובץ יחיד והפיכתו לניתן לשיתוף פותח תרחישים חדשים לדוגמה באינטרנט. דמיינו עולם שבו אתם יכולים:

• תוכלו ליצור תוכן משלכם ולהפיץ אותו בכל מיני דרכים, בלי להיות מוגבל לרשת
• שיתוף אפליקציית אינטרנט או קטע תוכן מהאינטרנט עם חברים באמצעות Bluetooth או Wi-Fi ישיר
• לוקחים את האתר להתקן USB או אפילו מארחים אותו ברשת מקומית

Web Bundles API הוא הצעה פורצת דרך שמאפשרת לכם לעשות את כל הפעולות האלה.

תאימות דפדפן

בשלב הזה, Web Bundles API נתמך רק בדפדפנים המבוססים על Chromium דגל של ניסוי.

חדש: Web Bundles API

Web Bundle הוא פורמט קובץ ליצירת מכסה של משאב HTTP אחד או יותר קובץ יחיד. הוא יכול לכלול קובץ HTML אחד או יותר, קובצי JavaScript, תמונות או גיליונות סגנונות.

Web Bundles, שנקראות גם Bundled HTTP Exchanges, הן חלק מWeb Packaging בהצעה חדשה.

איך חבילות אינטרנט פועלות

משאבי HTTP בחבילת Web Bundle נוספים לאינדקס לפי כתובות URL של בקשה, ויכולים (אופציונלי) מגיעים עם חתימות שמאשרות את קבלת המשאבים. החתימות מאפשרות לדפדפנים להבין ולאמת את המקור של כל משאב, ומתייחסת לכל אחד מהם כאל מהמקור האמיתי שלו. היא דומה ל-Signature HTTP Exchanges, מאפיין של חתימה על משאב HTTP יחיד מטופל.

במאמר הזה נסביר מהי חבילת Web Bundle ואיך להשתמש בה.

הסבר על חבילות אינטרנט

ליתר דיוק, קובץ Web Bundle הוא קובץ CBOR עם סיומת .wbn (לפי מוסכמה) חבילות משאבי HTTP בפורמט בינארי, ומוצגת עם ה-MIME של application/webbundle מהסוג הזה. אפשר לקרוא מידע נוסף על הנושא הזה במבנה ברמה העליונה. בטיוטת המפרט.

לחבילות Web Bundle יש כמה תכונות ייחודיות:

• כולל דפים מרובים, וכך מאפשר קיבוץ של אתר שלם בקובץ יחיד
• מפעיל JavaScript להפעלה, בשונה מ-MHTML
• עושה שימוש בוריאציות HTTP כדי לעשות משא ומתן על תוכן, שמאפשר לבינלאומיות באמצעות Accept-Language גם אם החבילה נמצאת בשימוש במצב אופליין
• נטען בהקשר של המקור שלה, כשהוא חתום באופן קריפטוגרפי על ידי בעל התוכן הדיגיטלי
• נטען כמעט מיד כשמגישים אותו באופן מקומי

התכונות האלה פותחות מספר תרחישים. אחד התרחישים הנפוצים הוא היכולת לבנות אפליקציית אינטרנט עצמאית שקל לשתף ולהשתמש בה ללא חיבור לאינטרנט. לדוגמה, נניח שאתם בטיסה מטוקיו לסן פרנסיסקו עם לחבר שלכם. אתם לא אוהבים את הבידור בזמן טיסה. החבר שלך משחק מעניין משחק אינטרנט שנקרא PROXX, ומודיע שהוא הורידו את המשחק בתור אתר מצרפים את החבילה לפני העלייה למטוס. הוא פועל אופליין בצורה חלקה. לפני האינטרנט חבילות, הסיפור יסתיים שם ויהיה עליכם לעבור תורות לשחק במשחק במכשיר של חבר, או למצוא משהו אחר להעביר בזמן האימון. אבל באמצעות חבילות אינטרנט, תוכלו עכשיו לבצע את הפעולות הבאות:

1. מבקשים מחברה שלך לשתף את קובץ המשחק ב-.wbn. לדוגמה, הקובץ שניתן לשתף אותו בקלות מקצה לקצה באמצעות אפליקציה לשיתוף קבצים.
2. פותחים את הקובץ .wbn בדפדפן שתומך בקובצי Web Bundle.
3. מתחילים לשחק במשחק במכשיר שלך ומנסים לשבור את השיא של החבר/ה דירוג.

הנה סרטון שמסביר את התרחיש הזה.

כמו שאפשר לראות, קובץ Web Bundle יכול לכלול כל משאב ולכן הוא יכול לפעול במצב אופליין ונטענות מיד.

הערה: בשלב זה, Chrome 80 תומך רק בחבילות לא חתומות (כלומר, Web Bundles ללא חתימות מקור). צירוף PROXX ללא חתימות לא עובד עקב בעיות של עובדי אינטרנט בין מקורות. הצוות של Chrome עובד על פתרון לבעיה. לחשבון בינתיים, אפשר לעיין במאמר התמודדות עם בעיות נפוצות במצב 'לא חתומים' חבילות כדי ללמוד איך להימנע מבעיות ממקורות שונים.

בניית חבילות אינטרנט

בשלב הזה, הכלי go/bundle CLI הדרך הקלה ביותר לחבר אתר. 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. כדי ליצור קובץ .wbn משתמשים בפקודה gen-bundle.

   gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
   

מעולה! TodoMVC הוא עכשיו Web Bundle.

יש עוד אפשרויות לקיבוץ ועוד בקרוב. ממשק ה-CLI של go/bundle מאפשר ליצור חבילת אינטרנט באמצעות קובץ HAR או רשימת משאבים מותאמת אישית כתובות URL. מידע נוסף זמין במאגר GitHub לגבי go/bundle. תוכלו גם לנסות את מודול Node.js הניסיוני ליצירת קיבוץ, wbn לתשומת ליבך, wbn עדיין בשלבי פיתוח מוקדמים של ופיתוח.

משחקים עם חבילות אינטרנט

כדי לנסות חבילת Web Bundle:

1. כדי לבדוק איזו גרסת Chrome פועלת, צריך לעבור אל about://version. אם במכשיר פועלת הגרסה בגרסה 80 ומעלה, אפשר לדלג על השלב הבא.
2. אם לא משתמשים ב-Chrome 80, מומלץ להוריד את Chrome Canary או מאוחר יותר.
3. פתיחת about://flags/#web-bundles.

4. מגדירים את הדגל Web Bundles למצב Enabled.

   

   הפעלת חבילות אינטרנט ב-about://flags

5. מפעילים מחדש את Chrome.

6. במחשב שולחני, גוררים ומשחררים את הקובץ todomvc.wbn ב-Chrome, או מקישים עליו בקובץ אפליקציית הניהול אם משתמשים ב-Android.

הכול עובד כמו שצריך.

הטמעת Preact של TodoMVC עבודה במצב אופליין כחבילת אינטרנט

אפשר גם לנסות חבילות אינטרנט אחרות לדוגמה:

• web.dev.wbn הוא תמונת מצב של כל האתר web.dev, נכון ל-15 באוקטובר 2019.
• proxx.wbn: PROXX הוא שכפול של שולה המוקשים שפועל אופליין.
• squoosh.wbn: Squoosh הוא כלי מהיר ונוח לאופטימיזציה של תמונות, מאפשרת לבצע השוואות בין פורמטים שונים של דחיסת תמונות, זה לצד זה, עם תמיכה שינוי הגודל והפורמט של ההמרות.

הערה: בשלב הזה אפשר לנווט רק אל קובץ Web Bundle ששמור בקובץ מקומי, אבל זו הגבלה זמנית בלבד.

שליחת משוב

ההטמעה של Web Bundle API ב-Chrome היא ניסיונית ולא הושלמה. לא הכול עובד וייתכן שהוא ייכשל או יקרוס. זאת הסיבה מאחורי דגל ניסוי. עם זאת, ה-API מוכן מספיק כדי לאפשר לך להתנסות בו ב-Chrome. משוב ממפתחי אתרים הוא חיוני לתכנון של אנחנו מזמינים אתכם לנסות אותו ולספר לאנשים שעובדים על חבילות אינטרנט מה דעתכם.

• שליחת משוב כללי אל [e-mail].
• אם יש לך משוב על המפרט, אפשר להיכנס לאתר https://github.com/WICG/webpackage/issues/new כדי להגיש בעיה חדשה בנוגע למפרט, או לשלוח אימייל לכתובת [e-mail].
• אם יתגלו בעיות בהתנהגות של Chrome, אפשר להיכנס לכתובת https://crbug.com/new כדי לדווח על באג ב-Chromium.
• כל הוספת תוכן לדיון על המפרט ולכלים משפיעה על שלום. אם אתם רוצים להשתתף בתוכנית, היכנסו למאגר המפרט.

תודות

אנחנו רוצים להגיד תודה לצוות המהנדסים הנהדר של Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda ו-Jeffrey Yasskin שעבדו הרבה כדי לתרום מפרטי, פיתוח התכונה ב-Canary וסקירת מאמר זה. במהלך תהליך הסטנדרטיזציה של דן יורק עזר לנו להתמודד עם הדיון של IETF וגם דייב קרמר הפכו הוא משאב מצוין למה שבעלי אתרים צריכים בפועל. כמו כן, אנחנו רוצים להודות לג'ייסון מילר על טרום-מעשה ה-todomvc המדהים מאמצים בלתי מנוצחים לשיפור המסגרת.