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

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

Houssein Djirdeh

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

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

มีประโยชน์อย่างไร

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

พื้นที่ทำงานใน CRA

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

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

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

กลยุทธ์การแคชล่วงหน้าที่ใช้โดย Workbox ใน CRA คือแคชก่อน โดยจะมีการดึงเนื้อหาแบบคงที่ทั้งหมดจากแคชของ 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 นี้