معرفی Background Sync

Jake Archibald

منتشر شده در: ۸ دسامبر ۲۰۱۵

همگام‌سازی پس‌زمینه یک API وب است که به شما امکان می‌دهد اقدامات را تا زمانی که کاربر اتصال پایدار پیدا کند، به تعویق بیندازید. این به شما کمک می‌کند تا از کاربران پشتیبانی کنید تا هر فایلی را که می‌خواهند، در اسرع وقت ارسال کنند.

مشکل

اینترنت جای خیلی خوبی برای تلف کردن وقت است. بدون تلف کردن وقت در اینترنت، ما نمی‌دانستیم که گربه‌ها از گل‌ها بدشان می‌آید ، آفتاب‌پرست‌ها عاشق حباب هستند ، یا اینکه اریک بیدلمن قهرمان گلف در اواخر دهه ۹۰ است.

اما گاهی اوقات، فقط گاهی اوقات، ما به دنبال اتلاف وقت نیستیم. تجربه کاربری ایده‌آل چیزی شبیه به این است:

1. گوشی از جیب بیرون.
2. رسیدن به هدف جزئی.
3. گوشی دوباره در جیب.
4. زندگی را از سر بگیر.

متأسفانه این تجربه اغلب به دلیل اتصال ضعیف اینترنت مختل می‌شود. همه ما این شرایط را تجربه کرده‌ایم. به یک صفحه سفید یا یک اسپینر خیره شده‌اید و می‌دانید که باید تسلیم شوید و به زندگی خود ادامه دهید، اما 10 ثانیه دیگر هم به آن فرصت می‌دهید، محض احتیاط. بعد از آن 10 ثانیه؟ هیچ چیز.

اما چرا الان تسلیم شوید؟ شما قبلاً وقت خود را سرمایه‌گذاری کرده‌اید، بنابراین دست خالی رفتن اتلاف وقت خواهد بود، بنابراین به انتظار ادامه می‌دهید. در این مرحله می‌خواهید تسلیم شوید، اما می‌دانید که اگر صبر می‌کردید، لحظه‌ای که این کار را می‌کنید، لحظه‌ای است که همه چیز آماده می‌شد.

سرویس ورکرها بخش بارگذاری صفحه را با فراهم کردن امکان ارائه محتوا از حافظه پنهان (cache) حل می‌کنند. اما وقتی صفحه نیاز به ارسال چیزی به سرور دارد، چه می‌شود؟

در حال حاضر، اگر کاربر دکمه‌ی «ارسال» را برای ارسال پیام فشار دهد، باید تا زمان تکمیل آن به یک چرخنده خیره شود. اگر سعی کند از صفحه خارج شود یا تب را ببندد، onbeforeunload برای نمایش پیامی مانند «نه، باید بیشتر به این چرخنده خیره شوی. متاسفم» استفاده می‌کنیم. اگر کاربر ارتباطی نداشته باشد، به کاربر می‌گوییم «متاسفیم، باید بعداً برگردید و دوباره امتحان کنید».

همگام‌سازی پس‌زمینه به شما امکان می‌دهد عملکرد بهتری داشته باشید.

راه حل

ویدیوی زیر Emojoy ، یک نسخه آزمایشی چت فقط با ایموجی را نشان می‌دهد. این یک برنامه وب پیشرفته است و به صورت آفلاین کار می‌کند. این برنامه از پیام‌های فوری و اعلان‌ها استفاده می‌کند و از همگام‌سازی پس‌زمینه نیز بهره می‌برد.

اگر کاربر سعی کند وقتی اتصالش صفر است، پیامی ارسال کند، خوشبختانه، به محض اینکه اتصال برقرار شد، پیام در پس‌زمینه ارسال می‌شود.

امکان ارسال در پس‌زمینه به این شکل، بهبود عملکرد محسوسی را نیز به همراه دارد. برنامه نیازی به ایجاد دردسرهای زیاد در مورد ارسال پیام ندارد، بنابراین می‌تواند پیام را مستقیماً به خروجی اضافه کند.

همگام‌سازی پس‌زمینه از کروم ۴۹ در دسترس است.

نحوه درخواست همگام‌سازی پس‌زمینه

در سبک وب توسعه‌پذیر واقعی، این یک ویژگی سطح پایین است که به شما آزادی عمل می‌دهد تا هر کاری که نیاز دارید انجام دهید. شما درخواست می‌کنید که یک رویداد زمانی که کاربر به اینترنت متصل است، اجرا شود، که اگر کاربر از قبل به اینترنت متصل باشد، بلافاصله اجرا می‌شود. سپس، به آن رویداد گوش می‌دهید و هر کاری که لازم است انجام می‌دهید.

