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

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

Yusuke Utsunomiya

Kenji Baheux

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

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

Web Bundles API הוא הצעה חדשנית שמאפשרת לעשות את כל זה.

תאימות דפדפן

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

חדש: Web Bundles API

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

חבילות אינטרנט, שנקראות באופן רשמי Bundled HTTP Exchanges, הן חלק מהצעה לאריזת קבצים לאינטרנט.

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

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

הסבר על Web Bundles

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

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

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

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

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

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

כפי שאפשר לראות, חבילת ה-Web Bundle יכולה להכיל כל משאב, כך שהיא תפעל אופליין ותיטען באופן מיידי.

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

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

   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 עדיין נמצא בשלבי פיתוח מוקדמים.

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

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

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

4. מגדירים את הדגל Web Bundles לערך Enabled.

   

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

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

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

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

• web.dev.wbn היא קובץ snapshot של האתר 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, תוכלו לדווח על באג ב-Chromium בכתובת https://crbug.com/new.
• נשמח גם לקבל מכם תגובות לדיון בנושא המפרט וכלים. אם אתם רוצים להשתתף בתוכנית, היכנסו למאגר המפרט.

הוקרות

אנחנו רוצים להודות לצוות המהנדסים הנפלא של Chrome, קוניהיקו סאקאמוטו, צושיהיו הורה, טאקאשי טויושימה, קינקו יאסודה וג'פרי יאסקין, שעבדו קשה על יצירת המפרט, פיתוח התכונה ב-Canary ועריכת המאמר הזה. במהלך תהליך התקינה, דן יורק עזר לנו לנווט בדיון ב-IETF, וגם דייב קרמר היה מקור מצוין למידע על הצרכים של בעלי התוכן הדיגיטלי. בנוסף, אנחנו רוצים להודות לג'ייסון מילר על המאמץ המדהים של טרום-todomvc ועל המאמץ הבלתי מנוצח לשיפור המסגרת.