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

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

درباره این codelab

subjectآخرین به‌روزرسانی: سپتامبر ۱۸, ۲۰۲۴
account_circleنویسنده: یکی از کارمندان Google

1. خوش آمدید

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

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

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

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

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

اگر مخزن را شبیه سازی می کنید، مطمئن شوید که در شاخه 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 بازخوانی کنید

برگه برنامه Chrome Dev Tools برای Service Workers با علامت زدن کادر آفلاین باز شد

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

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

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

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

در حال حاضر یک فایل Service Worker خالی وجود دارد، بنابراین برای اطمینان از نمایش تغییرات، اجازه دهید آن را در برنامه خود ثبت کنیم. برای انجام این کار، کد زیر را به بالای js/main.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 {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

توضیح

این کد فایل خالی 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 مربوط به رویدادهای مختلف در سرویس کارگر را ببینید!

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

توضیح

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

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

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

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

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

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

bug_report گزارش اشتباه