برای داشتن تجربه‌ای شبیه برنامه، داده‌های برنامه وب را در پس‌زمینه همگام‌سازی کنید
آیا تاکنون در یکی از موقعیت‌های زیر قرار گرفته‌اید؟
- سوار قطار یا مترو با اتصال‌پذیری ناپایدار یا بدون اتصال‌پذیری
- پس‌از تماشای ویدیوهای زیاد، شرکت مخابراتی شما سرعت را کاهش داده است
- زندگی در کشوری که پهنای باند آن به‌سختی با تقاضا همگام می‌شود
اگر این‌طور است، حتماً از انجام برخی کارها در وب ناامید شده‌اید و تعجب کرده‌اید که چرا برنامه‌های مختص پلاتفرم در این موارد بهتر عمل می‌کنند. برنامه‌های مختص پلاتفرم می‌توانند محتوای جدید مثل مقاله‌های خبری یا اطلاعات آب‌وهوا را ازقبل واکشی کنند. حتی اگر در مترو شبکه وجود نداشته باشد، همچنان می‌توانید اخبار را بخوانید.
«همگام‌سازی دوره‌ای پس‌زمینه» برنامه‌های وب را قادر می‌سازد داده‌ها را به‌صورت دوره‌ای در پس‌زمینه همگام‌سازی کنند و برنامه‌های وب را به عملکرد برنامه‌های مختص پلاتفرم نزدیک‌تر می‌کند.
امتحان کنید
نکات DevTools یک برنامه وب پیشرفته است که از Periodic Background Sync API استفاده می‌کند. «نکات DevTools PWA» هر روز نکات جدید ابزارهای توسعه‌دهنده را واکشی می‌کند و آن‌ها را در حافظه نهان ذخیره می‌کند تا کاربران بتوانند دفعه بعد که برنامه را باز می‌کنند، چه آنلاین باشند چه نباشند، به آن‌ها دسترسی داشته باشند. برای اینکه Periodic Background Sync API دردسترس باشد، حتماً برنامه را نصب کنید.
به کد منبع در GitHub بروید. به‌طور خاص، برنامه همگام‌سازی دوره‌ای را در تابع registerPeriodicSync() ثبت می‌کند. در کد کارمند خدمات است که برنامه به رویداد periodicsync گوش می‌دهد.
مفاهیم و استفاده
همگام‌سازی دوره‌ای پس‌زمینه به شما امکان می‌دهد هنگام راه‌اندازی برنامه وب پیشرفته یا صفحه پشتیبانی‌شده توسط کارگزار سرویس، محتوای تازه نشان دهید. این کار را با بارگیری داده‌ها در پس‌زمینه زمانی که از برنامه یا صفحه استفاده نمی‌شود انجام می‌دهد. این کار از بازآوری محتوای برنامه پس‌از راه‌اندازی درحین مشاهده جلوگیری می‌کند. بهتر از آن، این ویژگی از نمایش گردونه محتوا قبل‌از بازآوری توسط برنامه جلوگیری می‌کند.
بدون همگام‌سازی پس‌زمینه‌ای دوره‌ای، برنامه‌های وب باید از روش‌های جایگزین برای بارگیری داده‌ها استفاده کنند. نمونه رایج آن استفاده از اعلان لحظه‌ای برای فعال کردن کارگر سرویس است. کاربر با پیامی مثل «داده‌های جدید دردسترس است» وقفه ایجاد می‌شود. به‌روزرسانی داده‌ها درواقع یک اثر جانبی است. همچنان این گزینه را دارید که از اعلان‌های لحظه‌ای برای به‌روزرسانی‌های واقعاً مهم، مانند اخبار فوری مهم، استفاده کنید.
همگام‌سازی دوره‌ای پس‌زمینه را می‌توان با همگام‌سازی پس‌زمینه اشتباه گرفت. اگرچه نام‌های مشابهی دارند، موارد استفاده آن‌ها متفاوت است. ازجمله موارد دیگر، همگام‌سازی پس‌زمینه‌ای معمولاً برای ارسال مجدد داده‌ها به سرور زمانی که درخواست قبلی ناموفق بوده است استفاده می‌شود.
درست کردن مشارکت کاربر
اگر همگام‌سازی دوره‌ای پس‌زمینه به‌درستی انجام نشود، می‌تواند باعث هدر رفتن منابع کاربران شود. Chrome قبل‌از انتشار آن، آن را در دوره آزمایشی قرار داد تا مطمئن شود درست است. این بخش برخی‌از تصمیمات طراحی Chrome را توضیح می‌دهد که برای مفیدتر کردن این ویژگی اتخاذ شده است.
اولین تصمیم طراحی Chrome این است که برنامه وب فقط پس‌از اینکه فرد آن را در دستگاهش نصب کرد و به‌عنوان برنامه‌ای متمایز راه‌اندازی کرد می‌تواند از همگام‌سازی پس‌زمینه‌ای دوره‌ای استفاده کند. همگام‌سازی دوره‌ای پس‌زمینه در بافت برگه معمولی در Chrome دردسترس نیست.
علاوه‌براین، ازآنجایی‌که Chrome نمی‌خواهد برنامه‌های وب استفاده‌نشده یا برنامه‌هایی که به‌ندرت استفاده می‌شوند بدون دلیل
باتری یا داده مصرف کنند، Chrome همگام‌سازی پس‌زمینه‌ای دوره‌ای را به‌گونه‌ای طراحی کرده است که
توسعه‌دهندگان باید با ارائه ارزش به کاربرانشان آن را به‌دست آورند. به‌طور مشخص،
Chrome از امتیاز تعامل سایت
(about://site-engagement/) برای تعیین اینکه آیا و هر چند وقت یک‌بار همگام‌سازی‌های پس‌زمینه‌ای دوره‌ای می‌تواند
برای یک برنامه وب معین اتفاق بیفتد استفاده می‌کند. به عبارت دیگر، رویداد periodicsync اصلاً راه‌اندازی نخواهد شد مگر اینکه امتیاز تعامل
بزرگ‌تر از صفر باشد، و مقدار آن بر دفعاتی که رویداد periodicsync راه‌اندازی می‌شود تأثیر می‌گذارد. این کار تضمین می‌کند که تنها برنامه‌هایی که در پس‌زمینه همگام‌سازی می‌شوند برنامه‌هایی باشند که به‌طور فعال از آن‌ها استفاده می‌کنید.
همگام‌سازی دوره‌ای پس‌زمینه با میاناهای برنامه کاربردی و رویه‌های موجود در پلاتفرم‌های پرطرفدار شباهت‌هایی دارد. برای مثال، همگام‌سازی پس‌زمینه‌ای یک‌باره و همچنین اعلان‌های لحظه‌ای به منطق برنامه وب اجازه می‌دهد پس‌از اینکه فرد صفحه را بسته است، کمی بیشتر (ازطریق کارگزار سرویس) فعال بماند. در اکثر پلاتفرم‌ها، نصب برنامه‌هایی که به‌طور دوره‌ای در پس‌زمینه به شبکه دسترسی پیدا می‌کنند برای ارائه تجربه کاربری بهتر برای اقداماتی مثل به‌روزرسانی‌های مهم، پیش‌دریافت محتوا، و همگام‌سازی داده‌ها، رایج است. به‌همین ترتیب، همگام‌سازی پس‌زمینه‌ای دوره‌ای نیز عمر منطق برنامه وب را افزایش می‌دهد تا در دوره‌های منظم برای چند دقیقه در هر بار اجرا شود.
اگر مرورگر اجازه دهد این اتفاق به‌طور مکرر و بدون محدودیت رخ دهد، می‌تواند منجر به نگرانی‌هایی درباره حریم خصوصی شود. در اینجا نحوه رسیدگی Chrome به این خطر برای همگام‌سازی دوره‌ای پس‌زمینه آمده است:
- فعالیت همگام‌سازی پس‌زمینه فقط در شبکه‌ای که دستگاه قبلاً به آن متصل شده است انجام می‌شود. Chrome توصیه می‌کند فقط به شبکه‌هایی که توسط طرف‌های مورداعتماد اداره می‌شوند متصل شوید.
- همانند همه ارتباطات اینترنتی، همگام‌سازی پس‌زمینه‌ای دوره‌ای نشانی‌های IP مشتری، سروری که با آن صحبت می‌کند، و نام سرور را آشکار می‌کند. برای کاهش این میزان مواجهه به تقریباً همان میزانی که اگر برنامه فقط وقتی در پیش‌زمینه بود همگام‌سازی می‌شد، مرورگر تواتر همگام‌سازی‌های پس‌زمینه برنامه را محدود می‌کند تا با میزان استفاده فرد از آن برنامه هماهنگ شود. اگر فرد دیگر به‌طور مکرر با برنامه تعامل نداشته باشد، همگام‌سازی پس‌زمینه دوره‌ای دیگر راه‌اندازی نخواهد شد. این یک بهبود خالص نسبت به وضعیت موجود در برنامه‌های مختص پلاتفرم است.
چه زمانی می‌توان از آن استفاده کرد؟
قوانین استفاده بسته به مرورگر متفاوت است. برای خلاصه کردن از قبل، Chrome شرایط زیر را برای همگام‌سازی دوره‌ای پس‌زمینه اعمال می‌کند:
- امتیاز تعامل کاربر خاص.
- وجود شبکه قبلاً استفاده‌شده.
زمان‌بندی همگام‌سازی‌ها تحت کنترل توسعه‌دهندگان نیست. بسامد همگام‌سازی با میزان استفاده از برنامه هماهنگ خواهد بود. (توجه داشته باشید که برنامه‌های مختص پلاتفرم این کار را انجام نمی‌دهند.) این ویژگی وضعیت اتصال‌پذیری و توان دستگاه را نیز درنظر می‌گیرد.
چه زمانی باید از آن استفاده شود؟
وقتی کارگزار سرویس شما برای رسیدگی به رویداد periodicsync بیدار می‌شود، فرصت درخواست داده را دارید، اما ملزم به انجام این کار نیستید. هنگام رسیدگی به رویداد، باید شرایط شبکه و فضای ذخیره‌سازی دردسترس را درنظر بگیرید و مقادیر مختلفی از داده‌ها را در پاسخ بارگیری کنید. می‌توانید از
منابع زیر برای کمک استفاده کنید:
اجازه‌ها
پس‌از نصب کارگزار سرویس، از Permissions
API برای پُرسمان کردن
برای periodic-background-sync استفاده کنید. این کار را می‌توانید از زمینه پنجره یا کارگر سرویس انجام دهید.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
ثبت همگام‌سازی دوره‌ای
همان‌طور که قبلاً گفته شد، همگام‌سازی دوره‌ای پس‌زمینه به کارگر سرویس نیاز دارد. بااستفاده از ServiceWorkerRegistration.periodicSync،
PeriodicSyncManager را بازیابی کن و با
register() تماس بگیر. برای ثبت کردن، هم برچسب و هم حداقل
فاصله همگام‌سازی (minInterval) لازم است. برچسب همگام‌سازی ثبت‌شده را
شناسایی می‌کند تا بتوان چندین همگام‌سازی را ثبت کرد. در مثال زیر، نام برچسب
'content-sync' و minInterval یک روز است.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
تأیید ثبت‌نام
برای بازیابی آرایه‌ای از برچسب‌های ثبت، با periodicSync.getTags() تماس بگیرید. مثال زیر از نام‌های برچسب برای تأیید فعال بودن به‌روزرسانی حافظه نهان استفاده می‌کند تا از به‌روزرسانی مجدد جلوگیری کند.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
همچنین می‌توانید از getTags() برای نمایش فهرست ثبت‌نام‌های فعال در صفحه تنظیمات برنامه وب استفاده کنید تا کاربران بتوانند انواع خاصی از به‌روزرسانی‌ها را فعال یا غیرفعال کنند.
پاسخ دادن به رویداد همگام‌سازی دوره‌ای پس‌زمینه
برای پاسخ دادن به رویداد همگام‌سازی دوره‌ای پس‌زمینه، periodicsync رویداد
مدیری به کارگر سرویس خود اضافه کنید. شیء event که به آن ارسال می‌شود حاوی پارامتر tag مطابق با مقدار استفاده‌شده درطول ثبت‌نام خواهد بود. برای مثال، اگر همگام‌سازی پس‌زمینه‌ای دوره‌ای با نام 'content-sync' ثبت شده باشد،
event.tag برابر با 'content-sync' خواهد بود.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
لغو ثبت همگام‌سازی
برای پایان دادن به همگام‌سازی ثبت‌شده، با نام همگام‌سازی‌ای که می‌خواهید ثبت آن را لغو کنید با periodicSync.unregister() تماس بگیرید.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
میانه‌ها
در اینجا خلاصه‌ای از میاناهای ارائه‌شده توسط Periodic Background Sync API ارائه شده است.
PeriodicSyncEvent. در زمانی که مرورگر انتخاب می‌کند به کنترل‌کننده رویدادServiceWorkerGlobalScope.onperiodicsyncمنتقل شد.PeriodicSyncManager. همگام‌سازی‌های دوره‌ای را ثبت و لغو ثبت می‌کند و برچسب‌هایی برای همگام‌سازی‌های ثبت‌شده ارائه می‌دهد. نمونه‌ای از این کلاس را از دارایی ServiceWorkerRegistration.periodicSync بازیابی کنید.ServiceWorkerGlobalScope.onperiodicsync. کنترل‌کننده‌ای را برای دریافتPeriodicSyncEventثبت می‌کند.-
ServiceWorkerRegistration.periodicSync. مرجعی بهPeriodicSyncManagerبرمی‌گرداند.
مثال
بخش‌های زیر چند نمونه از استفاده از API «همگام‌سازی دوره‌ای پس‌زمینه» را نشان می‌دهد.
به‌روزرسانی محتوا
در مثال زیر از همگام‌سازی دوره‌ای پس‌زمینه برای بارگیری و ذخیره کردن
مقالات به‌روز برای سایت خبری یا وبلاگ استفاده می‌شود. به نام برچسب توجه کنید که نوع همگام‌سازی را نشان می‌دهد ('update-articles'). فراخوانی به updateArticles() در event.waitUntil() پیچیده شده است تا کارگر سرویس قبل‌از بارگیری و ذخیره مقاله‌ها خاتمه نیابد.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
افزودن همگام‌سازی دوره‌ای پس‌زمینه به برنامه وب موجود
این مجموعه تغییرات برای افزودن همگام‌سازی دوره‌ای پس‌زمینه به یک برنامه وب پیشرو موجود لازم بود. این مثال شامل تعدادی از عبارات گزارش‌گیری مفید است که وضعیت همگام‌سازی پس‌زمینه‌ای دوره‌ای در برنامه وب را شرح می‌دهد.
اشکال‌زدایی Periodic Background Sync API
درحین آزمایش محلی، دریافت نمای سرتاسر از همگام‌سازی دوره‌ای پس‌زمینه می‌تواند چالش‌برانگیز باشد. اطلاعات مربوط به ثبت‌های فعال، فاصله‌های زمانی تقریبی همگام‌سازی، و گزارش‌های رویدادهای همگام‌سازی گذشته هنگام اشکال‌زدایی رفتار برنامه وب شما زمینه ارزشمندی فراهم می‌کند. خوشبختانه، می‌توانید همه این اطلاعات را ازطریق ویژگی آزمایشی در Chrome DevTools پیدا کنید.
ضبط فعالیت محلی
بخش همگام‌سازی دوره‌ای پس‌زمینه در «ابزارهای توسعه‌دهندگان» حول رویدادهای کلیدی در چرخه حیات همگام‌سازی دوره‌ای پس‌زمینه سازمان‌دهی شده است: ثبت همگام‌سازی، انجام همگام‌سازی پس‌زمینه، و لغو ثبت. برای دریافت اطلاعات درباره این رویدادها، روی شروع ضبط کلیک کنید.
حین ضبط، ورودی‌ها در DevTools متناظر با رویدادها ظاهر می‌شوند و زمینه و فراداده برای هرکدام ثبت می‌شود.
پس‌از فعال کردن ضبط برای یک بار، ضبط تا سه روز فعال باقی می‌ماند و به DevTools امکان می‌دهد اطلاعات اشکال‌زدایی محلی را درباره همگام‌سازی‌های پس‌زمینه‌ای که ممکن است حتی ساعت‌ها بعد اتفاق بیفتد ضبط کند.
شبیه‌سازی رویدادها
اگرچه ضبط فعالیت پس‌زمینه می‌تواند مفید باشد، اما مواقعی وجود دارد که می‌خواهید
کارپرداز periodicsync خود را بلافاصله آزمایش کنید، بدون اینکه منتظر بمانید رویدادی در آهنگ عادی خود فعال شود.
می‌توانید این کار را بااستفاده از بخش کارکنان خدمات در پانل «برنامه» در Chrome DevTools انجام دهید. فیلد همگام‌سازی دوره‌ای به شما امکان می‌دهد برچسبی برای رویداد ارائه کنید تا از آن استفاده کند و آن را هر چند بار که می‌خواهید راه‌اندازی کند.
استفاده از میانای DevTools
بخش همگام‌سازی دوره‌ای پس‌زمینه را در پانل DevTools Application (برنامه) خواهید دید.
