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

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 אירועי סנכרון נפרדים, פשוט משתמשים בתגים ייחודיים.

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

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

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

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

עוד הדגמה!

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

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

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

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

הרשאות

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

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

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

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

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

העתיד

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

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