برنامه های وب پیشرو: کار با Workbox

1. خوش آمدید

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

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

• یک Service Worker موجود را به استفاده از Workbox تبدیل کنید
• یک نسخه بازگشتی آفلاین به PWA اضافه کنید

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

• HTML پایه و جاوا اسکریپت

آنچه شما نیاز خواهید داشت

• مرورگری که از Service Workers پشتیبانی می کند

2. راه اندازی کنید

با شبیه‌سازی یا دانلود کد شروع مورد نیاز برای تکمیل این لبه کد شروع کنید:

Repo را شبیه سازی کنید

دانلود فایل فشرده

اگر مخزن را شبیه سازی می کنید، مطمئن شوید که در شاخه pwa03--workbox هستید. فایل فشرده حاوی کد آن شاخه نیز می باشد.

این پایگاه کد به Node.js 14 یا بالاتر نیاز دارد. هنگامی که کد را در دسترس دارید، npm ci از خط فرمان موجود در پوشه کد اجرا کنید تا تمام وابستگی های مورد نیاز خود را نصب کنید. سپس، npm start اجرا کنید تا سرور توسعه برای Codelab راه اندازی شود.

فایل README.md کد منبع توضیحی برای همه فایل های توزیع شده ارائه می دهد. علاوه بر این، فایل‌های موجود کلیدی که در سرتاسر این Codelab با آنها کار خواهید کرد، به شرح زیر است:

فایل های کلیدی

• service-worker.js - فایل کارگر سرویس برنامه
• offline.html - HTML آفلاین برای استفاده زمانی که صفحه در دسترس نیست

3. به Workbox مهاجرت کنید

با نگاهی به سرویس کار موجود، پیش کش به نظر می رسد که می توان آن را به دو مرحله تقسیم کرد:

• فایل های مربوطه را در حین نصب Service Worker ذخیره کنید
• دوباره آن فایل ها را با یک استراتژی Cache Only سرو کنید

فایل index.html و مسیر / هر دو هنوز برای پیش کش کردن منطقی هستند، زیرا HTML این برنامه وب تغییر زیادی نمی کند، اما فایل های دیگر، مانند CSS و جاوا اسکریپت، ممکن است تغییر کنند و ما واقعاً نمی خواهیم هر بار که انجام می دهند کل چرخه عمر Service Worker را مرور کنیم. علاوه بر این، سرویس‌کار فعلی فقط زیرمجموعه‌ای از CSS و جاوا اسکریپت ما را در نظر می‌گیرد، ما می‌خواهیم همه آن پوشش داده شود. ذخیره این موارد با استراتژی Stale while Revalidate منطقی تر است. پاسخ سریع که در صورت نیاز می تواند در پس زمینه به روز شود.

Precaching دوباره مورد بازدید قرار گرفت

با مهاجرت به Workbox، نیازی به نگه داشتن کدهای موجود نداریم، بنابراین همه موارد موجود در service-worker.js را حذف کنید. در آزمایشگاه قبلی، ما این Service Worker را تنظیم کردیم تا کامپایل شود، بنابراین می‌توانیم از ESModule Imports در اینجا برای آوردن Workbox از ماژول‌های NPM آن استفاده کنیم. بیایید با بازدید مجدد از precaching شروع کنیم. در service-worker.js کد زیر را اضافه کنید:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

دستور import در Service Workers کار نمی کند، بنابراین اگر از WMR استفاده نمی کنید، باید این فایل را به روش دیگری کامپایل کنید. به‌علاوه، WMR به‌طور خودکار این وابستگی‌ها را دانلود و نصب می‌کند، بنابراین لازم نیست خودتان نگران نصب آن‌ها باشید. اگر از WMR استفاده نمی کنید، به یاد داشته باشید که این وابستگی ها را از NPM نصب کنید.

توضیح

برای تنظیم پیش کش برای /index.html و / ، پنج ماژول برای استخراج وجود دارد. در حالی که ممکن است زیاد به نظر برسد، این کد بسیار قدرتمندتر از کد قبلی نوشته شده است.

با راه‌اندازی یک استراتژی جدید Cache First شروع می‌شود، که به جای استراتژی Cache Only انتخاب می‌شود تا در صورت نیاز صفحات دیگری به کش اضافه شوند. نامی به آن داده شده است، page-cache . استراتژی‌های Workbox می‌توانند تعدادی پلاگین داشته باشند که می‌توانند بر چرخه عمر ذخیره و بازیابی محتوا از حافظه پنهان تأثیر بگذارند. در اینجا، از دو افزونه، پلاگین Cacheable Response و افزونه Expiration استفاده می‌شود تا اطمینان حاصل شود که فقط پاسخ‌های سرور خوب در حافظه پنهان ذخیره می‌شوند و هر آیتم در حافظه پنهان پس از 30 روز پاک می‌شود.

سپس، حافظه پنهان استراتژی با /index.html و / با استفاده از دستور Workbox cache استراتژی گرم گرم می شود. این موارد را در طول رویداد نصب سرویس‌کار به این حافظه پنهان اضافه می‌کند.

در نهایت یک مسیر جدید ثبت می شود. هر درخواستی که یک پیمایش صفحه باشد، توسط این استراتژی Cache First مدیریت می شود، یا از حافظه پنهان یا شبکه بیرون کشیده می شود و سپس پاسخ را ذخیره می کند.

ذخیره دارایی ها

با مرتب سازی پیش کش مسیر، زمان اجرای مجدد کش برای دارایی های سایت فرا رسیده است. این CSS و جاوا اسکریپت است. برای انجام این کار، ابتدا StaleWhileRevalidate به وارد کردن workbox-strategies خود اضافه کنید، سپس کد زیر را به پایین سرویس Worker خود اضافه کنید:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

توضیح

این مسیر با تعیین اینکه آیا نوع درخواست یک سبک، یک اسکریپت یا یک کارگر مربوط به CSS، جاوا اسکریپت یا Web Workers است شروع می شود. اگر اینطور باشد، از یک استراتژی Stale while Revalidate استفاده می‌کند، سعی می‌کند ابتدا از حافظه پنهان استفاده کند، در صورت در دسترس نبودن به شبکه بازگردد، در حالی که در صورت امکان سعی می‌کند نسخه را در حافظه پنهان از شبکه به‌روزرسانی کند. مانند استراتژی صفحه، این استراتژی فقط پاسخ های خوب را در حافظه پنهان ذخیره می کند.

4. بک آپ آفلاین اضافه کنید

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

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

دستور العمل های Workbox یک دستور العمل بازگشتی آفلاین ارائه می دهد که می توان از آن برای انجام این کار استفاده کرد! برای استفاده از آن، ابتدا offlineFallback به وارد کردن workbox-recipes اضافه کنید، سپس کد زیر را به پایین سرویس Worker خود اضافه کنید:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

توضیح

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

5. تبریک می گویم!

شما یاد گرفته‌اید که چگونه از Workbox برای راه‌اندازی استراتژی‌های کش برای مسیرها و ارائه بک‌آلات آفلاین برای PWA خود استفاده کنید.

کدهای بعدی این سری IndexedDB است