การแคชล่วงหน้าใน Create React App ด้วย Workbox

การแคชเนื้อหาด้วย Service Worker จะช่วยเพิ่มความเร็วในการเข้าชมซ้ำและรองรับการใช้งานแบบออฟไลน์ Workbox ช่วยให้ดำเนินการนี้ได้ง่ายและรวมอยู่ใน Create React App โดยค่าเริ่มต้น

Houssein Djirdeh

Workbox มีอยู่ใน Create React App (CRA) พร้อมการกำหนดค่าเริ่มต้นที่แคชชิ้นงานแบบคงที่ทั้งหมดในแอปพลิเคชันไว้ล่วงหน้าในทุกบิลด์

คำขอ/การตอบกลับด้วย Service Worker

เหตุใดจึงมีประโยชน์

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

Workbox ใน CRA

Workbox คือชุดเครื่องมือที่ช่วยให้คุณสร้างและดูแลรักษา Service Worker ได้ ใน CRA workbox-webpack-plugin จะรวมอยู่ในบิลด์เวอร์ชันที่ใช้งานจริงอยู่แล้ว และต้องเปิดใช้ในไฟล์ src/index.js เท่านั้นเพื่อลงทะเบียน Service Worker ใหม่กับทุกบิลด์ ดังนี้

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

ต่อไปนี้คือตัวอย่างแอป React ที่สร้างด้วย CRA ซึ่งเปิดใช้ Service Worker ผ่านไฟล์นี้

วิธีดูว่ามีการแคชชิ้นงานใดอยู่

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ
  • กด `Control+Shift+J` (หรือ `Command+Option+J` บน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
  • คลิกแท็บเครือข่าย
  • โหลดแอปซ้ำ

คุณจะเห็นว่าแทนที่จะแสดงขนาดเพย์โหลด คอลัมน์ Size จะแสดงข้อความ (from ServiceWorker) เพื่อระบุว่าทรัพยากรเหล่านี้ดึงมาจาก Service Worker

คำขอเครือข่ายที่มี Service Worker

เนื่องจาก Service Worker จะแคชเนื้อหาแบบคงที่ทั้งหมด ให้ลองใช้แอปพลิเคชันขณะออฟไลน์

  1. ในแท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เลือกช่องทำเครื่องหมายออฟไลน์เพื่อจำลองประสบการณ์การใช้งานแบบออฟไลน์
  2. โหลดแอปซ้ำ

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

การแก้ไขกลยุทธ์การแคช

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

แม้ว่า Workbox จะรองรับการกำหนดกลยุทธ์และแนวทางต่างๆ ในการแคชทรัพยากรแบบคงที่และแบบไดนามิก แต่การกำหนดค่าเริ่มต้นใน CRA จะแก้ไขหรือเขียนทับไม่ได้ เว้นแต่คุณจะนำออกทั้งหมด อย่างไรก็ตาม มีข้อเสนอแบบเปิดเพื่อสำรวจการเพิ่มการรองรับไฟล์ workbox.config.js ภายนอก ซึ่งจะช่วยให้นักพัฒนาแอปสามารถลบล้างการตั้งค่าเริ่มต้นได้โดยการสร้างไฟล์ workbox.config.js เพียงไฟล์เดียว

การจัดการกลยุทธ์ที่ใช้แคชเป็นหลัก

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

  • จะทดสอบลักษณะการทำงานของการแคชโดย Service Worker ได้อย่างไร
  • ควรมีข้อความแจ้งให้ผู้ใช้ทราบว่ากำลังดูเนื้อหาที่แคชไว้หรือไม่

เอกสารประกอบของ CRA จะอธิบายประเด็นเหล่านี้และอื่นๆ โดยละเอียด

บทสรุป

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

  1. หากคุณใช้ CRA ให้เปิดใช้ Service Worker ที่กำหนดค่าไว้ล่วงหน้าใน src/index.js
  2. หากคุณไม่ได้ใช้ CRA เพื่อสร้างแอปพลิเคชัน React ให้รวมไลบรารีรายการใดรายการหนึ่งที่ Workbox มีให้ เช่น workbox-webpack-plugin ไว้ในกระบวนการบิลด์
  3. คอยติดตามว่า CRA จะรองรับไฟล์ลบล้าง workbox.config.js เมื่อใดในปัญหา GitHub นี้