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

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

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

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

ה-Web Bundles API הוא הצעה מתחלפת שמאפשרת לך לעשות את כל זה.

תאימות דפדפן

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

נעים להכיר: Web Bundles API

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

חבילות Web Bundle, המוכרות יותר בשם Bundled HTTP Exchanges, הן חלק מההצעה של Web Pack Bundle.

משאבי HTTP בחבילת אינטרנט נוספים לאינדקס לפי כתובות URL של בקשות, ויכולים לכלול בהם חתימות שערובות למשאבים. חתימות מאפשרות לדפדפנים להבין ולאמת מאיפה הגיע כל משאב, ומתייחסת לכל אחד מהם כאילו הוא מגיע מהמקור האמיתי שלו. השיטה הזו דומה לאופן הטיפול ב-Signed HTTP Exchanges – תכונה לחתימה על משאב HTTP יחיד.

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

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

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

לחבילות אינטרנט יש כמה תכונות ייחודיות:

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

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

1. מבקשים מחבר או חברה לשתף את הקובץ .wbn של המשחק. לדוגמה, אפשר לשתף בקלות את הקובץ מקצה לקצה (P2P) באמצעות אפליקציה לשיתוף קבצים.
2. יש לפתוח את הקובץ .wbn בדפדפן שתומך בקובצי אינטרנט.
3. מתחילים לשחק במשחק במכשיר האישי ומנסים לשבור את השיא של החבר שלכם.

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

כמו שאפשר לראות, חבילת אינטרנט יכולה להכיל את כל המשאבים, וכך היא תפעל במצב אופליין ותיטען באופן מיידי.

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

CLI go/bundle הוא הדרך הקלה ביותר לקבץ אתר בשלב זה. go/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 הוא עכשיו חבילת אינטרנט.

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

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

כדי לנסות חבילת אינטרנט:

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

4. מגדירים את התכונה הניסיונית Web Bundles כמופעלת.

   

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

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

הכול עובד כמו קסם.

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

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

שליחת משוב

ההטמעה של Web Bundle API ב-Chrome היא ניסיונית וחלקה. לא הכול עובד ועלול להיכשל או לקרוס. זו הסיבה לכך שהיא נמצאת מאחורי דגל של ניסוי. אבל ה-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, קוניהיקו סקאמוטו, צויושי הורו, טקאשי טויושימה, קינוקו יאסודה וג'פרי יאסקין שעבדו קשה ותרמו למפרט, יצרו את התכונה בכלי Canary ועיינו במאמר הזה. במהלך תהליך התקינה, Dan York עזר לנהל את הדיון ב-IETF, ו-דייב קרמר היה משאב מעולה על מה שבעלי תוכן דיגיטלי צריכים בפועל. אנחנו רוצים גם להודות לג'ייסון מילר על ה-Preact-todomvc המדהים ועל המאמץ הבלתי נח שלו לשפר את המסגרת.