اسکریپت نویسی کارگر خدمات

این کد لبه بخشی از دوره آموزشی Developing Progressive Web Apps است که توسط تیم آموزشی Google Developers ایجاد شده است. اگر به ترتیب روی کدها کار کنید، بیشترین ارزش را از این دوره خواهید گرفت.

برای جزئیات کامل در مورد دوره، به نمای کلی توسعه برنامه های وب پیشرفته مراجعه کنید .

توجه: در این دوره از اصطلاحات "کدلب" و "آزمایشگاه" به جای یکدیگر استفاده می شود.

مقدمه

این آزمایشگاه شما را در ایجاد یک سرویسکار ساده راهنمایی می کند و چرخه زندگی کارگر خدماتی را توضیح می دهد.

چیزی که یاد خواهید گرفت

• یک اسکریپت اولیه Service Worker ایجاد کنید، آن را نصب کنید و اشکال زدایی ساده را انجام دهید

آنچه شما باید بدانید

• جاوا اسکریپت و HTML پایه
• مفاهیم و نحو اولیه ES2015 Promises
• نحوه فعال کردن کنسول توسعه دهنده

آنچه شما قبل از شروع نیاز دارید

• کامپیوتر با دسترسی ترمینال/پوسته
• اتصال به اینترنت
• مرورگری که از کارگران خدمات پشتیبانی می کند
• یک ویرایشگر متن

مخزن pwa-training-labs را از github دانلود یا کلون کنید و در صورت نیاز نسخه LTS Node.js را نصب کنید.

به دایرکتوری service-worker-lab/app/ بروید و یک سرور توسعه محلی راه اندازی کنید:

cd service-worker-lab/app
npm install
node server.js

شما می توانید سرور را در هر زمان با Ctrl-c خاتمه دهید.

مرورگر خود را باز کنید و به localhost:8081/ بروید.

توجه: همه سرویس‌کاران را لغو ثبت کنید و تمام کش‌های سرویس‌کار را برای لوکال هاست پاک کنید تا با آزمایشگاه تداخل نداشته باشند. در Chrome DevTools، می‌توانید با کلیک کردن بر روی پاک کردن داده‌های سایت از بخش پاک کردن فضای ذخیره‌سازی تب Application به این مهم دست یابید.

پوشه service-worker-lab/app/ را در ویرایشگر متن دلخواه خود باز کنید. app/ پوشه جایی است که آزمایشگاه را می سازید.

این پوشه شامل:

• below/another.html ، js/another.js ، js/other.js ، و other.html منابع نمونه ای هستند که ما از آنها برای آزمایش با محدوده سرویس دهنده استفاده می کنیم.
• styles/ folder حاوی شیوه نامه های آبشاری برای این آزمایشگاه است
• پوشه test/ حاوی فایل هایی برای آزمایش پیشرفت شما است
• index.html صفحه اصلی HTML برای نمونه سایت/برنامه ما است
• service-worker.js فایل جاوا اسکریپتی است که برای ایجاد سرویس‌کار ما استفاده می‌شود
• package.json و package-lock.json بسته های گره مورد استفاده در این پروژه را ردیابی می کنند
• server.js یک سرور اکسپرس ساده است که ما از آن برای میزبانی برنامه خود استفاده می کنیم

service-worker.js را در ویرایشگر متن خود باز کنید. توجه داشته باشید که فایل خالی است. ما هنوز هیچ کدی را برای اجرا در سرویس‌کار اضافه نکرده‌ایم.

index.html در ویرایشگر متن خود باز کنید.

در داخل تگ‌های <script> ، کد زیر را برای ثبت سرویس‌کار اضافه کنید:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('Service Worker is registered', registration);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

