סנכרון הנתונים של אפליקציית האינטרנט ברקע כדי ליהנות מחוויה יותר דומה לאפליקציה
האם יצא לך פעם להיות במצבים הבאים?
- נסיעה ברכבת או ברכבת תחתית עם חיבור לא יציב או ללא חיבור כלל
- ספק האינטרנט שלכם הגביל את מהירות הגלישה אחרי שצפיתם יותר מדי סרטונים
- אתם גרים במדינה שבה רוחב הפס לא עומד בביקוש
אם כן, בטח נתקלתם בתסכול כשניסיתם לבצע פעולות מסוימות באינטרנט, ותהיתם למה אפליקציות ספציפיות לפלטפורמה עובדות טוב יותר בתרחישים האלה. אפליקציות ספציפיות לפלטפורמה יכולות לאחזר תוכן עדכני, כמו מאמרים חדשותיים או מידע על מזג האוויר, מראש. גם אם אין רשת ברכבת התחתית, עדיין תוכלו לקרוא את החדשות.
סנכרון תקופתי ברקע מאפשר לאפליקציות אינטרנט לסנכרן נתונים מדי פעם ברקע, וכך להביא את אפליקציות האינטרנט להתנהגות של אפליקציה ספציפית לפלטפורמה.
רוצה לנסות?
אתם יכולים לנסות סנכרון תקופתי ברקע באמצעות אפליקציית הדגמה פעילה. לפני שמשתמשים בה, חשוב לוודא:
- אתם משתמשים ב-Chrome מגרסה 80 ואילך.
- מתקינים את אפליקציית האינטרנט לפני שמפעילים סנכרון תקופתי ברקע.
מושגים ושימוש
סנכרון תקופתי ברקע מאפשר לכם להציג תוכן עדכני כשאפליקציית אינטרנט פרוגרסיבית או דף שמבוסס על שירות עובד (service worker) מופעלים. כדי לעשות זאת, האפליקציה או הדף מורידים נתונים ברקע כשלא משתמשים בהם. כך תוכלו למנוע רענון של התוכן באפליקציה אחרי ההפעלה, בזמן הצפייה בה. יתרה מכך, היא מונעת מהאפליקציה להציג ספינר תוכן לפני הרענון.
בלי סנכרון תקופתי ברקע, אפליקציות אינטרנט צריכות להשתמש בשיטות חלופיות כדי להוריד נתונים. דוגמה נפוצה היא שימוש בהתראה כדי להעיר עובד שירות. המשתמש מופיע הודעה כמו 'יש נתונים חדשים'. עדכון הנתונים הוא למעשה תופעת לוואי. עדיין תוכלו להשתמש בהתראות על עדכונים חשובים באמת, כמו חדשות מהימנות בזמן אמת.
קל להתבלבל בין סנכרון תקופתי ברקע לבין סנכרון ברקע. למרות שהשמות שלהם דומים, תרחישים לדוגמה שלהם שונים. בין היתר, הסנכרון ברקע משמש בדרך כלל לשליחת נתונים מחדש לשרת אם בקשה קודמת נכשלה.
איך מושכים את תשומת הלב של המשתמשים
אם לא מבצעים את הסנכרון ברקע באופן תקין, הוא עלול לבזבז משאבים של המשתמשים. לפני שהתכונה הזו שוחררה, היא נבדקה ב-Chrome במהלך תקופת ניסיון כדי לוודא שהיא מתאימה. בקטע הזה נסביר על חלק מההחלטות שקשורות לעיצוב של Chrome, שנועדו להפוך את התכונה הזו לעזרה הכי יעילה שאפשר.
ההחלטה הראשונה שקיבלנו בנושא עיצוב ב-Chrome היא שאפליקציית אינטרנט יכולה להשתמש בסנכרון תקופתי ברקע רק אחרי שהמשתמש מתקין אותה במכשיר ומפעיל אותה כאפליקציה נפרדת. סנכרון תקופתי ברקע לא זמין בהקשר של כרטיסייה רגילה ב-Chrome.
בנוסף, אנחנו לא רוצים שאפליקציות אינטרנט שלא בשימוש או שנעשה בהן שימוש לעיתים רחוקות ינצלו את הסוללה או את הנתונים ללא צורך. לכן, תהליך הסנכרון ברקע ב-Chrome מתוזמן באופן קבוע, והמפתחים צריכים להרוויח אותו על ידי מתן ערך למשתמשים שלהם. באופן ספציפי, Chrome משתמש בדירוג ההתעניינות באתר (about://site-engagement/) כדי לקבוע אם סנכרון תקופתי ברקע יכול להתרחש באפליקציית אינטרנט מסוימת, ואם כן, באיזו תדירות. במילים אחרות, אירוע periodicsync לא יופעל בכלל אלא אם דירוג ההתעניינות גבוה מאפס, והערך שלו משפיע על התדירות שבה אירוע periodicsync מופעל. כך תוכלו לוודא שרק האפליקציות שבהן אתם משתמשים באופן פעיל יסונכרנו ברקע.
לסנכרון ברקע במועדים קבועים יש כמה מאפיינים משותפים לממשקי API ולשיטות קיימות בפלטפורמות פופולריות. לדוגמה, סנכרון חד-פעמי ברקע וגם התראות דחיפה מאפשרים ללוגיקת אפליקציית האינטרנט לפעול עוד קצת (דרך ה-service worker שלה) אחרי שמשתמש סוגר את הדף. ברוב הפלטפורמות, אנשים נוהגים להתקין אפליקציות שמקבלות מדי פעם גישה לרשת ברקע כדי לספק חוויית משתמש טובה יותר לפעולות כמו עדכונים קריטיים, אחסון תוכן מראש וסנכרון נתונים. באופן דומה, סנכרון תקופתי ברקע גם מרחיב את משך החיים של הלוגיקה של אפליקציית אינטרנט, כך שהיא תפעל במרווחי זמן קבועים למשך כמה דקות בכל פעם.
אם הדפדפן יאפשר לכך לקרות לעיתים קרובות וללא הגבלות, יכול להיות שיהיו לכך השלכות על הפרטיות. כך טיפלנו בסיכון הזה בסנכרון תקופתי ברקע ב-Chrome:
- פעילות הסנכרון ברקע מתרחשת רק ברשת שהמכשיר היה מחובר אליה בעבר. ההמלצה של Chrome היא להתחבר רק לרשתות שמנוהלות על ידי גורמים מהימנים.
- כמו בכל תקשורת באינטרנט, סנכרון תקופתי ברקע חושף את כתובות ה-IP של הלקוח, את השרת שאליו הוא מתקשר ואת שם השרת. כדי לצמצם את החשיפה הזו לכדי רמה דומה לזו שהייתה אם האפליקציה הייתה מסתנכרנת רק כשהיא הייתה בחזית, הדפדפן מגביל את תדירות הסנכרון של האפליקציה ברקע בהתאם לתדירות שבה המשתמש משתמש באפליקציה. אם המשתמש מפסיק לבצע אינטראקציות תכופות עם האפליקציה, הסנכרון הקבוע ברקע יפסיק לפעול. זהו שיפור משמעותי לעומת המצב הקיים באפליקציות ספציפיות לפלטפורמה.
מתי אפשר להשתמש בה?
הכללים לשימוש משתנים בהתאם לדפדפן. לסיכום, אלה הדרישות של Chrome לסנכרון תקופתי ברקע:
- ציון ספציפי של התעניינות משתמשים.
- נוכחות של רשת שנעשה בה שימוש בעבר.
המפתחים לא שולטים במועדי הסנכרון. תדירות הסנכרון תהיה בהתאם לתדירות השימוש באפליקציה. (חשוב לציין שאפליקציות ספציפיות לפלטפורמה לא עושות זאת כרגע). הוא גם מתייחס למצב החיבור וההפעלה של המכשיר.
מתי כדאי להשתמש בה?
כשעובד השירות מתעורר כדי לטפל באירוע periodicsync, יש לכם הזדמנות לבקש נתונים, אבל אין לכם חובה לעשות זאת. כשאתם מטפלים באירוע, כדאי להביא בחשבון את תנאי הרשת ואת נפח האחסון הזמין, ולהוריד כמויות שונות של נתונים בתגובה. מקורות המידע הבאים יכולים לעזור:
הרשאות
אחרי התקנת ה-service worker, משתמשים ב-Permissions API כדי לשלוח שאילתה לגבי periodic-background-sync. אפשר לעשות זאת מתוך חלון או מההקשר של שירות העבודה.
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() כדי להציג רשימה של רישומים פעילים בדף ההגדרות של אפליקציית האינטרנט, כדי שהמשתמשים יוכלו להפעיל או להשבית סוגים ספציפיים של עדכונים.
תגובה לאירוע סנכרון תקופתי ברקע
כדי להגיב לאירוע סנכרון תקופתי ברקע, מוסיפים ל-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. מועבר למטפל האירועיםServiceWorkerGlobalScope.onperiodicsyncבזמן שבחר הדפדפן.PeriodicSyncManager. הרשמה של סנכרון תקופתי וביטול ההרשמה שלו, ומתן תגים לסנכרון רשום. אחזור מופע של הכיתה הזו מהמאפיין ServiceWorkerRegistration.periodicSync.ServiceWorkerGlobalScope.onperiodicsync. רישום של טיפול (handler) לקבלת ה-PeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. הפונקציה מחזירה הפניה ל-PeriodicSyncManager.
דוגמה
בקטעים הבאים מפורטות דוגמאות לשימוש ב-API של סנכרון רקע תקופתי.
עדכן תוכן
בדוגמה הבאה נעשה שימוש בסנכרון ברקע תקופתי כדי להוריד ולשמור במטמון מאמרים עדכניים באתר חדשות או בבלוג. שימו לב לשם התג, שמציין את סוג הסנכרון ('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 קיימת. הדוגמה הזו כוללת מספר הצהרות מועילות ביומן שמתארות את המצב של הסנכרון הקבוע ברקע באפליקציית האינטרנט.
ניפוי באגים ב-Periodic Background Sync API
יכול להיות שיהיה קשה לקבל תצוגה מקצה לקצה של סנכרון תקופתי ברקע במהלך בדיקה מקומית. מידע על רישומים פעילים, על מרווחי זמן משוערים לסנכרון ועל יומנים של אירועי סנכרון קודמים מספק הקשר חשוב בזמן ניפוי הבאגים של התנהגות אפליקציית האינטרנט. למרבה המזל, אפשר למצוא את כל המידע הזה באמצעות תכונה ניסיונית ב-Chrome DevTools.
הקלטת פעילות מקומית
הקטע סנכרון תקופתי ברקע ב-DevTools מחולק לפי אירועים מרכזיים במחזור החיים של הסנכרון התקופת ברקע: רישום לסנכרון, ביצוע סנכרון ברקע וביטול הרישום. כדי לקבל מידע על האירועים האלה, לוחצים על התחלת ההקלטה.
במהלך ההקלטה, יופיעו ב-DevTools רשומות שתואמות לאירועים, עם הקשר ומטא-נתונים של כל אחד מהם.
אחרי שמפעילים את ההקלטה פעם אחת, היא נשארת מופעלת למשך עד שלושה ימים, ומאפשרת ל-DevTools לתעד מידע מקומי על ניפוי באגים לגבי סנכרון ברקע שעשוי להתרחש, גם שעות קדימה.
סימולציה של אירועים
תיעוד הפעילות ברקע יכול להיות שימושי, אבל לפעמים תרצו לבדוק את הטיפול באירוע periodicsync באופן מיידי, בלי להמתין לאירוע שיופעל בקצב הרגיל שלו.
אפשר לעשות זאת דרך הקטע Service Workers בחלונית Application (אפליקציה) בכלי הפיתוח ל-Chrome. בשדה Periodic Sync אפשר לספק תג לשימוש באירוע, ולהפעיל אותו כמה פעמים שרוצים.
שימוש בממשק של כלי הפיתוח
החל מ-Chrome 81, יופיע הקטע סנכרון תקופתי ברקע בחלונית Application (אפליקציה) בכלי הפיתוח.
