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

Jake Archibald

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

הבעיה

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

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

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

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

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

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

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

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

הפתרון

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

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

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

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

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

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

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

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

הדגמה נוספת!

זוהי ההדגמה (דמו) של וויקיפדיה אופליין שיצרתי עבור Supercharging Page Load. מאז הוספתי לו קצת קסם של סנכרון ברקע.

כדאי לנסות זאת בעצמך. חשוב לוודא שאתם משתמשים ב-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();
}

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

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

העתיד

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

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