اسکریپت را ذخیره کنید و صفحه را تازه کنید. کنسول باید پیامی برگرداند که نشان می‌دهد سرویس‌کار ثبت‌شده است. در Chrome، می‌توانید با باز کردن DevTools (Control + Shift + I در ویندوز و لینوکس، یا ⌘ + alt + I در Mac)، روی برگه Application و سپس کلیک کردن روی گزینه Service Workers ، بررسی کنید که یک سرویس‌کار ثبت شده است. شما باید چیزی شبیه به زیر ببینید:

اختیاری : سایت را در یک مرورگر پشتیبانی نشده باز کنید و بررسی کنید که چک پشتیبانی مشروط کار می کند.

توضیح

کد بالا فایل service-worker.js را به عنوان Service Worker ثبت می کند. ابتدا بررسی می کند که آیا مرورگر از کارگران سرویس پشتیبانی می کند یا خیر. این باید هر بار که یک سرویس دهنده ثبت نام می کنید انجام شود زیرا ممکن است برخی از مرورگرها از سرویس دهنده ها پشتیبانی نکنند. سپس کد سرویس‌کار را با استفاده از روش register API ServiceWorkerContainer که در رابط Navigator پنجره موجود است، ثبت می‌کند.

registration navigator.serviceWorker.register(...) در صورت عدم ثبت نام، قول رد می شود.

تغییرات در وضعیت کارمند خدمات باعث ایجاد رویدادهایی در سرویس‌کار می‌شود.

شنوندگان رویداد را اضافه کنید

service-worker.js را در ویرایشگر متن خود باز کنید.

شنوندگان رویداد زیر را به سرویس‌کار اضافه کنید:

self.addEventListener('install', event => {
  console.log('Service worker installing...');
  // Add a call to skipWaiting here
});

self.addEventListener('activate', event => {
  console.log('Service worker activating...');
});

فایل را ذخیره کنید.

به صورت دستی ثبت نام سرویس کارگر را لغو کنید و صفحه را بازخوانی کنید تا سرویس کارگر به روز شده را نصب و فعال کنید. گزارش کنسول باید نشان دهد که سرویس کار جدید ثبت، نصب و فعال شده است.

توجه: گزارش ثبت نام ممکن است با سایر گزارش ها (نصب و فعال سازی) نامرتب ظاهر شود. سرویس‌کار همزمان با صفحه اجرا می‌شود، بنابراین نمی‌توانیم ترتیب گزارش‌ها را تضمین کنیم (گزارش ثبت نام از صفحه می‌آید، در حالی که گزارش‌های نصب و فعال‌سازی از طرف سرویس‌کار می‌آیند). با این حال، نصب، فعال‌سازی و سایر رویدادهای Service Worker به ترتیب مشخصی در داخل سرویس‌کار رخ می‌دهند و همیشه باید به ترتیب مورد انتظار ظاهر شوند.

توضیح

سرویس‌کار یک رویداد install در پایان ثبت‌نام منتشر می‌کند. در کد بالا، یک پیام در داخل شنونده رویداد install ثبت شده است، اما در یک برنامه دنیای واقعی، این مکان مناسبی برای ذخیره دارایی های ثابت است.

وقتی یک سرویس‌کار ثبت‌نام می‌شود، مرورگر تشخیص می‌دهد که سرویس‌گر جدید است (یا به این دلیل که با سرویس‌کار نصب‌شده قبلی متفاوت است یا به این دلیل که سرویس‌کار ثبت‌شده‌ای برای این سایت وجود ندارد). اگر سرویس‌کار جدید باشد (همانطور که در این مورد وجود دارد)، مرورگر آن را نصب می‌کند.

سرویس‌کار هنگامی که صفحه را کنترل می‌کند، یک رویداد activate را منتشر می‌کند. کد بالا یک پیام را در اینجا ثبت می کند، اما این رویداد اغلب برای به روز رسانی کش ها استفاده می شود.

