אפליקציות Progressive Web App: קובץ שירות (service worker) כולל

1. שלום

במעבדה הזו, תוסיפו תגובה של מסלול סטרימינג לאפליקציית אינטרנט קיימת כדי לשפר את הביצועים. זוהי הסדנה השביעית בסדרת סדנאות קוד שנועדו ללוות את סדנת Progressive Web App. ה-codelab הקודם היה Empowering your PWA. יש עוד Codelab אחד בסדרה הזו.

מה תלמדו

  • הוספת תגובה של סטרימינג ל-service worker

מה חשוב לדעת

  • JavaScript

מה צריך

2. טיפים להגדרה

כדי להתחיל, משכפלים או מורידים את הקוד לתחילת הדרך שנדרש להשלמת ה-Codelab הזה:

אם משכפלים את המאגר, חשוב לוודא שנמצאים בהסתעפות pwa06--service-worker-includes. קובץ ה-ZIP מכיל גם את הקוד של הענף הזה.

בסיס הקוד הזה דורש Node.js בגרסה 14 ומעלה. אחרי שהקוד זמין, מריצים את הפקודה npm ci משורת הפקודה בתיקיית הקוד כדי להתקין את כל התלויות שצריך. לאחר מכן, מריצים את הפקודה npm start כדי להפעיל את שרת הפיתוח של ה-codelab.

קובץ README.md של קוד המקור מספק הסבר לכל הקבצים המופצים. בנוסף, אלה הקבצים הקיימים העיקריים שתעבדו איתם במהלך ה-codelab הזה:

קבצים חשובים

  • ‫js/preview.js – תצוגה מקדימה של קובץ JavaScript של הדף
  • ‫service-worker.js – קובץ service worker של PWA

3. תצוגה מקדימה של סטרימינג

אפשר לחלק את דף התצוגה המקדימה לשלושה חלקים ברורים: head,‏ body שעבר קומפילציה ו-foot. בשלב הזה, התוכן המורכב מוצג בצד הלקוח, אבל אין סיבה שזה יקרה. נעביר אותו אל Service Worker.

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

כדי לעשות זאת, קודם מוחקים את התוכן ב-js/preview.js כדי לוודא שהוא לא מבצע יותר את ההידור. לאחר מכן, ב-service-worker.js, מבצעים את הפעולות הבאות:

  • ייבוא של הייצוא בעל השם strategy מתוך workbox-streams בתור streamsStrategy
  • ייבוא של הייצוא עם השם openDB מ-idb וייבוא של הייצוא עם השם marked מ-marked
  • לפני רישום המסלול לניווטים, מוסיפים רישום מסלול חדש
    • הכלי צריך לבדוק שכתובת ה-URL pathname היא /preview
    • צריך להשתמש בשיטת סטרימינג ש
      1. לתת תשובה עם התוכן של preview/index.html דרך אזור התוכן של התג main
      2. תגיב באמצעות פונקציה שפותחת את settings-store IndexedDB, מקבלת את התוכן ממאגר האובייקטים settings ומחזירה את הגרסה המעובדת של התוכן בפורמט Markdown.
      3. תגי התשובה צריכים להיות main, body ו-html.

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

4. מעולה!

למדתם איך להעביר את אפליקציית האינטרנט למצב אופליין באמצעות service workers ו-Cache Storage API.

ה-codelab הבא בסדרה הוא Working with Workers (עבודה עם Workers).