สร้าง Progressive Web App ด้วย Angular CLI

คุณต้องการให้แอป Angular ติดตั้งได้ใช่ไหม อย่ารอช้า!

Minko Gechev

ในโพสต์นี้ คุณจะได้ดูวิธีใช้อินเทอร์เฟซบรรทัดคำสั่ง Angular (CLI) เพื่อสร้าง Progressive Web App (PWA)

คุณดูตัวอย่างโค้ดได้จากคู่มือนี้ใน GitHub

สร้าง PWA ที่ติดตั้งได้

หากต้องการทำให้แอปพลิเคชัน Angular เป็น PWA ก็เพียงแค่เรียกใช้คำสั่งเดียว

ng add @angular/pwa

คำสั่งนี้จะ

• สร้างโปรแกรมทำงานของบริการด้วยการกำหนดค่าการแคชเริ่มต้น
• สร้างไฟล์ Manifest ซึ่งจะบอกเบราว์เซอร์ว่าแอปของคุณควรทำงานอย่างไรเมื่อติดตั้งในอุปกรณ์ของผู้ใช้
• เพิ่มลิงก์ไปยังไฟล์ Manifest ใน index.html
• เพิ่มแท็ก <meta> theme-color ใน index.html
• สร้างไอคอนแอปในไดเรกทอรี src/assets

โดยค่าเริ่มต้น Service Worker ควรได้รับการลงทะเบียนภายในไม่กี่วินาทีนับจากการโหลดหน้าเว็บครั้งแรก หากไม่ ให้พิจารณาแก้ไข registrationStrategy

ปรับแต่ง PWA

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

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

ลองดูไฟล์ Manifest ที่สร้างโดย Angular CLI

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

คุณปรับแต่งพร็อพเพอร์ตี้เหล่านี้ได้โดยเปลี่ยนค่าที่เกี่ยวข้องใน manifest.webmanifest

PWA อ้างอิงไฟล์ Manifest ที่มีองค์ประกอบ link ใน index.html เมื่อเบราว์เซอร์พบข้อมูลอ้างอิงแล้ว คุณจะเห็นข้อความเพิ่มลงในหน้าจอหลักดังนี้

เนื่องจากสคีมา ng-add เพิ่มทุกอย่างที่จำเป็นในการทำให้แอปติดตั้งได้ สคีมาเหล่านี้จึงสร้างไอคอนทางลัดบางอย่างที่จะปรากฏเมื่อผู้ใช้เพิ่มแอปลงในเดสก์ท็อป ดังนี้

อย่าลืมปรับแต่งพร็อพเพอร์ตี้และไอคอนไฟล์ Manifest ก่อนทำให้ PWA ใช้งานจริง

บทสรุป

วิธีสร้างแอป Angular ที่ติดตั้งได้

1. เพิ่ม @angular/pwa ลงในโปรเจ็กต์โดยใช้ Angular CLI
2. แก้ไขตัวเลือกในไฟล์ manifest.webmanifest ให้เหมาะกับโปรเจ็กต์ของคุณ
3. อัปเดตไอคอนในไดเรกทอรี src/assets/icons ให้เหมาะกับโปรเจ็กต์ของคุณ
4. แก้ไข theme-color ใน index.html (ไม่บังคับ)