เทคนิคทั่วไปในการสร้างแอปพลิเคชันที่ทำงานแบบออฟไลน์

Jake Archibald

Service Worker ช่วยให้นักพัฒนาแอปแก้ปัญหาการเชื่อมต่อเครือข่ายได้ คุณจะควบคุมการแคชและวิธีจัดการคำขอได้ ซึ่งหมายความว่าคุณสามารถสร้างรูปแบบของคุณเองได้ ลองดูรูปแบบที่เป็นไปได้ 2-3 รูปแบบแยกกัน แต่ในทางปฏิบัติ คุณน่าจะใช้รูปแบบเหล่านี้ร่วมกันโดยขึ้นอยู่กับ URL และบริบท

ดูการสาธิตการทำงานของรูปแบบเหล่านี้ได้ที่ Trained-to-thrill

ควรจัดเก็บทรัพยากรเมื่อใด

Service Worker ช่วยให้คุณจัดการคำขอได้อย่างอิสระจากการแคช ดังนั้นฉันจะสาธิตแยกกัน ก่อนอื่นมาดูว่าเมื่อใดที่คุณควรใช้แคช

เมื่อติดตั้งเป็นทรัพยากร Dependency

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

เหมาะสำหรับ: CSS, รูปภาพ, แบบอักษร, JS, เทมเพลต หรือสิ่งอื่นๆ ที่คุณ พิจารณาว่าคงที่สำหรับเว็บไซต์เวอร์ชันนั้น

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

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open('mysite-static-v3').then(function (cache) {
      return cache.addAll([
        '/css/whatever-v3.css',
        '/css/imgs/sprites-v6.png',
        '/css/fonts/whatever-v8.woff',
        '/js/all-min-v4.js',
        // etc.
      ]);
    }),
  );
});

event.waitUntil ใช้สัญญาเพื่อกำหนดระยะเวลาและความสำเร็จของการติดตั้ง หาก Promise ปฏิเสธ ระบบจะถือว่าการติดตั้งล้มเหลวและจะละทิ้ง Service Worker นี้ (หากเวอร์ชันเก่ากว่ากำลังทำงานอยู่ ระบบจะปล่อยให้ทำงานต่อไป) caches.open() และcache.addAll()สัญญาการคืนสินค้า หากดึงข้อมูลทรัพยากรใดไม่สำเร็จ การเรียกใช้