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

หากต้องการทำให้แอป Angular ติดตั้งได้ ไม่ต้องรอนานอีกต่อไป

Minko Gechev

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

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

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

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

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

ng add @angular/pwa

คำสั่งนี้จะทำสิ่งต่อไปนี้

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

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

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

หมายเหตุ: หากต้องการเปลี่ยน PWA กลับไปเป็นเว็บแอปมาตรฐาน เพียงนำการอ้างอิง manifest.webmanifest ออกจาก index.html

บทสรุป

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

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