การแคชชิ้นงานด้วย Service Worker จะช่วยเพิ่มความเร็วในการเข้าชมซ้ำและให้การสนับสนุนแบบออฟไลน์ได้ Workbox ทำให้การดำเนินการนี้เป็นเรื่องง่ายและรวมอยู่ในแอป Create React โดยค่าเริ่มต้น
Workbox
มีอยู่ในตัว
สร้างแอป React (CRA) ด้วยการกำหนดค่าเริ่มต้นที่แคชเนื้อหาคงที่ทั้งหมดในแอปพลิเคชันของคุณไว้ล่วงหน้าพร้อมทุกบิลด์
![คำขอ/การตอบกลับด้วย Service Worker](https://web.dev/static/articles/precache-with-workbox-react/image/requestsresponses-servi-008f1f41abc53.png?authuser=6&hl=th)
มีประโยชน์อย่างไร
โปรแกรมทำงานของบริการช่วยให้คุณจัดเก็บทรัพยากรที่สำคัญไว้ในแคช (การแคชล่วงหน้า) เพื่อให้ผู้ใช้โหลดหน้าเว็บเป็นครั้งที่ 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
เนื่องจากโปรแกรมทำงานของบริการจะแคชเนื้อหาแบบคงที่ทั้งหมด ให้ลองใช้แอปพลิเคชันขณะออฟไลน์ดังนี้
- ในแท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เปิดใช้ช่องทำเครื่องหมายออฟไลน์เพื่อจำลองประสบการณ์แบบออฟไลน์
- โหลดแอปซ้ำ
แอปพลิเคชันจะทำงานในลักษณะเดียวกันแม้จะไม่มีการเชื่อมต่อเครือข่ายก็ตาม
การแก้ไขกลยุทธ์การแคช
กลยุทธ์การแคชล่วงหน้าที่ใช้โดย Workbox ใน CRA คือแคชก่อน โดยจะมีการดึงเนื้อหาแบบคงที่ทั้งหมดจากแคชของ Service Worker หากไม่สำเร็จ (เช่น หากไม่ได้แคชทรัพยากรไว้) จะมีการสร้างคำขอเครือข่าย ซึ่งเป็นวิธีที่ระบบยังคงแสดงเนื้อหาแก่ผู้ใช้แม้ว่าผู้ใช้จะอยู่ในสถานะออฟไลน์ที่สมบูรณ์ก็ตาม
แม้ว่า Workbox จะรองรับการกำหนดกลยุทธ์และแนวทางที่แตกต่างกันในการแคชทรัพยากรแบบคงที่และแบบไดนามิก แต่คุณจะแก้ไขหรือเขียนทับการกำหนดค่าเริ่มต้นใน CRA ไม่ได้ เว้นแต่คุณจะดีดออกทั้งหมด อย่างไรก็ตาม เรามีข้อเสนอที่เปิดอยู่ให้สำรวจการเพิ่มการรองรับไฟล์ workbox.config.js
ภายนอก ซึ่งจะช่วยให้นักพัฒนาแอปลบล้างการตั้งค่าเริ่มต้นได้โดยการสร้างไฟล์ workbox.config.js
ไฟล์เดียว
การจัดการกลยุทธ์ที่เน้นแคชเป็นหลัก
การใช้แคชของ Service Worker ก่อนแล้วกลับไปใช้เครือข่ายนั้นเป็นวิธีที่ยอดเยี่ยมในการสร้างเว็บไซต์ที่โหลดได้เร็วขึ้นเมื่อเข้าชมครั้งต่อๆ ไป และทำงานแบบออฟไลน์ได้ในระดับหนึ่ง อย่างไรก็ตาม มี 2-3 สิ่งที่ต้องคำนึงถึง ได้แก่
- ระบบจะทดสอบลักษณะการแคชของ Service Worker ได้อย่างไร
- จะมีข้อความแจ้งให้ผู้ใช้ทราบว่ากำลังดูเนื้อหาที่แคชไว้อยู่ไหม
เอกสาร CRA จะอธิบายประเด็นเหล่านี้และรายละเอียดเพิ่มเติม
บทสรุป
ใช้ Service Worker เพื่อแคชทรัพยากรสำคัญในแอปพลิเคชันของคุณล่วงหน้าเพื่อมอบประสบการณ์การใช้งานที่เร็วขึ้นแก่ผู้ใช้ รวมถึงการสนับสนุนแบบออฟไลน์
- หากคุณใช้ CRA ให้เปิดใช้ Service Worker ที่กำหนดค่าไว้ล่วงหน้าใน
src/index.js
- หากคุณไม่ได้ใช้ CRA เพื่อสร้างแอปพลิเคชัน React ให้ใส่หนึ่งใน Workbox ของไลบรารีจำนวนมากที่มีอยู่ เช่น
workbox-webpack-plugin
ลงในกระบวนการสร้างของคุณ - คอยดูเวลาที่ CRA จะรองรับไฟล์การลบล้าง
workbox.config.js
ในปัญหาเกี่ยวกับ GitHub นี้