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

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

Houssein Djirdeh

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

คำขอ/คำตอบกับ Service Worker

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

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

เวิร์กบ็อกซ์ใน CRA

กล่องงานคือชุดเครื่องมือที่ช่วยให้คุณสร้างและดูแลรักษาบริการ ผู้ปฏิบัติงาน ใน 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

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

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

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

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

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

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

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

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

  • จะทดสอบพฤติกรรมการแคชโดย 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