กำลังแคช

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

Cache Storage API พร้อมใช้งานจากบริบทที่แตกต่างกันดังนี้

• บริบทของหน้าต่าง (เทรดหลักของ PWA)
• Service Worker
• ผู้ปฏิบัติงานคนอื่นๆ

ข้อดีอย่างหนึ่งของการจัดการแคชโดยใช้ Service Worker คือวงจรการทำงานจะไม่เชื่อมโยงกับหน้าต่าง ซึ่งหมายความว่าคุณไม่ได้บล็อกเทรดหลัก โปรดทราบว่าในการใช้ Cache Storage API บริบทเหล่านี้ส่วนใหญ่ต้องอยู่ภายใต้การเชื่อมต่อ TLS

ข้อมูลที่จะแคช

คำถามแรกที่คุณอาจมีเกี่ยวกับการแคชคือสิ่งที่จะแคช แม้ว่าจะไม่มีคำตอบที่ตายตัวสำหรับคำถามนั้น แต่คุณสามารถเริ่มต้นด้วยทรัพยากรขั้นต่ำทั้งหมดที่จำเป็นต่อการแสดงผลอินเทอร์เฟซผู้ใช้

ทรัพยากรเหล่านี้ควรประกอบด้วย

• HTML ของหน้าหลัก (start_url ของแอป)
• สไตล์ชีต CSS ที่จำเป็นสำหรับอินเทอร์เฟซผู้ใช้หลัก
• รูปภาพที่ใช้ในอินเทอร์เฟซผู้ใช้
• ไฟล์ JavaScript ที่ต้องใช้ในการแสดงผลอินเทอร์เฟซผู้ใช้
• ข้อมูล เช่น ไฟล์ JSON จําเป็นต้องใช้ในการแสดงผลประสบการณ์พื้นฐาน
• แบบอักษรเว็บ
• ในแอปพลิเคชันที่มีหลายหน้า เอกสาร HTML อื่นๆ ที่คุณต้องการแสดงผลอย่างรวดเร็วหรือขณะออฟไลน์

พร้อมใช้งานแบบออฟไลน์

แม้ว่าความสามารถในการใช้งานแบบออฟไลน์เป็นหนึ่งในข้อกำหนดของ Progressive Web App แต่คุณต้องเข้าใจว่า PWA บางโปรแกรมไม่จำเป็นต้องมีประสบการณ์การใช้งานแบบออฟไลน์อย่างเต็มรูปแบบ เช่น โซลูชันเกมระบบคลาวด์หรือแอปสินทรัพย์คริปโต ดังนั้นคุณจึงสามารถเสนออินเทอร์เฟซผู้ใช้แบบพื้นฐานที่จะแนะนำผู้ใช้ให้ผ่านพ้นสถานการณ์เหล่านั้นไปได้

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

มีกลยุทธ์การแคชต่างๆ มากมายที่คุณใช้ได้ตามความต้องการของ PWA นั่นคือเหตุผลสำคัญในการออกแบบการใช้แคชเพื่อมอบประสบการณ์การใช้งานที่รวดเร็วและน่าเชื่อถือ เช่น หากชิ้นงานแอปทั้งหมดจะดาวน์โหลดเร็ว ไม่ได้ใช้พื้นที่มาก และไม่จำเป็นต้องอัปเดตในทุกคำขอ การแคชชิ้นงานทั้งหมดจึงเป็นกลยุทธ์ที่ใช้ได้ ในทางกลับกัน หากคุณมีทรัพยากรที่จำเป็นต้องใช้เวอร์ชันล่าสุด คุณอาจต้องพิจารณาไม่แคชเนื้อหาเหล่านั้นเลย

การใช้ API

ใช้ Cache Storage API เพื่อกำหนดชุดของแคชภายในต้นทางของคุณ โดยแต่ละชุดจะระบุด้วยชื่อสตริงที่คุณกำหนดได้ เข้าถึง API ผ่านออบเจ็กต์ caches และเมธอด open จะเปิดใช้การสร้างหรือการเปิดแคชที่สร้างแล้ว เมธอดแบบเปิดจะแสดงคำสัญญาสำหรับออบเจ็กต์แคช

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

การดาวน์โหลดและจัดเก็บเนื้อหา

หากต้องการขอให้เบราว์เซอร์ดาวน์โหลดและจัดเก็บเนื้อหา ให้ใช้เมธอด add หรือ addAll เมธอด add จะส่งคำขอและจัดเก็บการตอบกลับ HTTP 1 รายการ และ addAll กลุ่มการตอบกลับ HTTP เป็นธุรกรรมตามอาร์เรย์ของคำขอหรือ URL

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

อินเทอร์เฟซพื้นที่เก็บข้อมูลแคชจะจัดเก็บการตอบกลับทั้งหมด รวมถึงส่วนหัวและเนื้อความทั้งหมด ดังนั้น คุณสามารถเรียกคืนในภายหลังได้โดยใช้คำขอ HTTP หรือ URL เป็นคีย์ ซึ่งจะดูวิธีการได้ในส่วนการแสดงโฆษณา

