Progressive Web App: จากแท็บไปยังแถบงาน

1. ยินดีต้อนรับ

ในแล็บนี้ คุณจะได้นำเว็บแอปพลิเคชันที่มีอยู่มาทำให้ติดตั้งได้ นี่คือ Codelab ประกอบชุดที่ 4 สำหรับเวิร์กชอป Progressive Web App Codelab ก่อนหน้าคือ IndexedDB ยังมี Codelab อีก 4 รายการในชุดนี้

สิ่งที่คุณจะได้เรียนรู้

  • เขียน Service Worker ด้วยตนเอง
  • เพิ่ม Service Worker ลงในเว็บแอปพลิเคชันที่มีอยู่
  • ใช้ Service Worker และ Cache Storage API เพื่อให้ทรัพยากรพร้อมใช้งานแบบออฟไลน์

สิ่งที่ควรทราบ

  • HTML และ JavaScript พื้นฐาน

สิ่งที่คุณจะต้องมี

2. เตรียมตัว

เริ่มต้นด้วยการโคลนหรือดาวน์โหลดโค้ดเริ่มต้นที่จำเป็นต่อการทำ Codelab นี้ให้เสร็จสมบูรณ์

หากโคลนที่เก็บ โปรดตรวจสอบว่าคุณอยู่ในสาขา pwa04--tab-to-taskbar ไฟล์ ZIP มีโค้ดสำหรับสาขานั้นด้วย

โค้ดเบสนี้ต้องใช้ Node.js 14 ขึ้นไป เมื่อมีโค้ดแล้ว ให้เรียกใช้ npm ci จากบรรทัดคำสั่งในโฟลเดอร์ของโค้ดเพื่อติดตั้งการอ้างอิงทั้งหมดที่คุณต้องใช้ จากนั้นเรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์สำหรับพัฒนาสำหรับโค้ดแล็บ

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

ไฟล์สำคัญ

  • index.html - HTML ของแอปพลิเคชันหลัก

3. สร้างไฟล์ Manifest ของเว็บแอป

ไฟล์ Manifest ของเว็บแอปจะอธิบาย PWA เพื่อให้เบราว์เซอร์ทราบว่าเว็บแอปของคุณติดตั้งได้ และที่สำคัญคือวิธีแสดงในอุปกรณ์ที่จะติดตั้ง พร้อมกับ Service Worker ที่ทำงานได้ แต่ก่อนอื่นคุณต้องสร้างบัญชีดังกล่าว เพิ่มไฟล์ชื่อ manifest.json ในโฟลเดอร์ public ของเว็บแอป แล้วเพิ่มโค้ดต่อไปนี้ลงในไฟล์

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

อย่าลืมใส่ไอคอน Apple Touch สำหรับอุปกรณ์ iOS เพิ่มบรรทัดโค้ดต่อไปนี้ต่อจากแท็ก <title> ใน <head> ใน index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

คำอธิบาย

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

4. แนบไฟล์ Manifest กับ PWA

เมื่อสร้างไฟล์ Manifest แล้ว คุณต้องแนบไฟล์ดังกล่าวเพื่อให้เชื่อมโยงกับ PWA โดยให้เปิด index.html แล้วเพิ่มโค้ดต่อไปนี้ใต้แท็ก <title> ใน <head>

<link rel="manifest" href="/manifest.json" />

คำอธิบาย

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

5. เพิ่มทางลัด

วิธีหนึ่งที่ยอดเยี่ยมในการทำให้ PWA รู้สึกผสานรวมกับอุปกรณ์อย่างลึกซึ้งยิ่งขึ้นคือการจัดทางลัดเมนูบริบทไปยังฟังก์ชันการทำงานที่เฉพาะเจาะจงในแอปของคุณ การสลับโหมดกลางคืนใน PWA ช่วยให้เลือกโหมดได้โดยการตั้งค่าพารามิเตอร์การค้นหา mode เป็น night หรือ day ตั้งค่าทางลัด 2 รายการใน manifest.json ที่ทำสิ่งต่อไปนี้

  • เริ่ม PWA ในโหมด night หรือ day
  • ใช้ /images/logo.svg ที่มีขนาด 150x150 สำหรับไอคอน

6. ยินดีด้วย

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

Codelab ถัดไปในชุดนี้คือการแจ้งและวัดผลการติดตั้ง