חדש: סנכרון ברקע

Jake Archibald

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

הבעיה

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

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

1. הטלפון לא בכיס.
2. השגת יעד משני.
3. הטלפון חוזר לכיס.
4. להמשיך בחיים.

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

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

קובצי שירות (service workers) פותרים את הבעיה של טעינת הדף על ידי הצגת תוכן מהמטמון. אבל מה קורה כשהדף צריך לשלוח משהו לשרת?

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

זה שטויות. סנכרון ברקע מאפשר לכם לעשות זאת.

הפתרון

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

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

החל ממרץ 2016, התכונה 'סנכרון ברקע' זמינה ב-Chrome מגרסה 49 ואילך. כדי לראות את הפעולה הזו בפעולה, פועלים לפי השלבים הבאים:

1. פותחים את Emojoy.
2. עוברים למצב אופליין (באמצעות מצב טיסה או ביקור בכלוב פאראדיי מקומי).
3. מקלידים הודעה.
4. חוזרים למסך הבית (אפשר לסגור את הכרטיסייה או הדפדפן).
5. התחברות לאינטרנט.
6. ההודעה נשלחת ברקע.

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

איך מבקשים סנכרון ברקע

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

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

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

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

למה אפשר להשתמש בסנכרון ברקע?

מומלץ להשתמש בו כדי לתזמן שליחה של נתונים שחשובים לכם גם אחרי שהדף יוצא משימוש. הודעות בצ'אט, אימיילים, עדכוני מסמכים, שינויים בהגדרות, העלאות תמונות… כל דבר שרוצים להגיע לשרת גם אם המשתמש עובר למקום אחר או סוגר את הכרטיסייה. הדף יכול לאחסן אותם במאגר 'תיבת דואר יוצאת' ב-indexedDB, וקובץ השירות (service worker) יהיה אחראי לאחזר אותם ולשלוח אותם.

עם זאת, אפשר גם להשתמש בו כדי לאחזר קטעי נתונים קטנים…

עוד הדגמה!

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

כדאי לנסות את זה בעצמכם. מוודאים שאתם משתמשים ב-Chrome מגרסה 49 ואילך, ולאחר מכן:

1. עוברים למאמר כלשהו, למשל Chrome.
2. לעבור למצב אופליין (באמצעות מצב טיסה או הצטרפות לספק סלולרי גרוע כמו שלי).
3. לוחצים על קישור לכתבה אחרת.
4. אמורה להופיע הודעה על כך שהדף לא נטען (ההודעה הזו תופיע גם אם פשוט חולף זמן מה עד שהדף נטען).
5. מאשרים את ההתראות.
6. סוגרים את הדפדפן.
7. התחברות לאינטרנט
8. תקבלו התראה כשהמאמר יורד, נשמר במטמון ויהיה מוכן לצפייה.

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

הרשאות

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

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

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

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

שיפור הדרגתי

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

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();
}

אם שירותי ה-Worker או סנכרון הרקע לא זמינים, פשוט מפרסמים את התוכן מהדף כמו שאתם עושים היום.

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

העתיד

אנחנו שואפים להשיק את סנכרון הרקע בגרסה יציבה של Chrome במחצית הראשונה של 2016, תוך כדי עבודה על גרסה משופרת – 'סנכרון תקופתי ברקע'. באמצעות סנכרון תקופתי ברקע, אפשר לבקש אירוע מוגבל לפי מרווח זמן, מצב סוללה ומצב רשת. כמובן, כדי לעשות זאת צריך לקבל הרשאה מהמשתמש, וגם הדפדפן קובע מתי האירועים האלה יופעלו ובאיזו תדירות. במילים אחרות, אתר חדשות יכול לבקש לבצע סנכרון בכל שעה, אבל יכול להיות שהדפדפן יודע שקראת את האתר הזה רק בשעה 07:00, ולכן הסנכרון יופעל מדי יום בשעה 06:50. הרעיון הזה רחוק יותר מסנכרון חד-פעמי, אבל הוא בדרך.

אנחנו מוסיפים בהדרגה דפוסים מוצלחים מ-Android ומ-iOS לאינטרנט, תוך שמירה על מה שמיוחד באינטרנט.