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

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

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