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

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

Minko Gechev

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

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

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

สร้าง 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 ใช้งานจริง

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

บทสรุป

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

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