Progressive Web App: ออฟไลน์

1. ยินดีต้อนรับ

ในห้องทดลองนี้ คุณจะได้ใช้เว็บแอปพลิเคชันที่มีอยู่และทําให้ใช้งานแบบออฟไลน์ได้ นี่คือชุดแรกในชุด Codelab ที่ใช้ร่วมกันสําหรับเวิร์กช็อป Progressive Web App ยังมี Codelab อีก 7 รายการในชุดนี้

สิ่งที่คุณจะได้เรียนรู้

  • เขียน Service Worker ด้วยตนเอง
  • เพิ่ม Service Worker ไปยังเว็บแอปพลิเคชันที่มีอยู่
  • ใช้ Service Worker และ Cache Storage API เพื่อทําให้ทรัพยากรพร้อมใช้งานแบบออฟไลน์

สิ่งที่ควรทราบ

  • HTML และ JavaScript พื้นฐาน

สิ่งที่ต้องมี

2. ตั้งค่าเลย

เริ่มด้วยการโคลนหรือดาวน์โหลดโค้ดเริ่มต้นที่จําเป็นสําหรับการทํา Codelab นี้ให้เสร็จสมบูรณ์

หากโคลนที่เก็บ อย่าลืมตรวจสอบว่าคุณอยู่ในสาขา starter แล้ว ไฟล์ ZIP มีรหัสสําหรับสาขาดังกล่าวด้วยเช่นกัน

ฐานของโค้ดนี้ต้องใช้ Node.js 14 ขึ้นไป เมื่อคุณมีโค้ดแล้ว ให้เรียกใช้ npm ci จากบรรทัดคําสั่งในโฟลเดอร์&#39 เพื่อติดตั้งทรัพยากร Dependency ทั้งหมดที่คุณต้องการ จากนั้นเรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์การพัฒนาสําหรับ Codelab

ไฟล์ README.md ของซอร์สโค้ดมีคําอธิบายสําหรับไฟล์ที่เผยแพร่ทั้งหมด นอกจากนี้ ไฟล์ต่อไปนี้คือคีย์ที่มีอยู่ซึ่งคุณจะเรียกใช้ตลอด Codelab นี้

ไฟล์หลัก

  • js/main.js - ไฟล์ JavaScript ของแอปพลิเคชันหลัก
  • service-worker.js - ไฟล์ Service Worker ของแอปพลิเคชัน

3. ทดสอบแบบออฟไลน์

ก่อนทําการเปลี่ยนแปลงใดๆ โปรดทดสอบเพื่อแสดงว่าเว็บแอปไม่ทํางานแบบออฟไลน์ในขณะนี้ ในการดําเนินการนี้ ให้ใช้คอมพิวเตอร์แบบออฟไลน์และโหลดเว็บแอปซ้ํา หรือหากคุณกําลังใช้ Chrome #39

  1. เปิดเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome
  2. เปลี่ยนไปที่แท็บแอปพลิเคชัน
  3. เปลี่ยนเป็นส่วน Service Worker
  4. เลือกช่องทําเครื่องหมายออฟไลน์
  5. รีเฟรชหน้าเว็บโดยไม่ปิดเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

แท็บแอปพลิเคชันเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome เปิดขึ้นสําหรับ Service Worker โดยเลือกช่องทําเครื่องหมายออฟไลน์

เมื่อทดสอบเว็บไซต์แล้วโหลดแบบออฟไลน์ไม่สําเร็จ ก็ถึงเวลาเพิ่มฟังก์ชันออนไลน์บางอย่างแล้ว ยกเลิกการเลือกช่องทําเครื่องหมายออฟไลน์แล้วทําขั้นตอนถัดไป

4. ใช้งานแบบออฟไลน์ได้

ได้เวลาเพิ่ม Service Worker ขั้นพื้นฐานแล้ว ปัญหานี้จะเกิดขึ้นใน 2 ขั้นตอน ได้แก่ การลงทะเบียน Service Worker และการแคชทรัพยากร

ลงทะเบียน Service Worker

มีไฟล์ 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);
    }
  });
}

คำอธิบาย

โค้ดนี้จะลงทะเบียนไฟล์ Service Worker ที่ว่างเปล่าของ service-worker.js เมื่อโหลดหน้าเว็บแล้ว และเฉพาะเมื่อเว็บไซต์รองรับ Service Worker เท่านั้น

แคชทรัพยากรล่วงหน้า

เพื่อให้เว็บแอปทํางานแบบออฟไลน์ได้ เบราว์เซอร์จะต้องสามารถตอบกลับคําขอของเครือข่ายและเลือกว่าจะกําหนดเส้นทางคําขอไปที่ใด โดยเพิ่ม 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 สอดคล้องกับเหตุการณ์ต่างๆ ในโปรแกรมทํางานของบริการ

จากนั้น ให้ออฟไลน์อีกครั้งและรีเฟรชเว็บไซต์ คุณควรจะเห็นว่าโหลดได้สําเร็จแม้ในขณะที่คุณออฟไลน์

คำอธิบาย

ระหว่างเหตุการณ์การติดตั้ง Service Worker แคชที่มีชื่อจะเปิดขึ้นโดยใช้ Cache Storage API จากนั้นระบบจะโหลดไฟล์และเส้นทางที่ระบุใน precacheResources ลงในแคชโดยใช้เมธอด cache.addAll เราเรียกวิธีนี้ว่าการแคชล่วงหน้า เนื่องจากจะแคชชุดไฟล์ชั่วคราวระหว่างการติดตั้ง ไม่ใช่การแคชเมื่อจําเป็นต้องใช้หรือขอ

เมื่อ Service Worker ควบคุมเว็บไซต์แล้ว ทรัพยากรที่ขอจะผ่าน Service Worker เหมือนพร็อกซี แต่ละคําขอจะทริกเกอร์เหตุการณ์การดึงข้อมูลที่ใน Service Worker นี้จะค้นหาแคชที่ตรงกัน (หากมี) ที่ตรงกัน ด้วยทรัพยากรที่แคชไว้ หากไม่มีรายการที่ตรงกัน ระบบจะขอทรัพยากรตามปกติ

การแคชทรัพยากรจะช่วยให้แอปทํางานแบบออฟไลน์ได้เพื่อหลีกเลี่ยงคําขอเครือข่าย ตอนนี้แอปจะตอบกลับได้ด้วยรหัสสถานะ 200 เมื่อออฟไลน์

5. ยินดีด้วย

คุณได้ดูวิธีทําให้เว็บแอปออฟไลน์โดยใช้ Service Worker และ API พื้นที่เก็บข้อมูลแคชแล้ว

Codelab ถัดไปในชุดคือการทํางานกับ Workbox