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

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

Jeff Posnick
Joe Medley
Joe Medley
GitHub

יצא לך פעם מהמצבים הבאים?

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

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

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

רוצה לנסות?

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

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

הרשאות

לאחר התקנת ה-Service Worker, משתמשים בהרשאות 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.
}

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

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

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

כדי להגיב לאירוע תקופתי של סנכרון ברקע צריך להוסיף אירוע periodicsync המטפל ב-Service Worker. האובייקט 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');
}

ממשקים

הנה סקירה מהירה של הממשקים שסופקו על ידי הרקע התקופתי Sync API.

  • PeriodicSyncEvent הועבר אל הגורם המטפל באירועים של 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.

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

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

לחצן ההקלטה בכלי הפיתוח
לחצן ההקלטה בכלי הפיתוח

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

דוגמה לנתוני סנכרון תקופתיים מתועדים ברקע
דוגמה לנתוני סנכרון תקופתיים מתועדים ברקע

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

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

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

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

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

איך משתמשים בממשק של כלי הפיתוח

החל מגרסה 81 של Chrome, יופיע הקטע סנכרון תקופתי ברקע החלונית Application של כלי הפיתוח.

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