برنامه های وب پیشرو: آفلاین شدن

1. خوش آمدید

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

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

• یک کارگر خدماتی را با دست بنویسید
• یک Service Worker را به یک برنامه وب موجود اضافه کنید
• از Service Worker و Cache Storage API برای در دسترس قرار دادن منابع به صورت آفلاین استفاده کنید

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

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

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

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

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

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

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

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

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

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

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

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

• js/main.js - فایل جاوا اسکریپت برنامه اصلی
• service-worker.js - فایل کارگر سرویس برنامه

3. تست آفلاین

قبل از ایجاد هر تغییری، بیایید آزمایش کنیم تا نشان دهیم برنامه وب در حال حاضر به صورت آفلاین کار نمی کند. برای انجام این کار، رایانه ما را آفلاین کنید و برنامه وب را دوباره بارگیری کنید، یا اگر از Chrome استفاده می کنید:

1. Chrome Dev Tools را باز کنید
2. به تب Application بروید
3. به بخش Service Workers بروید
4. کادر آفلاین را علامت بزنید
5. صفحه را بدون بستن Chrome Dev Tools بازخوانی کنید

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

4. آن را آفلاین کنید

وقت آن است که یک کارگر خدمات پایه را اضافه کنید! این در دو مرحله اتفاق می افتد: ثبت سرویس کارگر و ذخیره منابع.

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

در حال حاضر یک فایل Service Worker خالی وجود دارد، بنابراین برای اطمینان از نمایش تغییرات، اجازه دهید آن را در برنامه خود ثبت کنیم. برای انجام این کار، کد زیر را به بالای js/main.js اضافه کنید:

import swURL from 'sw:../service-worker.js';

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      const reg = await navigator.serviceWorker.register(swURL);
      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

دستور وارد کردن برای URL worker مورد نیاز است تا ابزار ساخت ما، WMR، بتواند Service Worker را به درستی کامپایل کند. اگر از WMR استفاده نمی‌کنید، به جای آن، swURL را روی مسیری به سمت سرویس‌کار خود تنظیم کنید.

توضیح

این کد فایل خالی service-worker.js را پس از بارگیری صفحه و تنها در صورتی که سایت از Service Workers پشتیبانی می کند، ثبت می کند.

منابع پیش کش

برای اینکه برنامه وب به صورت آفلاین کار کند، مرورگر باید بتواند به درخواست های شبکه پاسخ دهد و مکان مسیریابی آنها را انتخاب کند. برای این کار موارد زیر را به service-worker.js کنید

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

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

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

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

اگر رویدادهای console.log را نمی‌بینید، قسمت Service Worker را در برگه برنامه‌ها بررسی کنید تا مطمئن شوید که هیچ خطایی در سرویس‌کار خود ندارید و در حالت انتظار نیست.

بعد دوباره آفلاین شوید و سایت را رفرش کنید. باید ببینید که با وجود اینکه آفلاین هستید بارگذاری می شود!

توضیح

در طول رویداد نصب سرویس‌کار، یک حافظه پنهان با نام با استفاده از Cache Storage API باز می‌شود. سپس فایل ها و مسیرهای مشخص شده در precacheResources با استفاده از روش cache.addAll در حافظه پنهان بارگذاری می شوند. این پیش کش نامیده می شود زیرا به طور پیشگیرانه مجموعه ای از فایل ها را در زمان نصب در حافظه پنهان ذخیره می کند، در مقابل ذخیره سازی آنها در صورت نیاز یا درخواست.

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

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

5. تبریک!

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

کدهای بعدی این مجموعه Working with Workbox است