עדכון

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

ניתן לעדכן את הפרטים הבאים:

  • נתוני אפליקציה.
  • הנכסים כבר נשמרו במטמון במכשירים.
  • קובץ ה-Service Worker או יחסי התלות שלו.
  • מטא-נתונים של מניפסט.

בואו נסתכל על השיטות המומלצות לכל אחד מהרכיבים האלה.

הנתונים מתעדכנים

כדי לעדכן נתונים, כמו הנתונים שמאוחסנים ב-IndexedDB, אפשר להשתמש בכלים כמו Fetch, WebRTC או WebSockets API. אם האפליקציה תומכת בתכונות שפועלות במצב אופליין, חשוב לעדכן גם את הנתונים שתומכים בתכונות האלה.

בדפדפנים תואמים יש אפשרויות לסנכרון נתונים, לא רק כשהמשתמש פותח את ה-PWA אלא גם ברקע. האפשרויות הן:

  • סנכרון ברקע: שומר בקשות שנכשלו ומנסה אותן שוב באמצעות סנכרון מה-Service Worker.
  • סנכרון תקופתי ברקע של האינטרנט: מסנכרן נתונים מדי פעם ברקע, בזמנים ספציפיים, כדי שהאפליקציה תוכל לספק נתונים מעודכנים גם אם המשתמש עדיין לא פתח את האפליקציה.
  • אחזור ברקע: הורדה של קבצים גדולים, גם כשה-PWA סגור.
  • Webpush (דחיפת אינטרנט): שליחה של הודעה מהשרת שתעיר את ה-Service Worker ותיידע את המשתמש. התופעה הזו נקראת בדרך כלל 'התראות'. ל-API הזה נדרשת הרשאת המשתמש.

כל ממשקי ה-API האלה מופעלים מהקשר של קובץ השירות (service worker). בשלב הזה הם זמינים רק בדפדפנים המבוססים על Chromium, ב-Android ובמערכות ההפעלה של המחשב. כשאתם משתמשים באחד מממשקי ה-API האלה, אתם יכולים להריץ קוד ב-thread של קובץ השירות (service worker), לדוגמה, כדי להוריד נתונים מהשרת ולעדכן את נתוני IndexedDB.

המערכת מעדכנת את הנכסים

עדכון הנכסים כולל שינויים בקבצים שבהם אתם משתמשים כדי לעבד את ממשק האפליקציה, כמו HTML , CSS , JavaScript ותמונות. לדוגמה, שינוי בלוגיקה של האפליקציה, תמונה שנמצאת בחלק מהממשק או בגיליון סגנונות CSS.

עדכון הדפוסים

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

  • עדכון מלא: כל שינוי, אפילו שינוי קל, מפעיל החלפה של כל התוכן ששמור במטמון. דפוס זה מחקה את האופן שבו אפליקציות ספציפיות למכשיר מטפלות בעדכונים, והוא יצרוך רוחב פס גדול יותר וייקח יותר זמן.
  • עדכון נכסים שהשתנו: רק הנכסים שהשתנו מאז העדכון האחרון הוחלפו במטמון. בדרך כלל ההטמעה מוטמעת באמצעות ספרייה כמו Workbox. התהליך כרוך ביצירת רשימה של קבצים שנשמרו במטמון, ייצוג גיבוב (hash) של הקובץ וחותמות זמן. על סמך המידע הזה, ה-Service Worker משווה את הרשימה הזו לנכסים שנשמרו במטמון ומחליט אילו נכסים לעדכן.
  • עדכון של נכסים נפרדים: כל נכס מתעדכן בנפרד כשהוא משתנה. השיטה שלא טופלה בזמן אימות מחדש של האסטרטגיה המתוארת בפרק הצגת המודעות היא דוגמה לעדכון של נכסים בנפרד.

מתי לעדכן

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

  • כאשר ה-Service Worker מתעורר. אין אירוע שצריך להאזין לרגע הזה, אבל הדפדפן יריץ כל קוד בהיקף הגלובלי של ה-Service Worker כשהוא יתעורר.
  • כדי למנוע האטה של טעינת האפליקציה בהקשר של החלון הראשי של ה-PWA, אחרי שהדפדפן טוען את הדף.
  • כשמופעלים אירועי רקע, למשל כשאפליקציית PWA מקבלת התראה או סנכרון ברקע מופעל. לאחר מכן תוכלו לעדכן את המטמון, והמשתמשים שלכם יקבלו את הגרסה החדשה של הנכס בפעם הבאה שהם יפתחו את האפליקציה.

עדכונים בזמן אמת

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

המשמעות של עדכון פעיל היא שברגע שהנכס יעודכן במטמון, ה-PWA תחליף את הנכס בטעינה הנוכחית. מדובר במשימה מורכבת שלא נלמד בקורס הזה. כלים מסוימים שעוזרים ליישם את העדכון הזה הם livereload-js ועדכון נכס CSS CSSStyleSheet.replace().

עדכון של קובץ השירות (service worker)