مانند پیام‌رسانی فوری، از یک سرویس ورکر به عنوان هدف رویداد استفاده می‌کند که به آن امکان می‌دهد وقتی صفحه باز نیست، کار کند. برای شروع، برای همگام‌سازی از یک صفحه ثبت‌نام کنید:

// 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 را برگرداند که نشان دهنده موفقیت یا شکست هر کاری است که سعی در انجام آن دارد. اگر برآورده شود، همگام‌سازی کامل شده است. اگر شکست بخورد، همگام‌سازی دیگری برای تلاش مجدد برنامه‌ریزی می‌شود. همگام‌سازی‌های Retry نیز منتظر اتصال می‌مانند و از یک back-off نمایی استفاده می‌کنند.

نام برچسب همگام‌سازی (در مثال «myFirstSync») باید برای یک همگام‌سازی مشخص منحصر به فرد باشد. اگر یک همگام‌سازی را با استفاده از همان برچسب همگام‌سازی در حال انتظار ثبت کنید، با همگام‌سازی موجود ادغام می‌شود. این بدان معناست که می‌توانید هر بار که کاربر پیامی ارسال می‌کند، برای همگام‌سازی «پاک‌سازی صندوق خروجی» ثبت نام کنید، اما اگر در حالت آفلاین ۵ پیام ارسال کند، وقتی آنلاین می‌شود، فقط یک همگام‌سازی دریافت خواهید کرد. برای دریافت ۵ رویداد همگام‌سازی جداگانه، از برچسب‌های منحصر به فرد استفاده کنید.

در اینجا یک دمو وجود دارد که از رویداد همگام‌سازی برای نمایش یک اعلان استفاده می‌کند.

کاربردهای همگام‌سازی پس‌زمینه

در حالت ایده‌آل، شما از آن برای زمان‌بندی ارسال هرگونه داده‌ای که فراتر از عمر صفحه برایتان مهم است، استفاده می‌کنید. پیام‌های چت، ایمیل‌ها، به‌روزرسانی‌های اسناد، تغییرات تنظیمات، آپلود عکس یا هر محتوایی که می‌خواهید به سرور برسد، حتی اگر کاربر از صفحه خارج شود یا تب را ببندد. صفحه می‌تواند این موارد را در یک مخزن "outbox" در indexedDB ذخیره کند و سرویس ورکر آنها را بازیابی و ارسال کند.

اگرچه، می‌توانید از آن برای دریافت داده‌های کوچک نیز استفاده کنید.

نسخه آزمایشی آفلاین ویکی‌پدیا

این نسخه آزمایشی آفلاین ویکی‌پدیا است که من برای بارگذاری فوق‌العاده سریع صفحه ایجاد کردم. از آن زمان، کمی جادوی همگام‌سازی پس‌زمینه به آن اضافه کرده‌ام.

خودتان این را امتحان کنید:

1. مرورگر خود را برای این برگه باز نگه دارید.
2. با حالت هواپیما یا خاموش کردن وای‌فای، آفلاین شوید.
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();
}

اگر سرویس ورکرها یا همگام‌سازی پس‌زمینه در دسترس نیستند، کافیست محتوای صفحه را همانطور که امروز انجام می‌دهید، پست کنید.

حتی اگر به نظر می‌رسد کاربر اتصال خوبی دارد، استفاده از همگام‌سازی پس‌زمینه ارزشش را دارد، زیرا از شما در برابر پیمایش‌ها و بسته شدن تب‌ها در حین ارسال داده محافظت می‌کند.

آینده

هدف ما این است که همگام‌سازی پس‌زمینه را در نیمه اول سال ۲۰۱۶ به نسخه پایدار کروم ارائه دهیم، در حالی که روی نوعی از آن، یعنی «همگام‌سازی پس‌زمینه دوره‌ای»، کار می‌کنیم. با همگام‌سازی پس‌زمینه دوره‌ای، می‌توانید رویدادی را درخواست کنید که بر اساس فاصله زمانی، وضعیت باتری و وضعیت شبکه محدود شده باشد. البته این کار به اجازه کاربر نیاز دارد و همچنین زمان و تعداد دفعات اجرای این رویدادها به مرورگر بستگی دارد. به عبارت دیگر، یک سایت خبری می‌تواند هر ساعت درخواست همگام‌سازی کند، اما مرورگر ممکن است بداند که شما فقط ساعت ۰۷:۰۰ آن سایت را می‌خوانید، بنابراین همگام‌سازی روزانه ساعت ۰۶:۵۰ اجرا می‌شود. این ایده کمی دورتر از همگام‌سازی یک‌باره است، اما در حال تحقق است.

کم‌کم داریم الگوهای موفق اندروید و iOS را به وب می‌آوریم، در حالی که همچنان آنچه وب را عالی می‌کند را حفظ می‌کنیم!