กรณีที่ควรแคช

ใน PWA คุณมีหน้าที่เลือกช่วงเวลาที่จะแคชไฟล์ แม้ว่าวิธีการหนึ่งคือการจัดเก็บเนื้อหาให้ได้มากที่สุดเมื่อติดตั้งโปรแกรมทำงานของบริการ แต่ก็ไม่ใช่วิธีที่ดีที่สุด การแคชทรัพยากรที่ไม่จำเป็นจะทำให้สิ้นเปลืองแบนด์วิดท์และพื้นที่เก็บข้อมูล และอาจทำให้แอปแสดงทรัพยากรที่ล้าสมัยโดยไม่เจตนา

คุณไม่จำเป็นต้องแคชเนื้อหาทั้งหมดในคราวเดียว เพียงแคชเนื้อหาหลายครั้งในวงจรของ PWA เช่น

• ในการติดตั้ง Service Worker
• หลังจากโหลดหน้าเว็บครั้งแรก
• เมื่อผู้ใช้ไปยังส่วนหรือเส้นทาง
• เมื่อเครือข่ายไม่มีการใช้งาน

คุณขอให้แคชไฟล์ใหม่ในเทรดหลักหรือภายในบริบทของ Service Worker ได้

การแคชเนื้อหาใน Service Worker

ตัวอย่างสถานการณ์ที่พบได้บ่อยที่สุดคือการแคชชุดเนื้อหาขั้นต่ำเมื่อมีการติดตั้ง Service Worker ซึ่งทำได้โดยใช้อินเทอร์เฟซพื้นที่เก็บข้อมูลแคชภายในเหตุการณ์ install ใน Service Worker ได้

เนื่องจากเทรดทำงานของบริการสามารถหยุดได้ทุกเมื่อ คุณจึงขอให้เบราว์เซอร์รอให้สัญญา addAll เสร็จสิ้นได้เพื่อเพิ่มโอกาสในการจัดเก็บเนื้อหาทั้งหมดและรักษาความสม่ำเสมอของแอป ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการดังกล่าว โดยใช้เมธอด waitUntil ของอาร์กิวเมนต์เหตุการณ์ที่ได้รับใน Listener เหตุการณ์ของ Service Worker

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

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

นอกจากนี้ คุณยังจัดการคำสัญญาโดยใช้ไวยากรณ์อะซิงค์/รอได้ด้วย ในกรณีดังกล่าว คุณต้องสร้างฟังก์ชันอะซิงโครนัสที่เรียกใช้ await ได้ และจะแสดงสัญญาที่ส่งไปยัง waitUntil() หลังจากเรียกใช้ ดังในตัวอย่างต่อไปนี้

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

คำขอข้ามโดเมนและการตอบสนองที่ไม่ชัดเจน

PWA จะดาวน์โหลดและแคชเนื้อหาจากต้นทางและข้ามโดเมน เช่น เนื้อหาจาก CDN ของบุคคลที่สามได้ เมื่อใช้แอปข้ามโดเมน การโต้ตอบกับแคชจะคล้ายกับคำขอจากต้นทางเดียวกันอย่างมาก ระบบจะดำเนินการตามคำขอและเก็บสำเนาการตอบกลับไว้ในแคช คุณสามารถใช้ในต้นทางของแอปได้เท่านั้น เช่นเดียวกับเนื้อหาอื่นๆ ที่แคชไว้

ระบบจะเก็บเนื้อหาไว้เป็นคำตอบแบบทึบ ซึ่งหมายความว่าโค้ดของคุณจะไม่สามารถดูหรือแก้ไขเนื้อหาหรือส่วนหัวของคำตอบนั้นได้ นอกจากนี้ การตอบสนองแบบทึบจะไม่แสดงขนาดจริงใน API พื้นที่เก็บข้อมูล ซึ่งส่งผลต่อโควต้า บางเบราว์เซอร์จะแสดงขนาดใหญ่ เช่น 7 MB ไม่ว่าไฟล์จะมีขนาดเพียง 1Kb ก็ตาม

การอัปเดตและลบเนื้อหา

คุณอัปเดตชิ้นงานโดยใช้ cache.put(request, response) และลบชิ้นงานได้โดยใช้ delete(request)

ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับออบเจ็กต์แคช

การดีบักพื้นที่เก็บข้อมูลแคช

เบราว์เซอร์จำนวนมากมีวิธีแก้ไขข้อบกพร่องเนื้อหาของพื้นที่เก็บข้อมูลแคชในแท็บแอปพลิเคชันเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งคุณจะเห็นเนื้อหาของแคชทั้งหมดภายในต้นทางปัจจุบัน เราจะอธิบายเพิ่มเติมเกี่ยวกับเครื่องมือเหล่านี้ในส่วนเครื่องมือและการแก้ไขข้อบกพร่อง

แหล่งข้อมูล

• พื้นที่เก็บข้อมูลแคชใน MDN
• Cache API: คำแนะนำฉบับย่อ
• ตำราอาหารออฟไลน์