הדפדפן מפעיל אלגוריתם עדכון כשקובץ השירות (service worker) או יחסי התלות שלו משתנים. הדפדפן מזהה עדכונים באמצעות השוואה של בייט אחר בייט בין הקבצים השמורים במטמון לבין המשאבים שמגיעים מהרשת.

לאחר מכן הדפדפן מנסה להתקין את הגרסה החדשה של ה-Service Worker, וה-Service Worker החדש יהיה במצב בהמתנה, כפי שמתואר בפרק של עובדי שירות. ההתקנה החדשה תריץ את האירוע install עבור קובץ השירות החדש. אם אתם שומרים נכסים במטמון באותו handler של אירועים, גם הנכסים יישמרו מחדש במטמון.

זיהוי שינויים של קובץ שירות (service worker)

כדי לזהות שיש קובץ שירות (service worker) חדש מוכן ומותקן, אנחנו משתמשים באירוע updatefound מהרישום של קובץ השירות (service worker). האירוע הזה מופעל כשההתקנה של קובץ השירות החדש מתחילה. אנחנו צריכים להמתין עד שהמצב שלו ישתנה ל-installed עם האירוע statechange. כדאי לעיין במאמרים הבאים:

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

אילוץ שינוי

ה-Service Worker החדש יותקן אבל ימתין להפעלה כברירת מחדל. ההמתנה מונעת מה-Service Worker החדש להשתלט על לקוחות ישנים שייתכן שאינם תואמים לגרסה החדשה.

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

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

האירוע controllerchange מופעל כאשר קובץ השירות (service worker) ששולט בדף הנוכחי משתנה. לדוגמה, עובד חדש דילג על ההמתנה והפך לעובד הפעיל החדש.

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

עדכון מטא-נתונים

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

התשובה תלויה בפלטפורמה. נסביר עכשיו על האפשרויות הזמינות.

Safari בדפדפני iOS, iPadOS ו-Android

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

Google Chrome ב-Android עם WebAPK

כשהמשתמש התקין את ה-PWA שלכם ב-Android באמצעות Google Chrome והתכונה WebAPK מופעלת (רוב התקנות ה-PWA של Chrome), המערכת תזהה את העדכון ותחיל אותו על סמך אלגוריתם. פרטים נוספים זמינים במאמר בנושא עדכוני המניפסט.

כמה הערות נוספות לגבי התהליך:

אם המשתמש לא פותח את ה-PWA, ה-WebAPK שלו לא יתעדכן. אם השרת לא מגיב באמצעות קובץ המניפסט (יש שגיאה 404), דפדפן Chrome לא יבדוק אם יש עדכונים במשך לפחות 30 יום, גם אם המשתמש פותח את ה-PWA.

יש לעבור אל about:webapks ב-Chrome ב-Android כדי לראות את סטטוס הסימון 'נדרש עדכון', ולבקש עדכון. בפרק 'כלים וניפוי באגים' אפשר לקרוא מידע נוסף על הכלי הזה לניפוי באגים.

אינטרנט של Samsung ב-Android עם WebAPK

התהליך דומה לגרסת Chrome. במקרה הזה, אם צריך לעדכן את מניפסט ה-PWA, במהלך 24 השעות הבאות ה-WebAPK יעודכן ב-Wi-Fi אחרי שגרסת ה-WebAPK המעודכנת תתבצע.

Google Chrome ו-Microsoft Edge במחשב

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

כשהנכסים שנבחרו יעודכנו, יופעל עדכון אחרי שכל החלונות ייסגרו.

שליחת התראה למשתמש

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

יש כמה דרכים ליידע את המשתמש:

  • יש להשתמש ב-DOM או ב-canvas API כדי לעבד הודעה במסך.
  • משתמשים ב-Web Notifications API. ה-API הזה הוא חלק מהרשאת Push ליצירת התראה במערכת ההפעלה. צריך לבקש הרשאה ל-Web Push כדי להשתמש בתכונה, גם אם אתם לא משתמשים בפרוטוקול העברת ההודעות מהשרת. זו האפשרות היחידה שיש לנו אם ה-PWA לא נפתח.
  • משתמשים ב-Badging API כדי להראות שיש עדכונים זמינים בסמל של PWA שהותקן.

התראת עדכון מוצגת ב-DOM..

מידע נוסף על Badging API

Badging API מאפשר לכם לסמן את סמל ה-PWA באמצעות מספר תג או נקודת תג בדפדפנים תואמים. נקודת תג היא סימן קטן בתוך הסמל המותקן, שמבטא משהו שממתין בתוך האפליקציה.

דוגמה ל-Twitter עם שמונה התראות ואפליקציה נוספת שמציגה תג של סוג דגל.

כדי להגדיר מספר תג, צריך לקרוא לפונקציה setAppBadge(count) באובייקט navigator. ניתן לעשות זאת מההקשר של החלון או של קובץ השירות (service worker) כשיש עדכון שמיועד להתריע למשתמש.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

כדי להסיר את התג, צריך לבצע קריאה ל-clearAppBadge() על אותו אובייקט:

navigator.clearAppBadge();

משאבים