سرویس ورکرها به توسعه‌دهندگان اجازه می‌دهد تا بتوانند بهتر عملیات کشینگ منابع را مدیریت کنند. با استفاده از این سرویس ورکرها کاربران وقفه را حتی در صورتی که به اینترنت متصل نباشند دریافت نخواهند کرد. در این مطلب شیوه‌ای که سرویس ورکرها باعث بهبود کارایی اپلیکیشن‌تان می‌شوند را خواهیم گفت.
برای یادگیری کار با سرویس ورکرها بصورت عملی میتوانید دوره آموزش ایجاد وبسایت PWA یا Progressive Web Apps را در وبسایت راکت مشاهده کنید
سرویس ورکرها چه هستند؟
یک سرویس ورکر در حقیقت نوع خاصی از جاوااسکریپت ورکر است که در پس زمینه مرورگر کاربران اجرا می‌شود. در حقیقت سرویس ورکرها مانند پراکسی در بین اپلیکیشن، مرورگر کاربر و شبکه قرار می‌گیرد. در بین چیزهای دیگر، سرویس ورکرها به اپلیکیشن‌ها در ایجاد دسترسی به صورت آفلاین کمک بسیاری می‌کنند.
سرویس ورکرها به توسعه‌دهندگان کنترل کاملی روی شیوه مدیریت درخواست‌ها را می‌دهند. تعویق در پاسخ به درخواست‌ها باعث می‌شود که کاربران با یک صفحه خالی مواجه شوند، چیزی که شما سعی می‌کنید تا جایی که ممکن است از آن دوری کنید.
چگونه سرویس ورکرها باعث بهبود کارایی می‌شوند؟
همه ما در چنین وضعیتی قرار گرفته‌ایم: آدرس یک وبسایت را وارد می‌کنید و بعد از زدن دکمه Enter با یک پیغام تحت عنوان اینکه نمی‌توانید به این صفحه مراجعه کنید چون ارتباط اینترنتی وجود ندارد مواجه می‌شوید. تا زمانی که به اینترنت متصل نشوید این پیغام قابل حل نیست، البته اگر از کروم استفاده کنید میتوانید بازی دایناسور را پیش ببرید. این سناریو از طریق سرویس ورکرها قابل پیشگیری است.
یکی از فواید بزرگ سرویس ورکرها قابلیت پشتیبانی‌شان از حالت آفلاین در اپلیکیشن‌ها است. در گذشته API AppCache می‌توانست برای فراهم کردن پشتیبانی آفلاین محدود شده استفاده شود، اما سرویس ورکرها حال باعث شدند که AppCache منسوخ شود.
بارگذاری داده‌های محلی که کش شده‌اند همیشه زمان کمتری را نسبت به داده‌هایی که از وب گرفته می‌شوند می‌طلبند. اگر بتوانید که تمام منابع یک اپلیکیشن را کش کنید در نهایت میتوانید زمان بارگذاری منابع را برای بازدیدکنندگان‌تان را بالاتر ببرید. در حالیکه اولین اثر بسیار مهم است اما پیشنهاد تجربه ای بهتر در صورت بازگشت کاربران می‌تواند آن‌ها را وادار به برگشتن بکند.
چگونه سرویس ورکرها کار می‌کنند؟
سرویس ورکرها از وبسایت یا اپلیکیشن مستقل هستند. آن‌ها چرخه حیاتی خود را دارند که میتوانید آن را در تصویر زیر مشاهده کنید:
وقتی که سرویس ورکری را در یک برگه جاوااسکریپت قرار دهید، آن سرویس ورکر توسط مرورگر نصب خواهد شد. بعد از این قسمت یک سرویس ورکر که به خوبی پیکربندی شده باشد شروع به کش کردن منابع ایستا در وبسایت می‌کند. اگر خطاهایی مانع کش شدن فایل‌ها بشوند در نهایت مراحل نصب کردن‌تان شکست می‌خورد و باید دوباره تلاش بکنید.
اگر نصب کردن موفقیت آمیز باشد، سرویس ورکر فعال خواهد شد و کنترل کاملی روی صفحه پیدا خواهد کرد. بعد از فعال سازی سرویس ورکر، برگه‌ای که سرویس ورکر روی آن اعمال شده است باید یک بار نوسازی شود. حال که سرویس ورکر فعال شده است دو حالت بوجود می‌آید، یا اینکه دریافت رویدادها و پیغام‌ها مدیریت می‌شود و یا اینکه فرایند ذخیره در حافظه را خاتمه می‌دهد و به یک مرحله قبل بازمی‌گردد.
پیش‌نیازها برای یک سرویس ورکر
در حالیکه سرویس ورکرها به دلایل بسیاری عالی هستند اما در همین عین می‌توانند یک آسیب‌پذیری نیز باشند. برای جلوگیری از حمله‌های موسوم به man-in-the-middle سرویس ورکرها تنها روی برگه‌هایی فعال می‌شود که HTTPS داشته باشند. بنابراین بعد از فرایند توسعه و پیاده‌سازی در محیط لوکال‌هاست، باید برای محیط وب از HTTPS استفاده کنید.
از نظر پشتیبانی مرورگرها نیز باید بگویم که تقریبا تمام مرورگرها بجز IE و Opera mini از سرویس ورکرها پشتیبانی می‌کنند.
چگونه یک سرویس ورکر را ثبت کنیم؟
سرویس ورکرها به شدت مبتنی بر Javascript Promiseها هستند بنابراین قبل از کار با سرویس ورکرها باید آشنایی خوبی با شیوه کاری Promiseها داشته باشید.
در قدم اول نیاز است که سرویس ورکر را در برگه‌ای که می‌خواهید قرار دهید. میتوانید این کار را در ابتدای فایل جاوااسکریپتی انجام دهید.
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('https://blog.keycdn.com/blog/sw.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
مثال بالا ابتدا وجود سرویس ورکر را در مرورگر بررسی می‌کند. در صورت درست بودن این شرط فایل sw.js (فایل مربوط به سرویس ورکرها) ثبت می‌شود. برای تکمیل این پروسه باید برگه را یک بار دیگر اجرا کنید. اگر از مرورگر کروم استفاده می‌کنید به سراغ ابزارهای توسعه کروم بروید و تب مربوط به سرویس ورکرها را مشاهده کنید. در آنجا میتوانید موفقیت آمیز بودن عملیات ثبت را مشاهده کنید.
چگونه یک سرویس ورکر را نصب کنیم؟
قبل از اینکه سرویس ورکرتا بتواند کاری را انجام دهد باید یک event listener را برای نصب آن تعیین کنید و فایلی که قصد کش شدن‌ش دارید را انتخاب کنید. فایل sw.js را باز کرده و این قطعه کد را به آن اضافه کنید:
var cacheName = 'site-cache-v1';
var assetsToCache = ['asset.js'];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(assetsToCache);
})
);
});
در این مثال فایل‌هایی را در assetsToCache کش می‌کند. میتوانید موارد بیشتری را با استفاده از آرایه کش کنید.
چگونه رویدادها را دریافت (Fetch) کنیم؟
بعد از نصب موفقیت آمیز، سرویس ورکر فعال خواهد شد و قدم بعد برگشت دادن پاسخ‌های کش شده است. برای اینکار میتوانید از قطعه کد زیر استفاده کنید:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
در قطعه کد بالا یک رویداد fetch تعریف شده که در آن ما promiseی با نام caches.math را قرار داده‌ایم. بنابراین متد تلاش می‌کند که تمام کش‌های ایجاد شده توسط سرویس ورکرتان را پیدا کند. اگر انجام چنین کاری مقدور نباشد در نهایت یک درخواست برای اتصال به شبکه ایجاد می‌شود.
بروز نگه داشتن سرویس ورکرها
این مطلب تنها یک آشنایی مقدماتی با سرویس ورکرها بود. برای اینکه بتوانید پشتیبانی آفلاین خوبی را ارائه دهید، باید به صورت مداوم سرویس ورکرهای‌تان را بروزرسانی کنید. در این رابطه Chrome DevTools اطلاعات خوبی را فراهم آورده است.
نکات کشینگ سرویس ورکرها
رویکردهای سنتی کشینگ مرورگر را مجبور می‌ساختند که برای ارتباط با شبکه، URLهای زیرمنبع را نوسازی بکند. اما حال سرویس ورکرها فضایی را برای ذخیره کردن یا کش کردن این زیرمنبع‌ها ارائه می‌دهد، به همین دلیل بدون حتی ارتباط داشتن با شبکه می‌شود به این منابع دسترسی داشت. چگونگی پیاده‌سازی این سرویس ورکرها به معماری وب اپلیکیشن‌تان بستگی دارد. در اینجا میتوانید چند نکته کمکی را مطالعه کنید:
۱. سرویس ورکرها و پاسخ‌های جریان یافته
از آنجایی که در بیشتر سندهای HTML بخش‌هایی قرار دارد که به صورت ایستا ارائه می‌شوند و در واقع داده‌ای در آن‌ها بروزرسانی نمی‌شود پس بهتر است که از پاسخ‌های جریان یافته استفاده کنید. این حالت به شما اجازه می‌دهد که در پاسخ به درخواست‌ها به صورت قطعه‌بندی از کدهای HTML عمل کنید.
در برخی از حالات، برای مثال وقتی که HTML به داده‌های شما وابسته است، ارتباط داشتن با شبکه اجتناب‌ناپذیر است. با این حال استفاده از سرویس ورکرها هنوز هم می‌تواند تجربه کاربری خوبی را به کاربران ارائه دهد. کاربران در این حال المان‌های پایه‌ای را مشاهده می‌کنند و بعد از آن منتظر بارگذاری بقیه موارد از شبکه خواهند بود.
۲. کشینگ HTML ایستا با استفاده از سرویس ورکرها
دور زدن شبکه در صورتی که به صورت کامل از HTML ایستا استفاده می‌کنید بسیار ساده است. تنها کافی‌ست تا سرویس ورکری را ایجاد کنید که در پاسخ به ناوبری وبسایت به شما سندی را ارسال می‌کند. البته باید منطقی non-blocking را نیز در اپلیکیشن‌تان ایجاد کنید، در غیر اینصورت بروزرسانی HTML امکان پذیر نخواهد بود. این کار را میتوانید از طریق روشی با نام stale-while-revalidate انجام دهید:
self.addEventListener('fetch', event = {
if (event.request.mode === 'navigate') {
event.respondWith(async function() {
const normalizedUrl = new URL(event.request.url);
normalizedUrl.search = '';
const fetchResponseP = fetch(normalizedUrl);
const fetchResponseCloneP = fetchResponseP.then(r => r.clone());
event.waitUntil(async function() {
const cache = await caches.open('my-cache-name');
await cache.put(normalizedUrl, await fetchResponseCloneP);
}());
return (await caches.match(normalizedUrl)) || fetchResponseP;
}());
}
});
به عنوان یک جایگزین میتوانید از Workbox برای ساخت سرویس ورکری در جهت کش منابع ایستا استفاده کنید.
۳. سرویس ورکرها و اپلیکیشن‌های تک صفحه‌ای
ادغام سرویس ورکرها با معماری پوسته اپلیکیشن به اپلیکیشن تک صفحه‌ای شما این قابلیت را می‌دهد که در صورت مدیریت درخواست‌های ناوبری از شبکه دوری کنید. یک بار که آن را نصب و فعال کنید قابلیت‌های مدیریت قدرتمندی خواهید داشت. در فایل app-shell.html کد زیر را وارد کنید:
self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate') {
event.respondWith(caches.match('app-shell.html'));
}
});
تمام درخواست‌های ناوبری حال باید از طریق یک نسخه کش شده از HTML بازگردانده شوند. کدهای بالا همچنین شامل یک منطق مسیریابی کلاینت-ساید می‌شود که برای رندر محتوایی براساس URLها انجام می‌شود.
اندازه‌گیری شیوه تاثیرگذاری سرویس ورکرها روی کارایی
در این رابطه باید در نظر بگیرید که اندازه‌گیری نیاز به یک رویکرد مبتنی بر داده است. یکی از مهندسین گوگل در این رابطه مقاله‌ای تحت عنوان «Measuring the Real-world Performance Impact of Service Workers» منتشر کرده که خواندن آن خالی از لطف نیست.
در پایان
سرویس ورکرها توانایی انجام کارهای بسیار دیگری را به نسبت بهبود کارایی وب دارند. برای مثال از آن‌ها می‌توان برای پیاده‌سازی push notificationها استفاده کرد. باید گفت که توانایی‌های مربوط به سرویس ورکرها در حال پیشرفت کردن است و این موضوع به همین زودی‌ها خاتمه پیدا نمی‌کند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید