Web App Manifest: คู่มือการตั้งค่า Progressive Web App

Web App Manifest คือไฟล์ JSON ที่ให้ข้อมูลเกี่ยวกับเว็บแอปพลิเคชันของคุณแก่เบราว์เซอร์และระบบปฏิบัติการ ข้อมูลนี้จะถูกใช้เมื่อแอปถูกติดตั้งบนอุปกรณ์ของผู้ใช้ โดยจะกำหนดลักษณะหน้าตาและการทำงานในฐานะ Progressive Web App (PWA) เปรียบเสมือนพิมพ์เขียวที่เปลี่ยนเว็บไซต์ของคุณให้กลายเป็นประสบการณ์ที่เหมือนแอปและสามารถติดตั้งได้ การตั้งค่า Manifest ที่ดีมีความสำคัญอย่างยิ่งต่อการมีส่วนร่วมและการค้นพบของผู้ใช้

Progressive Web App (PWA) คืออะไร?

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

• เชื่อถือได้ (Reliable): โหลดทันทีและทำงานแบบออฟไลน์หรือบนเครือข่ายคุณภาพต่ำได้ด้วย Service Worker
• รวดเร็ว (Fast): ตอบสนองต่อการโต้ตอบของผู้ใช้อย่างรวดเร็วด้วยแอนิเมชันที่ลื่นไหลและการเลื่อนที่ไม่สะดุด
• น่ามีส่วนร่วม (Engaging): มอบประสบการณ์ผู้ใช้ที่สมจริงด้วยฟีเจอร์ต่างๆ เช่น การแจ้งเตือนแบบพุชและความสามารถในการติดตั้งบนหน้าจอหลัก

บทบาทของ Web App Manifest

Web App Manifest เป็นหัวใจสำคัญของ PWA โดยให้ข้อมูลที่จำเป็นสำหรับเบราว์เซอร์เพื่อ:

• ติดตั้ง PWA: ทำให้ผู้ใช้สามารถติดตั้งเว็บแอปบนอุปกรณ์ของตน เพิ่มไปยังหน้าจอหลักหรือตัวเปิดแอปได้
• แสดงผล PWA อย่างถูกต้อง: กำหนดชื่อแอป ไอคอน สีธีม และลักษณะทางภาพอื่นๆ
• ควบคุมการทำงานของ PWA: ระบุว่าแอปควรเปิดตัวอย่างไร (เช่น ในโหมดเต็มหน้าจอหรือเป็นหน้าต่างเดี่ยว) และควรทำงานร่วมกับระบบปฏิบัติการอย่างไร

การสร้างไฟล์ `manifest.json` ของคุณ

