Background Synchronization הוא ממשק API חדש לאינטרנט שמאפשר לדחות פעולות עד שלמשתמש יש קישוריות יציבה. כך אפשר להבטיח שכל מה שהמשתמש רוצה לשלוח אכן נשלח.
הבעיה
האינטרנט הוא מקום נהדר לבזבז זמן. אם לא תבזבזו זמן באינטרנט, לא היינו יודעים חתולים לא אוהבים פרחים, זיקיות אוהבים בועות, או שאריק בידלמן שלנו הוא גיבור פאט-פט גולף בסוף שנות ה-90.
אבל לפעמים, רק לפעמים, אנחנו לא רוצים לבזבז זמן. חוויית המשתמש הרצויה דומה יותר ל:
- הטלפון הוצא מהכיס.
- להשיג מטרה קלה.
- הטלפון בחזרה בכיס.
- המשך חיים.
לצערנו, חוויית השימוש הזו לא עובדת לעיתים קרובות בגלל קישוריות גרועה. זה קורה לכולנו. אתה בוהה במסך לבן או מסתובב, ואתה יודע שאתה צריך פשוט לוותר ולהמשיך בחיים, אבל אתה צריך להמתין עוד 10 שניות ליתר ביטחון. אחרי 10 שניות אלו? שום דבר.
אבל למה לוותר עכשיו? כבר השקעת זמן, כך שאפשר להמשיך לחכות בלי לבזבז זמן. בשלב הזה אתם רוצים לוותר, אבל אתם יודעים שהשנייה שבה תעשו זאת, היא הרגע השנייה לפני שהכול היה נטען, אם רק הייתם ממתינים.
Service Workers מאפשרים להציג תוכן מתוך מטמון כדי לפתור את החלק של טעינת הדף. אבל מה קורה כשהדף צריך לשלוח משהו לשרת?
בשלב זה, אם משתמש לוחץ על 'שלח' בהודעה, הוא צריך לנעוץ באפקט מסתובב עד שהיא מסתיימת. אם הם ינסו לנווט החוצה או לסגור את הכרטיסייה, אנחנו משתמשים ב-onbeforeunload כדי להציג הודעה כמו "לא, אני צריך שתסתכלו שוב על המחוון הזה. מצטערים". אם למשתמש אין חיבור, אנחנו אומרים לו "מצטערים, אתם חייבים לחזור מאוחר יותר ולנסות שוב".
איזו שטות. סנכרון ברקע מאפשר לך לעשות זאת טוב יותר.
הפתרון
בסרטון הבא מוצג Emojoy, הדגמת צ'אט עם אמוג'י בלבד. זוהי אפליקציית Progressive Web App, והיא פועלת במצב אופליין תחילה. האפליקציה משתמשת בהודעות דחיפה ובהתראות, ומשתמשת בסנכרון ברקע.
אם המשתמש מנסה לשלוח הודעה שאין לו קישוריות, אז למרבה המזל, ההודעה נשלחת ברקע ברגע שיש לו קישוריות.
החל ממרץ 2016, 'סנכרון ברקע' זמין ב-Chrome מגרסה 49 ואילך. אפשר לראות את הפעולה הזו על ידי ביצוע השלבים הבאים:
- פותחים את Emojoy.
- מתחברים אופליין (במצב טיסה או נכנסים לכלוב פאראדיי המקומי).
- כותבים הודעה.
- חוזרים למסך הבית (אפשר לסגור את הכרטיסייה או הדפדפן).
- נכנסים לאינטרנט.
- ההודעות נשלחות ברקע
היכולת לשלוח תוכן ברקע כזה גם מניבה שיפור בביצועים. האפליקציה לא צריכה לעשות עניין גדול כל כך בשליחת ההודעה, כך שהיא יכולה להוסיף את ההודעה לפלט מיד.
איך לבקש סנכרון ברקע
בסגנון אמיתי של אתר שניתן להרחבה, זו תכונה ברמה נמוכה שמאפשרת לכם לעשות מה שאתם צריכים. אתם מבקשים שהאירוע יופעל כשלמשתמש יש קישוריות, פעולה מיידית אם למשתמש כבר יש קישוריות. לאחר מכן, אתם מקשיבים לאותו אירוע ועושים מה שתצטרכו לעשות.
בדומה להעברת הודעות בדחיפה, היא משתמשת ב-service worker כיעד לאירוע, כדי לאפשר לה לפעול כשהדף לא פתוח. כדי להתחיל, צריך להירשם לסנכרון מדף:
// Register your service worker:
navigator.serviceWorker.register('/sw.js');
// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
return swRegistration.sync.register('myFirstSync');
});
```
Then listen for the event in `/sw.js`:
```js
self.addEventListener('sync', function(event) {
if (event.tag == 'myFirstSync') {
event.waitUntil(doSomeStuff());
}
});
זהו, סיימתם. למעלה, doSomeStuff() אמור להחזיר הבטחה שמצביעה על ההצלחה או הכישלון של מה שהוא מנסה לעשות. אם הוא מתקיים, הסנכרון הושלם. אם הפעולה תיכשל, ייקבע שוב סנכרון אחר לניסיון. סנכרונים לניסיון חוזר ממתינים גם הם לקישוריות ויש להם השהיה מעריכית של ניסיון חוזר (backoff).
שם התג של הסנכרון ('myFirstSync' בדוגמה שלמעלה) צריך להיות ייחודי לסנכרון נתון. אם נרשמים לסנכרון באמצעות אותו תג שמשמש לסנכרון בהמתנה, הוא יתמזג עם הסנכרון הקיים. כלומר, אפשר להירשם לסנכרון "תיבת דואר יוצא" בכל פעם שהמשתמש שולח הודעה, אבל אם הוא שולח 5 הודעות במצב אופליין, תקבל סנכרון אחד בלבד כשהוא יתחבר לאינטרנט. אם רוצים 5 אירועי סנכרון נפרדים, צריך להשתמש בתגים ייחודיים.
הנה הדגמה פשוטה שמבצעת את המינימום הנדרש. באמצעות אירוע הסנכרון מוצגת התראה.
מה אפשר לעשות עם סנכרון ברקע?
באופן אידיאלי, תוכלו להשתמש בו כדי לתזמן שליחת נתונים שחשובה לכם מעבר לחיי הדף. הודעות צ'אט, אימיילים, עדכוני מסמכים, שינויי הגדרות, העלאות של תמונות... כל מה שרוצים להגיע לשרת גם אם המשתמש מנווט החוצה או סוגר את הכרטיסייה. הדף יכול לאחסן אותם בחנות "תיבת דואר יוצא" ב-IndexDB, וה-Service Worker יאחזר אותם וישלח אותם.
עם זאת, תוכלו להשתמש בהם גם כדי לאחזר קטעי מידע קטנים...
הדגמה נוספת!
זו הדגמה של ויקיפדיה אופליין שיצרתי עבור Supercharging Page Load. מאז הוספתי לו קצת קסם של סנכרון ברקע.
אפשר לנסות את זה בעצמך. יש לוודא שאתם משתמשים ב-Chrome מגרסה 49 ואילך, ולאחר מכן:
- נכנסים למאמר כלשהו, למשל Chrome.
- לעבור למצב אופליין (באמצעות מצב טיסה או להצטרף לספק שירותי סלולר כמוני).
- לוחצים על קישור למאמר אחר.
- אתם אמורים לדעת שטעינת הדף נכשלה (האפשרות הזו תופיע גם אם טעינת הדף נמשכת זמן מה).
- הסכמה להתראות.
- יש לסגור את הדפדפן.
- התחברות לאינטרנט
- נשלח לך הודעה כשהמאמר הורד, הוא יישמר במטמון ויהיה מוכן לצפייה!
באמצעות דפוס זה, המשתמש יכול להכניס את הטלפון לכיס ולהמשיך בחייו, בידיעה שהטלפון יציג התראה כשהוא יישלף.
הרשאות
בהדגמות שפרסמתי נעשה שימוש בהתראות באינטרנט, שנדרשת עבורן הרשאה, אבל הסנכרון ברקע עצמו לא עושה זאת.
אירועי סנכרון יושלמו בדרך כלל כל עוד למשתמש יש דף פתוח באתר, כך שבקשת הרשאת משתמש לא תהיה חוויה טובה. במקום זאת, אנחנו מגבילים את המקרים שבהם אפשר לרשום ולהפעיל סנכרונים כדי למנוע ניצול לרעה. לדוגמה:
- אפשר להירשם לאירוע סנכרון רק כשלמשתמש יש חלון פתוח לאתר.
- זמן הביצוע של האירוע מוגבל, כך שלא תוכלו להשתמש בהם כדי לבצע פינג לשרת כל x שניות, לכרות ביטקוין או כל דבר אחר.
כמובן שההגבלות האלה עשויות להיות רפויות או מחמירות יותר בהתאם לשימוש בפועל.
שיפור הדרגתי
צריך לחכות קצת עד שכל הדפדפנים יתמכו בסנכרון ברקע, במיוחד מכיוון ש-Safari ו-Edge עדיין לא תומכים ב-Service Workers. אבל השיפור המתקדם עוזר כאן:
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready.then(function(reg) {
return reg.sync.register('tag-name');
}).catch(function() {
// system was unable to register for a sync,
// this could be an OS-level restriction
postDataFromThePage();
});
} else {
// serviceworker/sync not supported
postDataFromThePage();
}
אם אין קובצי שירות (service worker) או סנכרון ברקע, אפשר פשוט לפרסם את התוכן מהדף כפי שעושים היום.
כדאי להשתמש בסנכרון ברקע גם אם נראה שלמשתמש יש קישוריות טובה, מכיוון שהחיבור מגן עליך מפני ניווטים וסגירת כרטיסיות במהלך שליחת הנתונים.
העתיד
אנחנו משתדלים לבצע סנכרון ברקע לגרסה יציבה של Chrome במחצית הראשונה של 2016, תוך כדי עבודה על וריאנט, "סנכרון תקופתי ברקע". כשמפעילים סנכרון תקופתי ברקע, אפשר לבקש אירוע שיוגבל לפי מרווח זמן, מצב סוללה ומצב רשת. כדי לעשות זאת יש צורך בהרשאת משתמש, כמובן, והדפדפן קובע מתי ובאיזו תדירות האירועים האלה מופעלים. במילים אחרות, אתר חדשות יכול לבקש סנכרון כל שעה, אבל הדפדפן עשוי לדעת שקראת את האתר רק בשעה 07:00, ולכן הסנכרון יופעל מדי יום בשעה 06:50. הרעיון הזה קצת יותר רחוק מסנכרון חד-פעמי, אבל בקרוב הוא יהיה זמין.
בהדרגה אנחנו מוסיפים לאינטרנט דפוסים מצליחים מ-Android ומ-iOS, ועדיין שומרים על מה שהופך את האינטרנט למעולה!