กำลังแคช

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

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

• บริบทของหน้าต่าง (ชุดข้อความหลักของ PWA)
• Service Worker
• ผู้ปฏิบัติงานคนอื่นๆ ที่คุณใช้

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

สิ่งที่ควรแคช

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

แหล่งข้อมูลเหล่านั้นควรมีสิ่งต่อไปนี้

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

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

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

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

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

การใช้ API

ใช้ Cache Storage API เพื่อกำหนดชุดแคชภายในต้นทาง โดยแต่ละรายการจะระบุด้วยชื่อสตริงที่คุณกำหนดได้ เข้าถึง API ผ่านออบเจ็กต์ caches และเมธอด open จะเปิดใช้การสร้างหรือการเปิดแคชที่สร้างแล้ว เมธอด 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 คุณเป็นผู้ตัดสินใจว่าจะแคชไฟล์เมื่อใด แม้ว่าวิธีหนึ่งคือการจัดเก็บชิ้นงานให้ได้มากที่สุดเมื่อติดตั้ง Service Worker แต่โดยทั่วไปแล้ววิธีนี้ไม่ใช่วิธีที่ดีที่สุด การแคชทรัพยากรที่ไม่จำเป็นจะทำให้แบนด์วิดท์และพื้นที่เก็บข้อมูลสิ้นเปลือง และอาจทำให้แอปแสดงทรัพยากรที่ล้าสมัยโดยไม่ตั้งใจ

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

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

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

การแคชชิ้นงานใน Service Worker

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

เนื่องจากเธรด Service Worker สามารถหยุดได้ทุกเมื่อ คุณจึงขอให้เบราว์เซอร์รอให้ addAll promise เสร็จสิ้นได้เพื่อเพิ่มโอกาสในการเก็บชิ้นงานทั้งหมดและทำให้แอปมีความสอดคล้องกัน ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการดังกล่าว โดยใช้เมธอด 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()

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

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

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

คุณสามารถอัปเดตเนื้อหาโดยใช้ cache.put(request, response) และลบเนื้อหาด้วย delete(request)

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

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

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

แหล่งข้อมูล

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