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