ทำความเข้าใจโควต้าพื้นที่เก็บข้อมูล

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

รองรับตัวเลือกการกําหนดค่าใดบ้าง

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

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

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  // Use a cache-first strategy with the following config:
  new CacheFirst({
    // You need to provide a cache name when using expiration.
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        // Keep at most 50 entries.
        maxEntries: 50,
        // Don't keep any entries for more than 30 days.
        maxAgeSeconds: 30 * 24 * 60 * 60,
        // Automatically cleanup if quota is exceeded.
        purgeOnQuotaError: true
      })
    ]
  })
);

คุณต้องตั้งค่า maxEntries, maxAgeSeconds หรือทั้ง 2 รายการเมื่อใช้ ExpirationPlugin purgeOnQuotaError เป็นค่าที่ไม่บังคับ

maxEntries

ซึ่งจะกำหนดขีดจำกัดสูงสุดของจำนวนรายการ (นั่นคือ URL ที่ไม่ซ้ำกัน) สำหรับแคชหนึ่งๆ

โดยปกติแล้วการตั้งค่านี้เป็นความคิดที่ดี เว้นแต่คุณจะทราบว่ามี URL ที่เป็นไปได้เพียงไม่กี่รายการที่อาจได้รับการจัดการโดยกลยุทธ์หนึ่งๆ

maxAgeSeconds

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

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

purgeOnQuotaError

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

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

คุณจัดเก็บข้อมูลได้เท่าใด

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

บางเบราว์เซอร์แสดงอินเทอร์เฟซสำหรับการค้นหาปริมาณพื้นที่เก็บข้อมูลโดยประมาณที่ต้นทางใช้อยู่ รวมถึงขีดจำกัดบนผ่าน navigator.storage.estimate() บทความ "การประมาณพื้นที่เก็บข้อมูลที่มีอยู่" มีข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ข้อมูลดังกล่าวในเว็บแอปของคุณเอง

สิ่งที่ควรพิจารณาเป็นพิเศษเกี่ยวกับโหมดไม่ระบุตัวตนของ Chrome

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

โปรดระวังการตอบกลับที่ไม่ชัดเจน

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

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

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