עדכון

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

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

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

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

עדכון נתונים

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

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

  • סנכרון ברקע: שומר בקשות שנכשלו ומנסה אותן שוב באמצעות סנכרון מה-Service Worker.
  • סנכרון רקע תקופתי באינטרנט: סנכרון נתונים מדי פעם ברקע, בזמנים מסוימים, כדי לאפשר לאפליקציה לספק נתונים מעודכנים גם אם המשתמש עדיין לא פתח את האפליקציה.
  • אחזור ברקע: הורדת קבצים גדולים, גם כשאפליקציית ה-PWA סגורה.
  • דחיפת אינטרנט: שליחת הודעה מהשרת שמוציאה את קובץ השירות ממצב שינה, ומיידעת את המשתמש. השיטה הזו נקראת בדרך כלל 'התראות'. ל-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 החדש יהיה במצב בהמתנה כפי שמתואר בפרק Service Worker. ההתקנה החדשה תפעיל את האירוע install עבור ה-Service Worker החדש. אם אתם שומרים נכסים במטמון ב-event handler, גם הנכסים יישמרו מחדש.

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

כדי לזהות ש-Service Worker חדש מוכן ומותקן, אנחנו משתמשים באירוע updatefound מרישום ה-Service Worker. האירוע הזה מופעל כשה-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 החדש להשתלט על לקוחות ישנים שייתכן שלא תואמים לגרסה החדשה.

למרות שלא מומלץ לעשות זאת, ה-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 ליצירת התראה במערכת ההפעלה. יהיה עליך לבקש הרשאה בדחיפת הודעות אינטרנט כדי להשתמש בה, גם אם אינך משתמש בפרוטוקול העברת הודעות 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();

משאבים