فقط یک سرویس‌کار می‌تواند در یک زمان برای یک محدوده معین فعال باشد (به بررسی محدوده سرویس‌کار مراجعه کنید)، بنابراین تا زمانی که سرویس‌کار موجود دیگر در حال استفاده نباشد، سرویس‌کار تازه نصب‌شده فعال نمی‌شود. به همین دلیل است که تمام صفحاتی که توسط یک سرویس‌کار کنترل می‌شوند باید قبل از اینکه یک سرویس‌کار جدید بتواند مسئولیت را بر عهده بگیرد، بسته شوند. از آنجایی که ما سرویس‌کار موجود را لغو ثبت کردیم، سرویس‌کار جدید بلافاصله فعال شد.

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

توجه: همچنین می‌توانید با استفاده از ابزار توسعه‌دهنده برخی از مرورگرها و برنامه‌نویسی با skipWaiting() که در بخش 3.4 در مورد آن صحبت می‌کنیم، یک سرویس‌کار جدید را به صورت دستی فعال کنید.

کارگر سرویس را به روز کنید

نظر زیر را در هر جایی از service-worker.js اضافه کنید:

// I'm a new service worker

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

تمام صفحات مرتبط با سرویس دهنده را ببندید. سپس، localhost:8081/ را دوباره باز کنید. گزارش کنسول باید نشان دهد که سرویس‌کار جدید اکنون فعال شده است.

توجه: اگر نتایج غیرمنتظره ای دریافت می کنید، مطمئن شوید که حافظه پنهان HTTP شما در ابزارهای توسعه دهنده غیرفعال است.

توضیح

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

رد شدن از مرحله انتظار

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

در service-worker.js ، یک تماس به skipWaiting در شنونده رویداد install اضافه کنید:

self.skipWaiting();

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

توضیح

متد skipWaiting() به یک سرویس‌کار اجازه می‌دهد تا به محض اتمام نصب، فعال شود. شنونده رویداد install مکان معمولی برای قرار دادن فراخوان skipWaiting() است، اما می توان آن را در هر جایی در طول یا قبل از مرحله انتظار فراخوانی کرد. برای اطلاعات بیشتر در مورد زمان و نحوه استفاده skipWaiting() به این مستند مراجعه کنید. برای بقیه آزمایشگاه، اکنون می‌توانیم کد سرویس‌کار جدید را بدون لغو ثبت نام دستی سرویس‌کار آزمایش کنیم.

برای اطلاعات بیشتر

• چرخه عمر کارگر خدماتی

کارکنان خدمات می توانند به عنوان یک پروکسی بین برنامه وب شما و شبکه عمل کنند.

بیایید یک شنونده واکشی برای رهگیری درخواست‌های دامنه خود اضافه کنیم.

کد زیر را به service-worker.js اضافه کنید:

self.addEventListener('fetch', event => {
  console.log('Fetching:', event.request.url);
});

اسکریپت را ذخیره کنید و صفحه را بازخوانی کنید تا سرویس کارگر به روز شده را نصب و فعال کنید.

کنسول را بررسی کنید و مشاهده کنید که هیچ رویداد واکشی ثبت نشده است. صفحه را رفرش کنید و دوباره کنسول را چک کنید. این بار باید رویدادهای واکشی صفحه و دارایی های آن (مانند CSS) را ببینید.

روی پیوندهای صفحه دیگر ، صفحه دیگر و برگشت کلیک کنید.

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

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

توضیح

سرویس‌کار برای هر درخواست HTTP که توسط مرورگر در محدوده آن است، یک رویداد واکشی دریافت می‌کند. شی رویداد fetch حاوی درخواست است. گوش دادن به رویدادهای واکشی در سرویس‌کار مشابه گوش دادن به رویدادهای کلیک در DOM است. در کد ما، زمانی که یک رویداد واکشی رخ می‌دهد، URL درخواستی را در کنسول ثبت می‌کنیم (در عمل می‌توانیم پاسخ سفارشی خود را با منابع دلخواه ایجاد کرده و برگردانیم).

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

برای اطلاعات بیشتر

