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

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

Houssein Djirdeh

หมายเหตุ: หากคุณยังไม่เข้าใจแนวคิดพื้นฐานเกี่ยวกับ Service Worker และการแคชล่วงหน้า โปรดอ่านคำแนะนำการแคชล่วงหน้าด้วย Workbox ก่อน

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

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

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

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

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

หมายเหตุ: ดูรายละเอียดเพิ่มเติมเกี่ยวกับกลยุทธ์การแคชทั้งหมดที่ Service Worker ใช้ได้ได้ที่ตำราอาหารออฟไลน์

การจัดการกลยุทธ์แคชก่อน

การพึ่งพาแคชของ 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 นี้