סנכרון הנתונים של אפליקציית האינטרנט ברקע כדי ליהנות מחוויה שדומה יותר לאפליקציה
האם היית פעם באחד מהמצבים הבאים?
- נסיעה ברכבת או ברכבת תחתית עם חיבור רעוע או ללא חיבור כלל
- חבילת הגלישה נחסמה על ידי הספק אחרי צפייה ביותר מדי סרטונים
- החיים במדינה שבה רוחב הפס נאבק לעמוד בביקוש
אם כן, בוודאי הרגשתם את התסכול מביצוע משימות מסוימות באינטרנט, ותהיתם מדוע אפליקציות ספציפיות לפלטפורמה בדרך כלל מניבות ביצועים טובים יותר בתרחישים האלה. אפליקציות ספציפיות לפלטפורמה יכולות לאחזר מראש תוכן חדש כמו מאמרי חדשות או מידע על מזג אוויר. אפשר לקרוא את החדשות גם אם אין רשת ברכבת התחתית.
התכונה 'סנכרון תקופתי ברקע' מאפשרת לאפליקציות אינטרנט לסנכרן נתונים ברקע באופן תקופתי, וכך אפליקציות אינטרנט קרובות יותר להתנהגות של אפליקציה ספציפית לפלטפורמה.
אני רוצה לנסות
אפשר לנסות סנכרון תקופתי ברקע עם אפליקציית ההדגמה בזמן אמת. לפני שמשתמשים בה, חשוב לוודא:
- אתם משתמשים ב-Chrome מגרסה 80 ואילך.
- מתקינים את אפליקציית האינטרנט לפני שמפעילים סנכרון תקופתי ברקע.
מושגים ושימוש
סנכרון תקופתי ברקע מאפשר להציג תוכן חדש בהשקה של Progressive Web App או דף בגיבוי Service Worker. היא עושה זאת על ידי הורדת נתונים ברקע, כשלא נעשה שימוש באפליקציה או בדף. הבעיה הזו מונעת רענון של תוכן האפליקציה אחרי ההשקה בזמן שצופים בה. יותר מזה, זה מונע מהאפליקציה להציג סימן גרפי של תוכן לפני הרענון.
ללא סנכרון ברקע תקופתי, אפליקציות אינטרנט צריכות להשתמש בשיטות חלופיות להורדת נתונים. דוגמה נפוצה היא שימוש בהתראה Push (Push) כדי להוציא את Service Worker. הודעה כגון 'יש נתונים חדשים זמינים' קוטעת את המשתמש. עדכון הנתונים הוא בעצם תופעת לוואי. עדיין יש לכם אפשרות להשתמש בהתראות כדי לקבל עדכונים חשובים באמת, כמו מבזקי חדשות משמעותיים.
קל להתבלבל בין סנכרון תקופתי ברקע לבין סנכרון ברקע. למרות שיש להם שמות דומים, תרחישי השימוש שלהם שונים. בין היתר, סנכרון ברקע משמש בדרך כלל לשליחה מחדש של נתונים לשרת כשבקשה קודמת נכשלה.
איך להשיג את התעניינות המשתמשים בצורה נכונה
מבוצע בצורה שגויה, סנכרון תקופתי ברקע עלול לבזבז משאבים של המשתמשים. לפני ההשקה שלו, Chrome מציע תקופת ניסיון כדי לוודא שהוא תקין. בקטע הזה נסביר כמה מההחלטות שהתקבלו ב-Chrome לגבי עיצוב כדי להפוך את התכונה הזו למועילה ככל האפשר.
ההחלטה הראשונה של Chrome בנוגע לעיצוב היא שאפליקציית אינטרנט יכולה להשתמש בסנכרון תקופתי ברקע רק אחרי שמשתמש התקין אותה במכשיר שלו והפעיל אותה כאפליקציה ייחודית. סנכרון תקופתי ברקע אינו זמין בהקשר של כרטיסייה רגילה ב-Chrome.
בנוסף, מכיוון ש-Chrome לא רוצה שאפליקציות אינטרנט שלא ישתמשו בהן או ישתמשו בהן רק לעתים רחוקות, לצרוך סוללה או נתונים באופן מוגזם, Chrome יצר סנכרון תקופתי ברקע כך שהמפתחים יצטרכו להרוויח אותו באמצעות אספקת ערך למשתמשים. ליתר דיוק, Chrome משתמש בציון התעניינות באתר (about://site-engagement/) כדי לקבוע אם יכולים להתרחש סנכרונים תקופתיים ברקע באפליקציית אינטרנט מסוימת. במילים אחרות, אירוע periodicsync לא יופעל בכלל, אלא אם מדד המעורבות גדול מאפס והערך שלו משפיע על התדירות שבה האירוע periodicsync מופעל. כך מובטח שהאפליקציות היחידות שמסתנכרנות ברקע הן אלה שאתם משתמשים בהן באופן פעיל.
בסנכרון תקופתי ברקע יש כמה קווי דמיון עם ממשקי API ושיטות עבודה קיימות בפלטפורמות פופולריות. לדוגמה, סנכרון חד פעמי ברקע והתראות, מאפשרים ללוגיקה של אפליקציית אינטרנט להישאר זמן רב יותר (באמצעות Service Worker) אחרי שמשתמשים סוגרים את הדף. ברוב הפלטפורמות מקובל שאנשים מתקינים אפליקציות שמקבלות גישה מדי פעם לרשת ברקע, כדי לספק חוויית משתמש טובה יותר עבור עדכונים קריטיים, שליפה מראש של תוכן, סנכרון נתונים ועוד. באופן דומה, סנכרון תקופתי ברקע מאריך את משך החיים של הלוגיקה של אפליקציית אינטרנט, כך שתרוץ בתקופות קבועות למשך כמה דקות בכל פעם.
אם הדפדפן אפשר לעשות זאת לעיתים קרובות וללא הגבלות, זה עלול לגרום לחששות מסוימים לגבי פרטיות. כך Chrome טיפל בסיכון הזה לסנכרון תקופתי ברקע:
- פעילות הסנכרון ברקע מתרחשת רק ברשת שהמכשיר התחבר אליה בעבר. ההמלצה של Chrome היא להתחבר רק לרשתות שמופעלות על ידי צדדים מהימנים.
- כמו בכל תקשורת באינטרנט, סנכרון תקופתי ברקע חושף את כתובות ה-IP של הלקוח, את השרת שאליו הוא מתקשר ואת שם השרת. כדי לצמצם את החשיפה למצב שבו האפליקציה הייתה מסונכרנת רק כשהיא הייתה בחזית, הדפדפן מגביל את תדירות הסנכרון של הרקע של האפליקציה בהתאם לתדירות שבה הוא משתמש באפליקציה. אם אותו אדם יפסיק לקיים אינטראקציה לעיתים קרובות עם האפליקציה, הסנכרון התקופתי ברקע יפסיק לפעול. זהו שיפור נטו מהסטטוס-קוו באפליקציות ספציפיות לפלטפורמה.
מתי אפשר להשתמש בה?
כללי השימוש משתנים בהתאם לדפדפן. לסיכום, Chrome מציב את הדרישות הבאות בסנכרון תקופתי ברקע:
- ציון ספציפי של התעניינות המשתמשים.
- נוכחות של רשת שהייתה בשימוש בעבר.
התזמון של הסנכרונים לא נקבע על ידי המפתחים. תדירות הסנכרון תתאים לתדירות השימוש באפליקציה. (שימו לב שאפליקציות ספציפיות לפלטפורמה כרגע לא עושות זאת). הוא גם עובר למצב החשמל והקישוריות של המכשיר.
מתי כדאי להשתמש בה?
כשה-Service Worker מתעורר לטפל באירוע periodicsync, מוצגת ההזדמנות לבקש נתונים אבל לא החובה לעשות זאת. כשמטפלים באירוע צריך להביא בחשבון את תנאי הרשת ואת האחסון הזמין ולהוריד כמויות שונות של נתונים בתגובה. אפשר להיעזר במקורות המידע הבאים:
הרשאות
אחרי שמתקינים את קובץ השירות (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.
}
רישום סנכרון תקופתי
כפי שכבר צוין, יש צורך בקובץ שירות (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() כדי להציג רשימה של רישומים פעילים בדף ההגדרות של אפליקציית האינטרנט, וכך לאפשר למשתמשים להפעיל או להשבית סוגים מסוימים של עדכונים.
תגובה לאירוע תקופתי של סנכרון ברקע
כדי להגיב לאירוע תקופתי של סנכרון ברקע, צריך להוסיף handler של אירועים של 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');
}
ממשקים
לפניך סקירה קצרה של הממשקים שה-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.
תיעוד של פעילות מקומית
הקטע סנכרון תקופתי ברקע בכלי הפיתוח מאורגן סביב אירועים מרכזיים במחזור החיים של הסנכרון התקופתי ברקע: הרשמה לסנכרון, ביצוע סנכרון ברקע וביטול רישום. לקבלת מידע על האירועים האלה, לוחצים על התחלת ההקלטה.
במהלך ההקלטה, הרשומות יופיעו בכלי הפיתוח בהתאם לאירועים, עם ההקשר והמטא-נתונים של כל אחת מהן.
אחרי שמפעילים את ההקלטה פעם אחת, היא נשארת מופעלת למשך עד שלושה ימים, וכך מאפשרת לכלי הפיתוח לתעד מידע מקומי על תוצאות ניפוי באגים לגבי סנכרונים שעשויים להתרחש ברקע, ואפילו שעות בעתיד.
סימולציה של אירועים
תיעוד של הפעילות ברקע יכול להיות מועיל, אבל במקרים מסוימים כדאי לבדוק את ה-handler של periodicsync באופן מיידי, בלי להמתין עד שהאירוע יופעל בקצב הרגיל שלו.
אפשר לעשות זאת דרך הקטע Service Workers בחלונית Application בכלי הפיתוח ל-Chrome. בשדה Periodic Sync אפשר לספק תג לשימוש באירוע ולהפעיל אותו כמה פעמים שרוצים.
שימוש בממשק של כלי הפיתוח
החל מגרסה 81 של Chrome, יופיע הקטע סנכרון תקופתי ברקע בחלונית Application של כלי הפיתוח.
