חוויית שימוש עשירה יותר במצב אופליין עם Periodic Background Sync API

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

Jeff Posnick

Joe Medley

האם אי פעם היית במצבים הבאים?

• נסיעה ברכבת או ברכבת תחתית עם חיבור לא יציב או ללא חיבור כלל
• ספק האינטרנט שלכם הגביל את מהירות הגלישה אחרי שצפיתם יותר מדי סרטונים
• אתם גרים במדינה שבה רוחב הפס לא עומד בביקוש

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

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

רוצה לנסות?

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

• אתם משתמשים ב-Chrome מגרסה 80 ואילך.
• מתקינים את אפליקציית האינטרנט לפני שמפעילים סנכרון תקופתי ברקע.

מושגים ושימוש

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

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

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

הגדרה נכונה של התעניינות המשתמשים

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

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

בנוסף, מכיוון ש-Chrome לא רוצה שאפליקציות אינטרנט ישתמשו בהן או שלא ישתמשו בהן בתדירות גבוהה כדי לצרוך סוללה או נתונים בתדירות נמוכה, Chrome תכנן סנכרון תקופתי ברקע כך שהמפתחים יצטרכו לספק ערך למשתמשים כדי להרוויח אותו. באופן ספציפי, Chrome משתמש בדירוג ההתעניינות באתר (about://site-engagement/) כדי לקבוע אם סנכרון תקופתי ברקע יכול להתרחש באפליקציית אינטרנט מסוימת, ואם כן, באיזו תדירות. במילים אחרות, אירוע periodicsync לא יופעל בכלל אלא אם דירוג ההתעניינות גבוה מאפס, והערך שלו משפיע על התדירות שבה אירוע periodicsync יופעל. כך תוכלו לוודא שרק האפליקציות שבהן אתם משתמשים באופן פעיל יסונכרנו ברקע.

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

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

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

מתי אפשר להשתמש בה?

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

• ציון ספציפי של התעניינות משתמשים.
• נוכחות של רשת שנעשה בה שימוש בעבר.

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

מתי כדאי להשתמש בה?

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

• Network Information API
• זיהוי מצב חיסכון בחבילת הגלישה
• חישוב נפח האחסון הזמין

הרשאות

אחרי התקנת ה-service worker, משתמשים ב-Permissions API כדי לשלוח שאילתה לגבי periodic-background-sync. אפשר לעשות זאת מחלון או מההקשר של Service Worker.

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

רישום סנכרון תקופתי

כפי שצוין קודם, כדי לבצע סנכרון תקופתי ברקע צריך שירות עבודה. מאחזרים PeriodicSyncManager באמצעות ServiceWorkerRegistration.periodicSync ומפעילים עליו את register(). במהלך הרישום נדרשים גם תג ומרווח זמן מינימלי לסנכרון (minInterval). התג מזהה את הסנכרון הרשום, כך שאפשר יהיה לרשום כמה סנכרונים. בדוגמה הבאה, שם התג הוא 'content-sync' ו-minInterval הוא יום אחד.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

אימות רישום

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

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

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

תגובה לאירוע סנכרון תקופתי ברקע

כדי להגיב לאירוע סנכרון תקופתי ברקע, מוסיפים ל-service worker טיפול באירוע periodicsync. אובייקט event שיועברו אליו יכיל פרמטר tag שתואמת לערך ששימש במהלך הרישום. לדוגמה, אם סנכרון תקופתי ברקע נרשם בשם 'content-sync', הערך של event.tag יהיה 'content-sync'.

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

ביטול הרישום של סנכרון

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

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

ממשקים

ריכזנו כאן סקירה מהירה של הממשקים ש-Periodic Background Sync API מספק.

• PeriodicSyncEvent. הועבר ל-handler של האירוע ServiceWorkerGlobalScope.onperiodicsync לפי בחירת הדפדפן.
• PeriodicSyncManager. רישום וביטול הרישום של סנכרונים תקופתיים, ומספק תגים לסנכרונים רשומים. אחזור מופע של הכיתה הזו מהמאפיין ServiceWorkerRegistration.periodicSync.
• ServiceWorkerGlobalScope.onperiodicsync. רישום של טיפול (handler) לקבלת ה-PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. מחזירה הפניה אל PeriodicSyncManager.

דוגמה

עדכון תוכן

בדוגמה הבאה נעשה שימוש בסנכרון ברקע תקופתי כדי להוריד ולשמור במטמון מאמרים עדכניים באתר חדשות או בבלוג. שימו לב לשם התג, שמציין את סוג הסנכרון ('update-articles'). הקריאה ל-updateArticles() עטופה ב-event.waitUntil() כדי ש-service worker לא יסתיים לפני שהמאמרים יורדו ויאוחסנו.

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

הוספת סנכרון תקופתי ברקע לאפליקציית אינטרנט קיימת

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

ניפוי באגים

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

תיעוד של פעילות מקומית

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

במהלך ההקלטה, יופיעו ב-DevTools רשומות שתואמות לאירועים, עם הקשר ומטא-נתונים של כל אירוע.

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

הדמיה של אירועים

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

אפשר לעשות זאת דרך הקטע Service Workers בחלונית Application (אפליקציה) בכלי הפיתוח ל-Chrome. בשדה Periodic Sync אפשר לספק תג לשימוש באירוע, ולהפעיל אותו כמה פעמים שרוצים.

שימוש בממשק של DevTools

החל מ-Chrome 81, יופיע הקטע סנכרון תקופתי ברקע בחלונית Application (אפליקציה) בכלי הפיתוח.