اسکریپت نویسی کارگر سرویس

این نرم افزار کد بخشی از دوره آموزشی توسعه برنامه های وب پیشرفته است که توسط تیم آموزش توسعه دهندگان گوگل توسعه یافته است. اگر به ترتیب روی کدها کار کنید، بیشترین ارزش را از این دوره خواهید گرفت.

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

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

مقدمه

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

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

• یک اسکریپت اولیه 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 /another.html، js/another.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);
    });
  });
}

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

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

توضیح

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

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

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

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

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() به یک سرویس‌کار اجازه می‌دهد تا به محض اتمام نصب، فعال شود. شنونده رویداد نصب یک مکان معمولی برای قرار دادن 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 است و به همه دایرکتوری‌های پایین‌تر گسترش می‌یابد. بنابراین یک سرویس‌کار در فهرست اصلی یک برنامه، درخواست‌های همه فایل‌های موجود در برنامه را کنترل می‌کند.

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

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 استفاده کنید تا محدوده service worker را با استفاده از پارامتر اختیاری در register() به دایرکتوری 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 به کدلبورد خوش آمدید دوره مراجعه کنید/