همگام‌سازی پس‌زمینه یک API وب جدید است که به شما امکان می‌دهد اقدامات را تا زمانی که کاربر اتصال پایداری داشته باشد به تعویق بیندازید. این تضمین می کند که هر چیزی که کاربر می خواهد ارسال کند در واقع ارسال می شود.
مشکل
اینترنت مکانی عالی برای اتلاف وقت است. بدون اتلاف وقت در اینترنت، نمی‌دانیم که گربه‌ها از گل‌ها بیزارند ، آفتاب‌پرست‌ها عاشق حباب هستند ، یا اینکه اریک بیدلمن خودمان یک قهرمان گلف با توپ در اواخر دهه 90 است.
اما گاهی اوقات، فقط گاهی اوقات، ما به دنبال تلف کردن زمان نیستیم. تجربه کاربری مورد نظر بیشتر شبیه به این است:
- گوشی از جیب.
- رسیدن به هدف جزئی
- گوشی در جیب.
- زندگی را از سر بگیر
متأسفانه این تجربه اغلب به دلیل اتصال ضعیف شکسته می شود. همه ما آنجا بوده ایم. شما به یک صفحه سفید یا یک اسپینر خیره شده‌اید و می‌دانید که باید تسلیم شوید و به زندگی خود ادامه دهید، اما برای هر موردی 10 ثانیه دیگر به آن فرصت می‌دهید. بعد از اون 10 ثانیه؟ هیچی.
اما چرا اکنون تسلیم شوید؟ شما قبلاً زمان گذاشته‌اید، بنابراین دوری بدون هیچ چیز اتلاف خواهد بود، بنابراین به انتظار ادامه می‌دهید. در این مرحله می‌خواهید تسلیم شوید، اما می‌دانید که ثانیه‌ای که این کار را انجام می‌دهید، دومین لحظه قبل از بارگیری همه چیز است، اگر فقط صبر می‌کردید.
کارکنان خدمات بخش بارگذاری صفحه را با اجازه دادن به شما برای ارائه محتوا از حافظه پنهان حل می کنند. اما در مورد زمانی که صفحه نیاز به ارسال چیزی به سرور دارد، چطور؟
در حال حاضر، اگر کاربر روی پیامی "ارسال" را بزند، باید به یک اسپینر خیره شود تا آن را کامل کند. اگر بخواهند برگه را دور بزنند یا برگه را ببندند، ما از onbeforeunload برای نمایش پیامی مانند "نه، من نیاز دارم که بیشتر به این چرخنده خیره شوید. متاسفم" استفاده می کنیم. اگر کاربر اتصالی نداشته باشد، به کاربر می گوییم "متأسفم، شما باید بعداً برگردید و دوباره امتحان کنید".
این آشغال است. همگام‌سازی پس‌زمینه به شما امکان می‌دهد بهتر عمل کنید.
راه حل
ویدیوی زیر Emojoy را نشان می‌دهد، یک نسخه نمایشی چت فقط برای شکلک. این یک برنامه وب پیشرفته است و ابتدا به صورت آفلاین کار می کند. این برنامه از پیام های فشار و اعلان ها استفاده می کند و از همگام سازی پس زمینه استفاده می کند.
اگر کاربر سعی کند زمانی که اتصال صفر دارد پیامی ارسال کند، خوشبختانه پس از دریافت اتصال، پیام در پس‌زمینه ارسال می‌شود.
از مارس ۲۰۱۶، همگام‌سازی پس‌زمینه در کروم از نسخه ۴۹ و بالاتر در دسترس است. با دنبال کردن مراحل زیر می توانید عملکرد آن را مشاهده کنید:
- 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() باید وعده ای را برگرداند که نشان دهنده موفقیت/شکست هر کاری است که می خواهد انجام دهد. اگر انجام شود، همگام سازی کامل شده است. اگر ناموفق بود، همگام‌سازی دیگری برای امتحان مجدد برنامه‌ریزی می‌شود. سعی مجدد همگام‌سازی‌ها نیز برای اتصال منتظر می‌مانند و از یک عقب‌نشینی نمایی استفاده می‌کنند.
نام تگ همگام‌سازی («myFirstSync» در مثال بالا) باید برای یک همگام‌سازی خاص منحصربه‌فرد باشد. اگر برای همگام‌سازی با استفاده از همان برچسب همگام‌سازی در انتظار ثبت نام کنید، با همگام‌سازی موجود ادغام می‌شود. این بدان معناست که می‌توانید هر بار که کاربر پیامی ارسال می‌کند، برای همگام‌سازی «صندوق خروجی پاک» ثبت‌نام کنید، اما اگر در حالت آفلاین، 5 پیام ارسال کند، وقتی آنلاین شد، فقط یک همگام‌سازی دریافت خواهید کرد. اگر می خواهید 5 رویداد همگام سازی جداگانه داشته باشید، فقط از برچسب های منحصر به فرد استفاده کنید!
در اینجا یک نسخه ی نمایشی ساده است که حداقل ها را انجام می دهد. از رویداد همگام سازی برای نمایش اعلان استفاده می کند.
برای چه چیزی می توانم از همگام سازی پس زمینه استفاده کنم؟
در حالت ایده‌آل، می‌توانید از آن برای برنامه‌ریزی ارسال داده‌هایی که بیشتر از عمر صفحه به آن اهمیت می‌دهید استفاده کنید. پیام‌های چت، ایمیل‌ها، به‌روزرسانی‌های سند، تغییرات تنظیمات، آپلود عکس... هر چیزی که می‌خواهید به سرور دسترسی پیدا کنید، حتی اگر کاربر برگه را ببندد. صفحه می تواند اینها را در یک فروشگاه "صندوق خروجی" در indexedDB ذخیره کند، و کارگر سرویس آنها را بازیابی کرده و ارسال می کند.
اگرچه، شما همچنین می توانید از آن برای واکشی بیت های کوچک داده استفاده کنید ...
دموی دیگه!
این نسخه آزمایشی آفلاین ویکی‌پدیا است که من برای بارگیری صفحه Supercharging ایجاد کردم. من از آن زمان مقداری جادوی همگام سازی پس زمینه را به آن اضافه کرده ام.
خودتان این را امتحان کنید. مطمئن شوید که از Chrome 49 و بالاتر استفاده می کنید و سپس:
- به هر مقاله ای، شاید Chrome بروید.
- آفلاین شوید (یا با استفاده از حالت هواپیما یا به یک ارائه دهنده تلفن همراه وحشتناک مانند من بپیوندید).
- روی پیوند به مقاله دیگر کلیک کنید.
- باید به شما گفته شود که صفحه بارگیری نشد (اگر بارگذاری صفحه کمی طول بکشد، این نیز ظاهر می شود).
- با اعلان ها موافقت کنید.
- مرورگر را ببندید.
- آنلاین شوید
- هنگامی که مقاله دانلود می شود، ذخیره می شود و آماده مشاهده است، به شما اطلاع داده می شود!
با استفاده از این الگو، کاربر می‌تواند گوشی خود را در جیب خود بگذارد و به زندگی خود ادامه دهد، زیرا بداند که تلفن وقتی خواسته‌اش را دریافت می‌کند به او هشدار می‌دهد.
مجوزها
دموهایی که من نشان داده‌ام از اعلان‌های وب استفاده می‌کنند که به مجوز نیاز دارند، اما خود همگام‌سازی پس‌زمینه اینطور نیست.
رویدادهای همگام‌سازی اغلب زمانی تکمیل می‌شوند که کاربر صفحه‌ای در سایت باز دارد، بنابراین نیاز به اجازه کاربر تجربه ضعیفی خواهد بود. در عوض، ما زمان ثبت و راه‌اندازی همگام‌سازی‌ها را برای جلوگیری از سوء استفاده محدود می‌کنیم. به عنوان مثال:
- فقط زمانی می توانید برای یک رویداد همگام سازی ثبت نام کنید که کاربر پنجره ای به سایت باز داشته باشد.
- زمان اجرای رویداد محدود است، بنابراین نمی‌توانید از آنها برای پینگ کردن یک سرور در هر x ثانیه، استخراج بیت کوین یا هر چیز دیگری استفاده کنید.
البته، این محدودیت ها ممکن است بر اساس استفاده در دنیای واقعی کاهش یا تشدید شوند.
افزایش پیشرونده
مدتی طول می کشد تا همه مرورگرها از همگام سازی پس زمینه پشتیبانی کنند، به خصوص که 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();
}
اگر کارکنان خدمات یا همگام‌سازی پس‌زمینه در دسترس نیستند، فقط محتوای صفحه را مانند امروز پست کنید.
استفاده از همگام‌سازی پس‌زمینه حتی اگر به نظر می‌رسد کاربر اتصال خوبی دارد، ارزش دارد، زیرا از شما در برابر ناوبری و بسته شدن برگه‌ها در طول ارسال داده محافظت می‌کند.
آینده
هدف ما این است که در نیمه اول سال 2016 همگام‌سازی پس‌زمینه را به نسخه پایدار کروم ارسال کنیم، در حالی که روی یک نوع «همگام‌سازی دوره‌ای پس‌زمینه» کار می‌کنیم. با همگام‌سازی دوره‌ای پس‌زمینه، می‌توانید رویدادی را درخواست کنید که با فاصله زمانی، وضعیت باتری و وضعیت شبکه محدود شده باشد. البته این به اجازه کاربر نیاز دارد، همچنین زمان و تعداد دفعات پخش این رویدادها به مرورگر بستگی دارد. به عبارت دیگر، یک سایت خبری می‌تواند هر ساعت درخواست همگام‌سازی کند، اما مرورگر ممکن است بداند که شما آن سایت را فقط در ساعت 07:00 می‌خوانید، بنابراین همگام‌سازی روزانه در ساعت 06:50 فعال می‌شود. این ایده کمی دورتر از همگام سازی یکباره است، اما در راه است.
ما کم کم الگوهای موفقی را از Android و iOS به وب می آوریم، در حالی که همچنان آنچه را که وب را عالی می کند حفظ می کنیم!