การแคชล่วงหน้าด้วย Angular Service Worker

ใช้ Angular Service Worker เพื่อทำให้แอปทำงานเร็วขึ้นและน่าเชื่อถือมากขึ้นบนเครือข่ายที่มีการเชื่อมต่อไม่ดี

Minko Gechev

รับมือกับการเชื่อมต่อที่จำกัด

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

โพสต์นี้จะแนะนำวิธีตั้งค่าการแคชล่วงหน้าในแอป Angular โดยจะถือว่าคุณคุ้นเคยกับการแคชล่วงหน้าและ Service Worker ทั่วไปอยู่แล้ว หากต้องการทบทวนความจำ โปรดดูโพสต์ Service Worker และ Cache Storage API

ขอแนะนำ Service Worker ของ Angular

ทีม Angular เสนอโมดูลโปรแกรมทำงานของบริการที่มีฟังก์ชันการแคชล่วงหน้าซึ่งผสานรวมกับเฟรมเวิร์กและอินเทอร์เฟซบรรทัดคำสั่ง Angular (CLI) ได้ดี

หากต้องการเพิ่มโปรแกรมทำงานของบริการ ให้เรียกใช้คำสั่งนี้ใน CLI

ng add @angular/pwa

ตอนนี้คุณควรติดตั้ง @angular/service-worker และ @angular/pwa ในแอปแล้ว และควรปรากฏใน package.json สคีมาของ ng-add จะเพิ่มไฟล์ชื่อ ngsw-config.json ลงในโปรเจ็กต์ที่คุณใช้เพื่อกำหนดค่า Service Worker ได้ (ไฟล์นี้มีการกำหนดค่าเริ่มต้นซึ่งคุณจะต้องปรับแต่งในภายหลัง)

จากนั้นสร้างโปรเจ็กต์สำหรับเวอร์ชันที่ใช้งานจริง

ng build --prod

ภายในไดเรกทอรี dist/service-worker-web-dev คุณจะพบไฟล์ชื่อ ngsw.json ไฟล์นี้แจ้งให้โปรแกรมทำงานของบริการ Angular ทราบถึงวิธีแคชเนื้อหาในแอป ระบบจะสร้างไฟล์ขึ้นระหว่างขั้นตอนการสร้างตามการกำหนดค่า (ngsw-config.json) และเนื้อหาที่สร้างขึ้น ณ เวลาบิลด์

จากนั้นให้เริ่มเซิร์ฟเวอร์ HTTP ในไดเรกทอรีที่มีเนื้อหาของแอปในเวอร์ชันที่ใช้งานจริง จากนั้นเปิด URL สาธารณะและดูคำขอเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

  1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. คลิกแท็บเครือข่าย

โปรดทราบว่าแท็บเครือข่ายมีเนื้อหาแบบคงที่จำนวนมากที่ดาวน์โหลดในเบื้องหลังโดยตรงโดยสคริปต์ ngsw-worker.js

แอปตัวอย่าง

นี่คือโปรแกรมทำงานของบริการ Angular ที่แคชเนื้อหาแบบคงที่ล่วงหน้าที่ระบุไว้ในไฟล์ 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

  1. เพิ่มแพ็กเกจ @angular/pwa ลงในโปรเจ็กต์
  2. ควบคุมแคชของ Service Worker โดยแก้ไข ngsw-config.json