برنامه های وب پیشرو: خدمات کارگر شامل

1. خوش آمدید

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

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

  • یک پاسخ جریانی را به یک کارگر خدمات اضافه کنید

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

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

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

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

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

اگر مخزن را شبیه سازی می کنید، مطمئن شوید که در شعبه pwa06--service-worker-includes هستید. فایل فشرده حاوی کد آن شاخه نیز می باشد.

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

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

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

  • js/preview.js - پیش نمایش فایل جاوا اسکریپت صفحه
  • service-worker.js - فایل سرویسکار PWA

3. پیش نمایش جریان

صفحه پیش نمایش را می توان به سه قسمت واضح تقسیم کرد: سر، بدن کامپایل شده و پا. در حال حاضر، بدنه کامپایل شده در حال رندر شدن در سمت مشتری است، اما دلیلی برای این کار وجود ندارد. بیایید آن را به Service Worker منتقل کنیم.

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

برای انجام این کار، ابتدا محتوای js/preview.js را پاک کنید تا مطمئن شوید که دیگر کامپایل را انجام نمی دهد. سپس در service-worker.js موارد زیر را انجام دهید:

  • strategy صادرات نامگذاری شده را از workbox-streams به عنوان streamsStrategy وارد کنید
  • صادرات نامگذاری شده openDB و از idb را وارد کنید و صادرات نامگذاری شده را از marked marked کنید
  • قبل از ثبت مسیر برای پیمایش، یک ثبت مسیر جدید اضافه کنید
    • باید بررسی کنید که pathname URL /preview باشد
    • باید از یک استراتژی استریم استفاده کند که
      1. پاسخ با محتوای preview/index.html از طریق محتوای تگ main هستند
      2. با تابعی پاسخ دهید که settings-store IndexedDB را باز می کند، محتوا را از ذخیره شی settings دریافت می کند و نسخه رندر شده علامت گذاری شده آن محتوا را برمی گرداند.
      3. با بسته شدن تگ های main ، body و html پاسخ دهید.

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

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

شما یاد گرفته اید که چگونه برنامه وب خود را با استفاده از Service Workers و API ذخیره سازی حافظه پنهان آفلاین کنید.

کدهای بعدی این مجموعه کار با کارگران است