ใช้ Angular Service Worker เพื่อทำให้แอปทำงานเร็วและน่าเชื่อถือมากขึ้นในเครือข่ายที่การเชื่อมต่อไม่ดี
การจัดการกับการเชื่อมต่อที่จำกัด
เมื่อผู้ใช้มีสิทธิ์เข้าถึงเครือข่ายที่จำกัดหรือไม่มีเลย ฟังก์ชันการทำงานของเว็บแอปอาจแย่ลงอย่างมากและมักล้มเหลว การใช้โปรแกรมทำงานของบริการในการแคชล่วงหน้าช่วยให้คุณสกัดกั้นคำขอของเครือข่ายและส่งคำตอบจากแคชในเครื่องได้โดยตรง แทนที่จะเรียกคำขอจากเครือข่าย เมื่อแคชเนื้อหาของแอปแล้ว วิธีนี้ช่วยเพิ่มความเร็วของแอปและทำให้แอปทำงานได้เมื่อผู้ใช้ออฟไลน์
โพสต์นี้จะอธิบายวิธีตั้งค่าการแคชล่วงหน้าในแอป Angular และจะถือว่าคุณคุ้นเคยกับการแคชล่วงหน้าและ Service Worker โดยทั่วไปอยู่แล้ว หากต้องการทบทวนความรู้ โปรดดูโพสต์ Service Worker และ Cache Storage API
ขอแนะนำ Angular Service Worker
ทีม Angular มีโมดูล Service Worker ที่มีฟังก์ชันการแคชล่วงหน้าซึ่งผสานรวมกับเฟรมเวิร์กและอินเทอร์เฟซบรรทัดคำสั่ง Angular (CLI) ได้ดี
หากต้องการเพิ่มโปรแกรมทำงานของบริการ ให้เรียกใช้คำสั่งนี้ใน CLI
ng add @angular/pwa
ตอนนี้ควรติดตั้ง @angular/service-worker
และ @angular/pwa
ในแอปแล้ว และควรจะปรากฏใน package.json
สคีมาของ ng-add
ยังเพิ่มไฟล์ที่ชื่อว่า ngsw-config.json
ลงในโปรเจ็กต์ซึ่งใช้เพื่อกำหนดค่าโปรแกรมทำงานของบริการได้ (ไฟล์นี้มีการกำหนดค่าเริ่มต้นที่คุณจะปรับแต่งอีกเล็กน้อยในภายหลัง)
ต่อไปให้สร้างโปรเจ็กต์สำหรับเวอร์ชันที่ใช้งานจริง
ng build --prod
ภายในไดเรกทอรี dist/service-worker-web-dev
คุณจะเห็นไฟล์ชื่อ ngsw.json
ไฟล์นี้บอกวิธีแคชเนื้อหาในแอป Angular Service Worker ไฟล์จะสร้างขึ้นระหว่างกระบวนการบิลด์ตามการกำหนดค่า (ngsw-config.json
) และเนื้อหาที่สร้างขึ้น ณ เวลาที่สร้าง
ตอนนี้ให้เริ่มเซิร์ฟเวอร์ HTTP ในไดเรกทอรีที่มีเนื้อหาเวอร์ชันที่ใช้งานจริงของแอป จากนั้นเปิด URL สาธารณะ และดูคำขอเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome วิธีการมีดังนี้
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
โปรดทราบว่าแท็บเครือข่ายมีเนื้อหาแบบคงที่จำนวนมากที่สคริปต์ ngsw-worker.js
ดาวน์โหลดโดยตรงในเบื้องหลัง ได้แก่
นี่คือ Angular Service Worker ที่แคชเนื้อหาแบบคงที่ไว้ล่วงหน้าที่ระบุไว้ในไฟล์ Manifest ngsw.json
ที่สร้างขึ้น
แต่ขาดชิ้นงานสำคัญ 1 รายการ: nyan.png
หากต้องการแคชรูปภาพนี้ล่วงหน้า คุณต้องเพิ่มรูปแบบที่รวมรูปภาพไว้ใน ngsw-config.json
ซึ่งอยู่ในรูทของพื้นที่ทำงาน โดยทำดังนี้
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/assets/*.png"
]
}
},
...
}
การเปลี่ยนแปลงนี้จะเพิ่มรูปภาพ PNG ทั้งหมดในโฟลเดอร์ /assets
ลงในกลุ่มชิ้นงานทรัพยากร app
เนื่องจากinstallMode
ของกลุ่มชิ้นงานนี้ได้รับการตั้งค่าเป็น prefetch
โปรแกรมทำงานของบริการจะแคชชิ้นงานที่ระบุทั้งหมดล่วงหน้า ซึ่งตอนนี้จะมีรูปภาพ PNG อยู่ด้วย
การระบุเนื้อหาอื่นๆ ที่จะแคชล่วงหน้านั้นทำได้ง่ายมาก นั่นคือ อัปเดตรูปแบบในกลุ่มชิ้นงานทรัพยากร app
บทสรุป
การใช้ Service Worker เพื่อแคชล่วงหน้าจะช่วยปรับปรุงประสิทธิภาพของแอปด้วยการบันทึกเนื้อหาลงในแคชในเครื่อง ซึ่งทำให้น่าเชื่อถือมากขึ้นในเครือข่ายที่ไม่ค่อยดี วิธีใช้การแคชล่วงหน้าด้วย Angular และ Angular CLI
- เพิ่มแพ็กเกจ
@angular/pwa
ในโปรเจ็กต์ - ควบคุมสิ่งที่ Service Worker จะแคชโดยการแก้ไข
ngsw-config.json