סנכרון הנתונים של אפליקציית האינטרנט ברקע כדי ליהנות מחוויה יותר דומה לאפליקציה
האם יצא לך פעם להיות במצבים הבאים?
- נסיעה ברכבת או ברכבת תחתית עם חיבור לא יציב או ללא חיבור כלל
- ספק האינטרנט שלכם הגביל את מהירות הגלישה אחרי שצפיתם יותר מדי סרטונים
- אתם גרים במדינה שבה רוחב הפס לא עומד בביקוש
אם כן, בטח נתקלתם בתסכול כשניסיתם לבצע פעולות מסוימות באינטרנט, ותהיתם למה אפליקציות ספציפיות לפלטפורמה עובדות טוב יותר בתרחישים האלה. אפליקציות ספציפיות לפלטפורמה יכולות לאחזר תוכן עדכני, כמו מאמרים חדשותיים או מידע על מזג האוויר, מראש. גם אם אין רשת ברכבת התחתית, עדיין תוכלו לקרוא את החדשות.
סנכרון תקופתי ברקע מאפשר לאפליקציות אינטרנט לסנכרן נתונים מדי פעם ברקע, וכך להביא את אפליקציות האינטרנט להתנהגות של אפליקציה ספציפית לפלטפורמה.
רוצה לנסות?
אתם יכולים לנסות סנכרון תקופתי ברקע באמצעות אפליקציית הדגמה פעילה. לפני שמשתמשים בה, חשוב לוודא:
- אתם משתמשים ב-Chrome מגרסה 80 ואילך.
- מתקינים את אפליקציית האינטרנט לפני שמפעילים סנכרון תקופתי ברקע.
מושגים ושימוש
סנכרון תקופתי ברקע מאפשר לכם להציג תוכן עדכני כשאפליקציית אינטרנט פרוגרסיבית או דף שמבוסס על שירות עובד (service worker) מופעלים. כדי לעשות זאת, האפליקציה או הדף מורידים נתונים ברקע כשלא משתמשים בהם. כך תוכלו למנוע רענון של התוכן באפליקציה אחרי ההפעלה, בזמן הצפייה בה. יתרה מכך, היא מונעת מהאפליקציה להציג סיבוב תוכן לפני הרענון.
בלי סנכרון תקופתי ברקע, אפליקציות אינטרנט צריכות להשתמש בשיטות חלופיות כדי להוריד נתונים. דוגמה נפוצה היא שימוש בהתראה כדי להעיר עובד שירות. המשתמש מופיע הודעה כמו 'יש נתונים חדשים'. עדכון הנתונים הוא למעשה תופעת לוואי. עדיין תוכלו להשתמש בהתראות על עדכונים חשובים באמת, כמו חדשות מהימנות בזמן אמת.
קל להתבלבל בין סנכרון תקופתי ברקע לבין סנכרון ברקע. למרות שהשמות שלהם דומים, תרחישים לדוגמה שלהם שונים. בין היתר, סנכרון ברקע משמש בדרך כלל לשליחת נתונים מחדש לשרת כשבקשה קודמת נכשלה.
איך מושכים את תשומת הלב של המשתמשים
אם לא מבצעים זאת בצורה נכונה, סנכרון תקופתי ברקע עלול לבזבז את המשאבים של המשתמשים. לפני שהתכונה הזו שוחררה, היא נבדקה ב-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. אפשר לעשות זאת מתוך חלון או מההקשר של שירות העבודה.
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.
דוגמה
עדכון התוכן
בדוגמה הבאה נעשה שימוש בסנכרון ברקע תקופתי כדי להוריד ולשמור במטמון מאמרים עדכניים באתר חדשות או בבלוג. שימו לב לשם התג, שמציין את סוג הסנכרון ('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 רשומות שתואמות לאירועים, עם הקשר ומטא-נתונים של כל אחד מהם.
אחרי שמפעילים את ההקלטה פעם אחת, היא נשארת מופעלת למשך עד שלושה ימים, ומאפשרת ל-DevTools לתעד מידע מקומי על ניפוי באגים לגבי סנכרון ברקע שעשוי להתרחש, גם שעות קדימה.
סימולציה של אירועים
תיעוד הפעילות ברקע יכול להיות שימושי, אבל לפעמים תרצו לבדוק את הטיפול באירוע periodicsync באופן מיידי, בלי לחכות לאירוע שיופעל בקצב הרגיל שלו.
אפשר לעשות זאת בקטע Service Workers בחלונית Application (אפליקציה) בכלי הפיתוח ל-Chrome. בשדה Periodic Sync אפשר לספק תג לשימוש באירוע, ולהפעיל אותו כמה פעמים שרוצים.
שימוש בממשק של DevTools
החל מ-Chrome 81, יופיע הקטע סנכרון תקופתי ברקע בחלונית Application (אפליקציה) בכלי הפיתוח.
