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

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

Minko Gechev

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

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

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

ขอแนะนำ Angular Service Worker

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

หากต้องการเพิ่ม Service Worker ให้เรียกใช้คําสั่งนี้ใน 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

นี่คือ Service Worker ของ 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 ไว้ Service Worker จะแคชชิ้นงานที่ระบุไว้ทั้งหมดไว้ล่วงหน้า ซึ่งตอนนี้รวมถึงรูปภาพ PNG ด้วย

การระบุชิ้นงานอื่นๆ ที่จะแคชไว้ล่วงหน้านั้นทําได้ง่ายๆ เพียงอัปเดตรูปแบบในกลุ่มชิ้นงานทรัพยากร app

บทสรุป

การใช้ Service Worker เพื่อแคชล่วงหน้าจะช่วยปรับปรุงประสิทธิภาพของแอปด้วยการบันทึกเนื้อหาลงในแคชในเครื่อง ซึ่งทำให้เนื้อหาเชื่อถือได้มากขึ้นในเครือข่ายที่ไม่ดี วิธีใช้การแคชล่วงหน้ากับ Angular และ Angular CLI

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