กำลังแคช

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

การสนับสนุนเบราว์เซอร์

  • 43
  • 16
  • 41
  • 11.1

แหล่งที่มา

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

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

  • ในการติดตั้ง 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 ของพื้นที่เก็บข้อมูล ซึ่งจะส่งผลต่อโควต้า บางเบราว์เซอร์จะเปิดเผยขนาดใหญ่ เช่น 7Mb ไม่ว่าไฟล์จะมีขนาดเพียง 1Kb ก็ตาม

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

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

โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบของออบเจ็กต์แคช

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะแก้ไขข้อบกพร่องของเนื้อหาพื้นที่เก็บข้อมูลแคช

แหล่งข้อมูล