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

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) יהיה אחראי לאחזר אותם ולשלוח אותם.

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

עוד הדגמה!

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

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

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

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

הרשאות

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

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

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

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

שיפור הדרגתי

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

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, ועדיין נשמור על מה שהופך את האינטרנט לנהדר!