با استفاده از Workbox-window

یکی از ماژول‌های Workbox که هنوز در این مستندات پوشش زیادی پیدا نکرده است workbox-window است که مجموعه‌ای از ماژول‌هایی است که در window اجرا می‌شوند. اهداف این ماژول عبارتند از:

• برای ساده‌سازی ثبت‌نام و به‌روزرسانی‌های کارگر خدماتی با کمک به توسعه‌دهندگان برای شناسایی لحظات حیاتی چرخه عمر کارگر خدمات ، و پاسخگویی در آن لحظات را آسان‌تر می‌کند.
• برای جلوگیری از اشتباهات رایج توسعه دهندگان، مانند ثبت نام یک سرویس دهنده در محدوده اشتباه.
• برای ساده کردن پیام بین window و محدوده سرویس کارگر .

وارد کردن و استفاده از workbox-window

صادراتی که اغلب از workbox-window استفاده می کنید کلاس Workbox است که می توانید آن را در Node یا از CDN در یک صفحه وب وارد کنید.

ایجاد یک بسته محلی

اگر زنجیره ابزار شما دارای بسته‌ای مانند بسته وب یا جمع‌آوری است، می‌توانید workbox-window به صورت محلی بسته‌بندی کنید.

ابتدا workbox-window به عنوان وابستگی تولید برنامه خود نصب کنید:

npm install workbox-window --save

سپس، در جاوا اسکریپت برنامه خود، می توانید کلاس Workbox را از workbox-window import :

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

اگرچه workbox-window بسیار کوچک است، اما می‌توانید آن را از منطق برنامه اصلی وب‌سایت خود با استفاده از import پویا جدا کنید، که می‌تواند اندازه بسته اصلی صفحه شما را کاهش دهد:

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

با استفاده از CDN

اگرچه روش توصیه شده نیست، اما یک راه ساده تر برای استفاده workbox-window ، وارد کردن آن از یک CDN است:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

توجه داشته باشید که عنصر <script> در مثال بالا از ویژگی type="module" استفاده می کند. اگر می‌خواهید از دستورهای import ثابت در مرورگر بدون مرحله ساخت استفاده کنید، این مورد ضروری است. همه مرورگرهای اصلی که از کارگران خدمات پشتیبانی می‌کنند، از ماژول‌های جاوا اسکریپت نیز پشتیبانی می‌کنند، بنابراین خوب است که این کد را به هر مرورگری ارائه کنید، زیرا مرورگرهای قدیمی‌تر عناصر <script> با مقدار مشخصه type "module" را نادیده می‌گیرند.

ثبت نام کارگر خدماتی

ثبت یک سرویس کارگر با workbox-window با روش register کلاس Workbox انجام می شود:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

ممکن است به نظر برسد که این همان ثبت نام یک کارگر خدماتی با استفاده از navigator.serviceWorker.register است. با این حال، Workbox.register قبل از ثبت سرویس‌کار مراقب است که تا رویداد load window منتظر بماند. این امر در شرایطی که پیش کش درگیر است، مطلوب است، بنابراین می توان از کشمکش پهنای باند که ممکن است راه اندازی صفحه را به تاخیر بیندازد، اجتناب کرد.

برقراری ارتباط بین window و محدوده کارگر خدمات

کارکنان خدمات دامنه خود را جدا از window دارند و فقط به زیر مجموعه ای از APIهای موجود در window دسترسی دارند. با این حال، امکان برقراری ارتباط بین window و سرویس دهنده وجود دارد. workbox-window با روش