Web App Manifest เป็นไฟล์ JSON ซึ่งโดยทั่วไปจะชื่อ `manifest.json` ควรวางไว้ในไดเรกทอรีราก (root directory) ของเว็บแอปพลิเคชันของคุณ นี่คือตัวอย่างพื้นฐาน:

            {
  "name": "My Awesome PWA",
  "short_name": "Awesome PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

เรามาดูรายละเอียดของคุณสมบัติแต่ละอย่างกัน:

`name`

ชื่อเต็มของเว็บแอปพลิเคชันของคุณ ชื่อนี้จะแสดงต่อผู้ใช้เมื่อมีข้อความแจ้งให้ติดตั้งแอปและในตัวเปิดแอป

ตัวอย่าง:

            "name": "Global News App"
            

              
                Copy
              
            
          

`short_name`

ชื่อย่อของแอปของคุณ ใช้ในกรณีที่มีพื้นที่จำกัด เช่น บนหน้าจอหลักหรือในตัวเปิดแอป ควรตั้งให้กระชับ

ตัวอย่าง:

            "short_name": "Global News"
            

              
                Copy
              
            
          

`start_url`

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

ตัวอย่าง:

            "start_url": "/"
            

              
                Copy
              
            
          

คุณยังสามารถใช้ URL พร้อมพารามิเตอร์คิวรีเพื่อติดตามว่าผู้ใช้เปิด PWA ของคุณอย่างไร:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

กำหนดวิธีการแสดงผลของแอปเมื่อเปิดใช้งาน มีตัวเลือกหลายอย่าง:

• `standalone`: แอปจะเปิดในหน้าต่างระดับบนสุดของตัวเอง โดยไม่มีองค์ประกอบ UI ของเบราว์เซอร์ เช่น แถบที่อยู่
• `fullscreen`: แอปจะใช้พื้นที่เต็มหน้าจอทั้งหมด ซ่อนแม้กระทั่งแถบสถานะ
• `minimal-ui`: คล้ายกับ `standalone` แต่มี UI ของเบราว์เซอร์น้อยที่สุด เช่น ปุ่มย้อนกลับและปุ่มรีเฟรช
• `browser`: แอปจะเปิดในแท็บหรือหน้าต่างเบราว์เซอร์ปกติ

คำแนะนำ: `standalone` โดยทั่วไปเป็นตัวเลือกที่นิยมสำหรับ PWA

ตัวอย่าง:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

สีพื้นหลังของหน้าจอเริ่มต้น (splash screen) ของแอปเมื่อเปิดใช้งาน สิ่งนี้สำคัญเพื่อให้การเปลี่ยนจากไอคอนแอปไปยังเนื้อหาของแอปเป็นไปอย่างราบรื่น

ตัวอย่าง:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

สีธีมที่ใช้ในการจัดรูปแบบ UI ของแอป เช่น แถบสถานะบน Android สีนี้ควรตรงกับแบรนด์ของแอปคุณ

ตัวอย่าง:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

อาร์เรย์ของออบเจ็กต์ ซึ่งแต่ละออบเจ็กต์แทนไอคอนสำหรับแอป คุณควรจัดเตรียมไอคอนหลายขนาดเพื่อให้แน่ใจว่าแอปจะดูดีบนอุปกรณ์และความละเอียดที่แตกต่างกัน

คุณสมบัติสำหรับแต่ละไอคอน:

• `src`: URL ของไฟล์รูปภาพไอคอน
• `sizes`: ขนาดของไอคอนในหน่วยพิกเซล (เช่น "192x192")
• `type`: MIME type ของไฟล์รูปภาพไอคอน (เช่น "image/png")

ขนาดไอคอนที่แนะนำ:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

ตัวอย่าง:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

คุณสมบัติเพิ่มเติมของ Manifest

ในขณะที่คุณสมบัติด้านบนเป็นที่นิยมใช้มากที่สุด Web App Manifest ยังรองรับตัวเลือกอื่นๆ อีกมากมายสำหรับการกำหนดค่า PWA ของคุณ:

`id`

ตัวระบุที่ไม่ซ้ำกันสำหรับ PWA ของคุณ สิ่งนี้สำคัญเพื่อป้องกันความขัดแย้งหากคุณมี PWA หลายตัวที่มีชื่อเดียวกัน

ตัวอย่าง:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

กำหนดขอบเขตการนำทางของแอป ซึ่งจะกำหนดว่า URL ใดภายในเว็บไซต์ของคุณที่ถือว่าเป็นส่วนหนึ่งของ PWA หากผู้ใช้นำทางออกนอกขอบเขต แอปจะเปิดในแท็บเบราว์เซอร์ปกติ

ตัวอย่าง:

            "scope": "/app/"
            

              
                Copy
              
            
          

ในตัวอย่างนี้ เฉพาะ URL ที่ขึ้นต้นด้วย `/app/` เท่านั้นที่จะถือว่าเป็นส่วนหนึ่งของ PWA

`orientation`

ระบุการวางแนวหน้าจอที่ต้องการสำหรับแอป ตัวเลือกได้แก่ `portrait`, `landscape`, `any` และอื่นๆ

ตัวอย่าง:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

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

ตัวอย่าง:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

ตัวอย่างนี้บ่งชี้ว่ามีแอปเนทีฟที่เกี่ยวข้องบน Google Play Store ด้วย ID `com.example.myapp`

`prefer_related_applications`

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

ตัวอย่าง:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

อาร์เรย์ของสตริงที่แสดงถึงหมวดหมู่ของแอป สิ่งนี้สามารถช่วยให้ผู้ใช้ค้นหาแอปของคุณใน App Store หรือผลการค้นหาได้

ตัวอย่าง:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

กำหนดรายการทางลัดที่ผู้ใช้สามารถเข้าถึงได้จากไอคอนแอปบนหน้าจอหลักของพวกเขา สิ่งนี้ช่วยให้ผู้ใช้สามารถทำงานทั่วไปภายในแอปได้อย่างรวดเร็ว

ตัวอย่าง:

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

การเชื่อมโยง Manifest กับเว็บแอปของคุณ

เมื่อคุณสร้างไฟล์ `manifest.json` แล้ว คุณต้องเชื่อมโยงไปยังเว็บแอปพลิเคชันของคุณโดยการเพิ่มแท็ก `` ในส่วน `` ของ HTML ของคุณ:

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

              
                Copy
              
            
          

การตรวจสอบความถูกต้องของ Manifest

การตรวจสอบไฟล์ `manifest.json` ของคุณเป็นสิ่งสำคัญเพื่อให้แน่ใจว่ามีรูปแบบที่ถูกต้องและมีคุณสมบัติที่จำเป็นทั้งหมด คุณสามารถใช้เครื่องมือออนไลน์ เช่น JSONLint หรือ Chrome DevTools เพื่อตรวจสอบ Manifest ของคุณ

การทดสอบ PWA ของคุณ

หลังจากสร้างและเชื่อมโยง Manifest ของคุณแล้ว คุณควรทดสอบ PWA ของคุณในเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าทำงานได้ตามที่คาดไว้ ใช้ Chrome DevTools (Application -> Manifest) เพื่อตรวจสอบ Manifest ของคุณและวินิจฉัยปัญหาใดๆ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการตั้งค่า Web App Manifest

ต่อไปนี้คือแนวทางปฏิบัติที่ดีที่สุดที่ควรคำนึงถึงเมื่อกำหนดค่า Web App Manifest ของคุณ:

• ระบุคุณสมบัติที่จำเป็นทั้งหมด: ตรวจสอบให้แน่ใจว่าคุณได้รวมคุณสมบัติที่จำเป็นทั้งหมด เช่น `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` และ `icons`
• ใช้ขนาดไอคอนที่เหมาะสม: จัดเตรียมไอคอนหลายขนาดเพื่อรองรับอุปกรณ์และความละเอียดที่แตกต่างกัน
• เลือกโหมดการแสดงผลที่ถูกต้อง: เลือกโหมด `display` ที่เหมาะสมกับประสบการณ์ผู้ใช้ของแอปของคุณมากที่สุด `standalone` โดยทั่วไปเป็นตัวเลือกที่นิยม
• ตรวจสอบความถูกต้องของ Manifest: ตรวจสอบไฟล์ `manifest.json` ของคุณเสมอเพื่อให้แน่ใจว่ามีรูปแบบที่ถูกต้อง
• ทดสอบ PWA ของคุณ: ทดสอบ PWA ของคุณในเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าทำงานได้ตามที่คาดไว้
• ปรับให้เหมาะกับ SEO: ใช้คำหลักที่เกี่ยวข้องใน `name`, `short_name` และ `description` เพื่อปรับปรุงการค้นพบแอปของคุณ
• พิจารณาการแปลเป็นภาษาท้องถิ่น (Localization): หากแอปของคุณกำหนดเป้าหมายผู้ชมทั่วโลก ให้พิจารณาจัดทำ Manifest เวอร์ชันแปลพร้อมชื่อ คำอธิบาย และไอคอนที่แตกต่างกันสำหรับภาษาต่างๆ

ตัวอย่าง Web App Manifest ที่ตั้งค่าไว้อย่างดี

นี่คือตัวอย่างบางส่วนของ Web App Manifest ที่ตั้งค่าไว้อย่างดีจาก PWA ยอดนิยม:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite is a faster, data-friendly way to see what's happening in the world.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Order your favorite Starbucks drinks and food with the app.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

อนาคตของ Web App Manifest

Web App Manifest เป็นมาตรฐานที่กำลังพัฒนา โดยมีการเพิ่มฟีเจอร์และความสามารถใหม่ๆ เข้ามาอย่างต่อเนื่อง โปรดติดตามการอัปเดตและคำแนะนำล่าสุดจาก W3C เพื่อให้แน่ใจว่า PWA ของคุณใช้ประโยชน์จากเทคโนโลยีล่าสุดอย่างเต็มที่

สรุป

Web App Manifest เป็นองค์ประกอบสำคัญของ PWA ใดๆ ด้วยการกำหนดค่า Manifest ของคุณอย่างถูกต้อง คุณสามารถมอบประสบการณ์ผู้ใช้ที่ราบรื่นและน่ามีส่วนร่วม ทำให้เว็บแอปของคุณให้ความรู้สึกเหมือนแอปพลิเคชันเนทีฟ คู่มือนี้ได้ให้ภาพรวมที่ครอบคลุมของ Web App Manifest รวมถึงคุณสมบัติ แนวทางปฏิบัติที่ดีที่สุด และตัวอย่างต่างๆ ด้วยการปฏิบัติตามแนวทางเหล่านี้ คุณสามารถปลดล็อกศักยภาพสูงสุดของ PWA และมอบประสบการณ์ผู้ใช้ที่เหนือกว่าให้กับผู้ใช้ทั่วโลก

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