۱. خوش آمدید
در این آزمایشگاه، شما یک برنامه وب موجود را به صورت آفلاین اجرا خواهید کرد. این اولین آزمایشگاه از مجموعه آزمایشگاههای کد همراه برای کارگاه برنامه وب پیشرونده است. هفت آزمایشگاه کد دیگر در این مجموعه وجود دارد.
آنچه یاد خواهید گرفت
- نوشتن یک سرویس ورکر به صورت دستی
- اضافه کردن یک سرویس ورکر به یک برنامه وب موجود
- از Service Worker و Cache Storage API برای در دسترس قرار دادن منابع به صورت آفلاین استفاده کنید.
آنچه باید بدانید
- HTML و جاوا اسکریپت پایه
آنچه شما نیاز خواهید داشت
- مرورگری که از Service Workers پشتیبانی میکند
۲. آماده شوید
با کپی کردن یا دانلود کد آغازین مورد نیاز برای تکمیل این آزمایشگاه کد شروع کنید:
اگر مخزن را کلون میکنید، مطمئن شوید که در شاخهی starter هستید. فایل زیپ شامل کد آن شاخه نیز هست.
این کدبیس به Node.js نسخه ۱۴ یا بالاتر نیاز دارد. پس از آماده شدن کد، npm ci را از خط فرمان در پوشه کد اجرا کنید تا تمام وابستگیهای مورد نیاز نصب شوند. سپس، دستور npm start اجرا کنید تا سرور توسعه برای codelab شروع به کار کند.
فایل README.md کد منبع، توضیحی برای تمام فایلهای توزیعشده ارائه میدهد. علاوه بر این، فایلهای کلیدی موجود که در طول این آزمایشگاه کد با آنها کار خواهید کرد، در زیر آمده است:
فایلهای کلیدی
-
js/main.js- فایل جاوا اسکریپت برنامه اصلی -
service-worker.js- فایل سرویس ورکر برنامه
۳. تست آفلاین
قبل از ایجاد هرگونه تغییر، بیایید بررسی کنیم که آیا برنامه وب در حال حاضر به صورت آفلاین کار میکند یا خیر. برای انجام این کار، یا رایانه خود را آفلاین کنید و برنامه وب را مجدداً بارگیری کنید، یا اگر از Chrome استفاده میکنید:
- ابزارهای توسعه کروم را باز کنید
- به برگه برنامه بروید
- به بخش Service Workers بروید
- کادر انتخاب آفلاین را علامت بزنید
- صفحه را بدون بستن ابزارهای توسعهدهندگان کروم، رفرش کنید
بعد از اینکه سایت تست شد و در حالت آفلاین با موفقیت بارگذاری نشد، وقت آن رسیده که برخی قابلیتهای آنلاین را اضافه کنید! تیک گزینه آفلاین را بردارید و به مرحله بعدی بروید.
۴. آفلاین باشید
وقت آن است که یک سرویس ورکر پایه اضافه کنیم! این کار در دو مرحله انجام میشود: ثبت سرویس ورکر و ذخیرهسازی منابع.
ثبت نام یک سرویس ورکر
از قبل یک فایل سرویس ورکر خالی وجود دارد، بنابراین برای اطمینان از نمایش تغییرات، بیایید آن را در برنامه خود ثبت کنیم. برای انجام این کار، کد زیر را به بالای js/main.js اضافه کنید:
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
توضیح
این کد، فایل خالی service-worker.js service worker را پس از بارگذاری صفحه و تنها در صورتی که سایت از service workerها پشتیبانی کند، ثبت میکند.
منابع پریکچ
برای اینکه برنامه وب به صورت آفلاین کار کند، مرورگر باید بتواند به درخواستهای شبکه پاسخ دهد و مسیر ارسال آنها را انتخاب کند. برای انجام این کار، کد زیر را به service-worker.js اضافه کنید.
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
حالا، به مرورگر برگردید، تب پیشنمایش خود را ببندید و دوباره آن را باز کنید. باید console.log های مربوط به رویدادهای مختلف در سرویس ورکر را ببینید!
سپس، دوباره آفلاین شوید و سایت را رفرش کنید. باید ببینید که با وجود آفلاین بودن، سایت بارگذاری میشود!
توضیح
در طول رویداد نصب سرویس ورکر، یک حافظه پنهان نامگذاری شده با استفاده از API ذخیرهسازی کش (Cache Storage API) باز میشود. سپس فایلها و مسیرهای مشخص شده در precacheResources با استفاده از متد cache.addAll در حافظه پنهان بارگذاری میشوند. این عمل precaching نامیده میشود زیرا به طور پیشگیرانه مجموعهای از فایلها را در طول زمان نصب کش میکند، برخلاف زمانی که آنها مورد نیاز یا درخواست هستند.
هنگامی که سرویس ورکر سایت را کنترل میکند، منابع درخواستی مانند یک پروکسی از سرویس ورکر عبور میکنند. هر درخواست یک رویداد واکشی را فعال میکند که در این سرویس ورکر، حافظه پنهان را برای یافتن تطابق جستجو میکند، اگر تطابقی وجود داشته باشد، با منبع ذخیره شده پاسخ میدهد. اگر تطابقی وجود نداشته باشد، منبع به طور عادی درخواست میشود.
ذخیره منابع در حافظه پنهان (caching) به برنامه اجازه میدهد تا با اجتناب از درخواستهای شبکه، به صورت آفلاین کار کند. اکنون برنامه میتواند در حالت آفلاین با کد وضعیت ۲۰۰ پاسخ دهد!
۵. تبریک میگویم!
شما یاد گرفتید که چگونه برنامه وب خود را با استفاده از سرویس ورکرها و API ذخیرهسازی کش، آفلاین کنید.
آزمایشگاه کد بعدی در این مجموعه، کار با Workbox است.