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

Jake Archibald

תאריך פרסום: 8 בדצמבר 2015

‫Background Synchronization הוא API לאינטרנט שמאפשר לדחות פעולות עד שהמשתמש ייהנה מחיבור יציב. כך תוכלו לעזור למשתמשים לשלוח את הקבצים שהם רוצים לשלוח, ברגע שזה אפשרי.

הבעיה

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

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

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

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

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

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

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

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

הפתרון

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

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

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

הסנכרון ברקע זמין מגרסה Chrome 49.

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

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

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

כדאי לנסות בעצמכם:

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

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

הרשאות

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

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

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

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

שיפור הדרגתי

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

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

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

העתיד

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

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