• واکشی رویداد - MDN
• استفاده از Fetch - MDN
• مقدمه ای بر Fetch - Google Developer

کد راه حل

برای دریافت یک کپی از کد کار، به پوشه 04-intercepting-network-requests/ بروید.

کارگران خدمات دارای محدوده هستند. محدوده کارمند خدمات تعیین می کند که کارگر خدمات از کدام مسیرها درخواست ها را رهگیری می کند.

دامنه را پیدا کنید

کد ثبت نام را در index.html به روز کنید:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('SW registered with scope:', registration.scope);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

مرورگر را رفرش کنید. توجه داشته باشید که کنسول محدوده سرویس‌کار را نشان می‌دهد (در این مورد http://localhost:8081/ است).

توضیح

وعده ای که توسط register() برگردانده می شود به شی ثبت نام که شامل محدوده کارمند سرویس است، حل می شود.

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

خدمتکار را جابجا کنید

service-worker.js را به دایرکتوری below/ منتقل کنید و URL service worker را در کد ثبت نام در index.html به روز کنید.

ثبت نام کارگر سرویس فعلی را در مرورگر لغو کنید و صفحه را بازخوانی کنید.

کنسول نشان می دهد که محدوده سرویس کارگر اکنون http://localhost:8081/below/ است. در کروم، می‌توانید محدوده سرویس کارگر را در برگه برنامه DevTools نیز ببینید:

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

توضیح

محدوده پیش‌فرض سرویس‌کار، مسیر فایل سرویس‌کار است. از آنجایی که فایل Service Worker اکنون در below/ است، محدوده آن نیز همین است. کنسول اکنون فقط رویدادهای واکشی را برای another.html ، another.css ، و another.js ثبت می‌کند، زیرا اینها تنها منابعی هستند که در محدوده سرویس‌کار هستند.

یک محدوده دلخواه تنظیم کنید

کارمند سرویس را به دایرکتوری ریشه پروژه ( app/ ) برگردانید و URL worker را در کد ثبت نام در index.html به‌روزرسانی کنید.

از مرجع در MDN استفاده کنید تا با استفاده از پارامتر اختیاری در register() scope of service worker را به دایرکتوری below/ تنظیم کنید.

سرویس کارگر را لغو ثبت کنید و صفحه را بازخوانی کنید. صفحه دیگر ، صفحه دیگر و برگشت را کلیک کنید.

مجدداً کنسول نشان می‌دهد که دامنه سرویس‌کار اکنون http://localhost:8081/below/ است و گزارش‌ها فقط رویدادها را برای another.html ، another.css ، و another.js واکشی می‌کنند.

توضیح

هنگام ثبت نام، می توان یک محدوده دلخواه را با عبور از یک پارامتر اضافی تنظیم کرد، به عنوان مثال:

navigator.serviceWorker.register('/service-worker.js', {
  scope: '/kitten/'
});

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

توجه: شما نمی توانید یک محدوده دلخواه را که بالاتر از مکان واقعی سرویس دهنده باشد تنظیم کنید. با این حال، اگر کارمند سرور شما در سرویس گیرنده‌ای فعال است که با سربرگ Service-Worker-Allowed سرویس می‌شود، می‌توانید حداکثر محدوده را برای آن کارگر سرویس بالاتر از محل کارمند سرویس تعیین کنید.

برای اطلاعات بیشتر

• شی ثبت نام کارگر خدماتی
• متد register().
• محدوده کارگر خدمات

کد راه حل

برای دریافت یک کپی از کد کار، به solution/ پوشه بروید.

شما اکنون یک کارگر خدماتی ساده دارید و در حال کار هستید و چرخه عمر کارگر خدمات را درک می کنید.

برای اطلاعات بیشتر

چرخه عمر کارگر خدماتی

برای مشاهده تمامی کدهای دوره آموزشی PWA به کدلبورد خوش آمدگویی دوره مراجعه کنید/