เมื่อผู้ใช้ติดตั้ง PWA แล้ว ระบบจะดำเนินการต่อไปนี้
- มีไอคอนใน Launcher, หน้าจอหลัก, เมนูเริ่มต้น หรือแป้น Launcher
- แสดงผลลัพธ์เมื่อผู้ใช้ค้นหาแอปในอุปกรณ์ของตน
- มีหน้าต่างแยกต่างหากภายในระบบปฏิบัติการ
- มีการสนับสนุนสำหรับความสามารถบางอย่าง
เกณฑ์การติดตั้ง
ทุกเบราว์เซอร์มีเกณฑ์ที่ทำเครื่องหมายเมื่อเว็บไซต์หรือแอปเป็น Progressive Web App และติดตั้งสำหรับประสบการณ์แบบสแตนด์อโลนได้ ข้อมูลเมตาสำหรับ PWA จะกำหนดโดยไฟล์แบบ JSON ที่เรียกว่าไฟล์ Manifest ของเว็บแอป ซึ่งเราจะกล่าวถึงรายละเอียดในโมดูลถัดไป
เบราว์เซอร์ส่วนใหญ่ที่รองรับฟีเจอร์นี้จะใช้ไฟล์ Manifest ของเว็บแอปและพร็อพเพอร์ตี้บางอย่าง เช่น ชื่อแอป และการกำหนดค่าของประสบการณ์การใช้งานที่ติดตั้ง เนื่องจากเป็นข้อกำหนดขั้นต่ำในด้านความสามารถในการติดตั้ง ยกเว้น Safari สำหรับ macOS ซึ่งไม่รองรับความสามารถในการติดตั้ง
ข้อกำหนดในการอนุญาตการติดตั้งจะแตกต่างกันไปในแต่ละเบราว์เซอร์ บทความนี้จะให้รายละเอียดเกี่ยวกับเกณฑ์สำหรับ Google Chrome และมีลิงก์ไปยังข้อกำหนดสำหรับเบราว์เซอร์อื่นๆ
เนื่องจากการทดสอบว่า PWA ตรงตามข้อกำหนดด้านความสามารถในการติดตั้งอาจใช้เวลาหลายวินาที ความสามารถในการติดตั้งจึงอาจไม่พร้อมใช้งานทันทีที่ได้รับการตอบกลับของ URL
ติดตั้งเดสก์ท็อป
ขณะนี้ Google Chrome และ Microsoft Edge รองรับการติดตั้ง PWA บนเดสก์ท็อปใน Linux, Windows, macOS และ Chromebook เบราว์เซอร์เหล่านี้จะแสดงป้ายการติดตั้ง (ไอคอน) ในแถบ URL (ดูรูปภาพด้านล่าง) ซึ่งระบุว่าเว็บไซต์ปัจจุบันสามารถติดตั้งได้
เมื่อผู้ใช้มีส่วนร่วมกับเว็บไซต์ ผู้ใช้อาจเห็นป๊อปอัป เช่น ป๊อปอัปด้านล่างนี้ที่เชิญให้ผู้ใช้ติดตั้งเว็บไซต์เป็นแอป
เมนูแบบเลื่อนลงของเบราว์เซอร์จะมีปุ่ม "ติดตั้ง
ระบบปฏิบัติการเดสก์ท็อปรองรับเฉพาะโหมดการแสดงผลแบบสแตนด์อโลนและ UI ขนาดเล็กเท่านั้น
PWA ที่ติดตั้งบนเดสก์ท็อป
- มีไอคอนในเมนูเริ่มต้นหรือหน้าจอเริ่มต้นบน Windows PC, ใน Dock หรือเดสก์ท็อปใน Linux GUI, ใน Launcher ของ macOS หรือตัวเปิดแอปของ Chromebook
- มีไอคอนในตัวสลับแอปและแถบแอปเมื่อแอปทำงานอยู่ มีการใช้งานเมื่อเร็วๆ นี้ หรือเปิดอยู่ในเบื้องหลัง
- ปรากฏในการค้นหาแอป เช่น ค้นหาใน Windows หรือสปอตไลท์ใน macOS
- กำหนดหมายเลขป้ายบนไอคอนเพื่อระบุการแจ้งเตือนใหม่ได้ ซึ่งสามารถดำเนินการได้ด้วย Badging API
- ตั้งค่าเมนูตามบริบทสำหรับไอคอนด้วยทางลัดของแอปได้
- ไม่สามารถติดตั้ง 2 ครั้งด้วยเบราว์เซอร์เดียวกัน
หลังจากติดตั้งแอปบนเดสก์ท็อป ผู้ใช้จะไปที่ about:apps, คลิกขวาที่ PWA แล้วเลือก "เริ่มแอปเมื่อคุณลงชื่อเข้าใช้" ได้ หากต้องการให้แอปเปิดขึ้นโดยอัตโนมัติเมื่อเริ่มต้นระบบ
การติดตั้ง iOS และ iPadOS
ไม่มีข้อความแจ้งให้ติดตั้ง PWA ของเบราว์เซอร์ใน iOS และ iPadOS PWA ในแพลตฟอร์มเหล่านี้เรียกอีกอย่างว่าเว็บแอปในหน้าจอหลัก และต้องเพิ่มแอปเหล่านี้ลงในหน้าจอหลักด้วยตนเองผ่านเมนูที่มีอยู่ใน Safari เท่านั้น เราขอแนะนําให้เพิ่มแท็ก apple-touch-icon ลงใน HTML
หากต้องการกำหนดไอคอน ให้ใส่เส้นทางไปยังไอคอนในส่วน <head> ของ HTML ดังนี้
<link rel="apple-touch-icon" href="/icons/ios.png">
Safari จะใช้ข้อมูลดังกล่าวเพื่อสร้างทางลัด และหากคุณไม่ได้ระบุไอคอนที่เจาะจงสำหรับอุปกรณ์ Apple ไอคอนในหน้าจอหลักจะเป็นภาพหน้าจอของ PWA เมื่อผู้ใช้ติดตั้ง
โปรดทราบว่าการติดตั้ง PWA จะใช้งานได้ก็ต่อเมื่อผู้ใช้เรียกดูเว็บไซต์ของคุณจาก Safari เท่านั้น เบราว์เซอร์อื่นที่พร้อมใช้งานใน App Store เช่น Google Chrome, Firefox, Opera หรือ Microsoft Edge จะติดตั้ง PWA ในหน้าจอหลักไม่ได้
ขั้นตอนในการเพิ่มแอปไปยังหน้าจอหลักมีดังนี้
- เปิดเมนูแชร์ที่ด้านล่างหรือด้านบนของเบราว์เซอร์
- คลิกเพิ่มลงในหน้าจอหลัก
- ยืนยันชื่อแอป ชื่อนั้นทำให้ผู้ใช้แก้ไขได้
- คลิกเพิ่ม ใน iOS และ iPadOS บุ๊กมาร์กไปยังเว็บไซต์และ PWA จะมีลักษณะเหมือนกันในหน้าจอหลัก
ส่วนใน iOS และ iPadOS จะรองรับเฉพาะโหมดการแสดงผลแบบสแตนด์อโลนเท่านั้น ดังนั้นหากคุณใช้โหมด UI ขั้นต่ำ ระบบจะเปลี่ยนกลับไปใช้ทางลัดของเบราว์เซอร์ ถ้าคุณใช้โหมดเต็มหน้าจอ วิดีโอจะกลับไปเป็นแบบสแตนด์อโลน
PWA ที่ติดตั้งใน iOS และ iPadOS
- ปรากฏในหน้าจอหลัก, การค้นหาของ Spotlight, คำแนะนำของ Siri และการค้นหาคลังแอป
- ไม่แสดงในโฟลเดอร์หมวดหมู่ของแกลเลอรีแอป
- ขาดการรองรับความสามารถต่างๆ เช่น การติดป้ายและทางลัดของแอป
Safari ใช้เทคโนโลยีแบบเดิมที่เรียกว่า Web Clips เพื่อสร้างไอคอน PWA ในระบบปฏิบัติการ ซึ่งเป็นเพียงไฟล์ XML ในรูปแบบรายการคุณสมบัติของ Apple ที่จัดเก็บในระบบไฟล์
การติดตั้ง Android
ใน Android ข้อความแจ้งให้ติดตั้ง PWA จะแตกต่างกันไปตามอุปกรณ์และเบราว์เซอร์ ผู้ใช้อาจเห็นสิ่งต่อไปนี้
- รูปแบบต่างๆ ของรายการในเมนูที่จะติดตั้ง เช่น ติดตั้งหรือเพิ่มลงในหน้าจอหลัก
- กล่องโต้ตอบการติดตั้งโดยละเอียด
ในภาพต่อไปนี้ คุณจะเห็นกล่องโต้ตอบการติดตั้ง 2 เวอร์ชัน เวอร์ชันย่อยง่ายๆ (ซ้าย) และกล่องโต้ตอบการติดตั้งแบบละเอียด (ขวา)
ระบบจะติดตั้ง PWA เป็น WebAPK, ทางลัด หรือ QuickApp ทั้งนี้ขึ้นอยู่กับอุปกรณ์และเบราว์เซอร์
WebAPKs
WebAPK เป็นแพ็กเกจ Android (APK) ที่สร้างขึ้นโดยผู้ให้บริการที่เชื่อถือได้สำหรับอุปกรณ์ของผู้ใช้ ซึ่งโดยทั่วไปแล้วจะอยู่ในระบบคลาวด์บนเซิร์ฟเวอร์การสร้าง WebAPK Google Chrome จะใช้วิธีการนี้บนอุปกรณ์ที่ติดตั้ง Google Mobile Services (GMS) และโดยเบราว์เซอร์อินเทอร์เน็ตของ Samsung แต่เฉพาะบนอุปกรณ์ที่ผลิตโดย Samsung เช่น โทรศัพท์หรือแท็บเล็ต Galaxy รวมกันแล้ว บัญชีนี้มีผู้ใช้ Android ส่วนใหญ่
เมื่อผู้ใช้ติดตั้ง PWA จาก Google Chrome และใช้ WebAPK เซิร์ฟเวอร์จะสร้าง "mints" (Packages) และลงนามใน APK สำหรับ PWA กระบวนการดังกล่าวต้องใช้เวลา แต่เมื่อ APK พร้อมใช้งาน เบราว์เซอร์จะติดตั้งแอปนั้นอย่างเงียบๆ ลงในอุปกรณ์ของผู้ใช้ เนื่องจากผู้ให้บริการที่เชื่อถือได้ (บริการ Google Play หรือ Samsung) ได้รับรอง APK แล้ว โทรศัพท์จึงติดตั้ง APK ดังกล่าวโดยไม่ปิดใช้งานการรักษาความปลอดภัย เช่นเดียวกับแอปอื่นๆ ที่มาจาก Store ไม่จำเป็นต้องโหลดแอปจากแหล่งที่ไม่รู้จัก
PWA ที่ติดตั้งผ่าน WebAPK
- มีไอคอนในตัวเปิดแอปและหน้าจอหลัก
- ปรากฏในการตั้งค่า แอป
- อาจมีความสามารถหลายอย่าง เช่น การติดป้าย ทางลัดของแอป และจับภาพลิงก์ภายในระบบปฏิบัติการ
- อัปเดตไอคอนและข้อมูลเมตาของแอปได้
- ติดตั้งไม่ได้ 2 ครั้ง
ทางลัด
แม้ว่า WebAPK จะมอบประสบการณ์ที่ดีที่สุดสำหรับผู้ใช้ Android แต่ก็คุณไม่สามารถสร้าง APK ดังกล่าวได้เสมอไป หากทำไม่ได้ เบราว์เซอร์จะกลับไปสร้างทางลัดเว็บไซต์แทน โปรแกรมจะสร้างทางลัดเนื่องจาก Firefox, Microsoft Edge, Opera, Brave และ Samsung Internet (ในอุปกรณ์ที่ไม่ใช่ Samsung) ไม่มีเซิร์ฟเวอร์ที่สร้างที่เชื่อถือได้ Google Chrome ก็จะยังไม่พร้อมใช้งานหากบริการ Minting ไม่พร้อมใช้งานหรือ PWA ของคุณไม่ตรงตามข้อกำหนดการติดตั้ง
PWA ที่ติดตั้งพร้อมทางลัด
- มีไอคอนที่ติดป้ายเบราว์เซอร์บนหน้าจอหลัก (ดูตัวอย่างต่อไปนี้)
- ไม่มีไอคอนใน Launcher หรือในการตั้งค่า แอป
- ใช้ความสามารถที่ต้องมีการติดตั้งไม่ได้
- อัปเดตไอคอนและข้อมูลเมตาของแอปไม่ได้
- สามารถติดตั้งได้หลายครั้ง แม้จะใช้เบราว์เซอร์เดียวกัน เมื่อสิ่งนี้เกิดขึ้น ข้อมูลทั้งหมดจะชี้ไปยังอินสแตนซ์เดียวกัน และใช้พื้นที่เก็บข้อมูลเดียวกัน
QuickApps
ผู้ผลิตบางราย รวมถึง Huawei และ ZTE นำเสนอแพลตฟอร์มที่เรียกว่า QuickApps เพื่อสร้างเว็บแอปแบบเบาที่คล้ายคลึงกับ PWA แต่ใช้ชุดเทคโนโลยีอื่น บางเบราว์เซอร์ในอุปกรณ์เหล่านี้ เช่น เบราว์เซอร์ Huawei สามารถติดตั้ง PWA ที่ได้รับการรวมเป็น QuickApp ได้ แม้ว่าคุณจะไม่ได้ใช้สแต็ก QuickApp ก็ตาม
เมื่อติดตั้ง PWA เป็น QuickApp ผู้ใช้จะได้รับประสบการณ์การใช้งานที่คล้ายกันกับที่มีทางลัด แต่มีไอคอนที่ติดป้ายด้วยไอคอน QuickApps (ภาพสายฟ้า) แอปนี้ยังพร้อมให้เปิดจาก QuickApp Center ด้วย
การแจ้งสำหรับการติดตั้ง
ในเบราว์เซอร์แบบ Chromium บนเดสก์ท็อปและอุปกรณ์ Android คุณอาจเรียกให้แสดงกล่องโต้ตอบการติดตั้งของเบราว์เซอร์จาก PWA ได้ ส่วนเนื้อหาการแจ้งการติดตั้งจะพูดถึงรูปแบบสำหรับการดำเนินการดังกล่าวและวิธีการใช้งาน
แคตตาล็อกแอปและร้านค้า
นอกจากนี้ PWA ยังอาจแสดงอยู่ในแคตตาล็อกแอปและ App Store เพื่อเพิ่มการเข้าถึงและให้ผู้ใช้ค้นหาจากจุดเดียวกับที่ผู้ใช้ไปพบแอปอื่นๆ ได้ แคตตาล็อกแอปและร้านค้าส่วนใหญ่รองรับเทคโนโลยีที่ช่วยให้คุณเผยแพร่แพ็กเกจที่ไม่มีทั้งเว็บแอป (เช่น HTML และเนื้อหา) เทคโนโลยีเหล่านี้ช่วยให้คุณสร้างแค่ Launcher ไปยังเครื่องมือแสดงผลเว็บแบบสแตนด์อโลน ซึ่งจะโหลดแอปและอนุญาตให้โปรแกรมทำงานของบริการแคชเนื้อหาที่จำเป็นได้
แคตตาล็อกแอปและร้านค้าที่รองรับการเผยแพร่ PWA มีดังนี้
- Google Play Store สำหรับ Android และ ChromeOS โดยใช้กิจกรรมบนเว็บและแอปที่เชื่อถือได้
- Apple App Store สำหรับ iOS, macOS และ iPadOS ที่ใช้ WKWebView และโดเมนที่ผูกกับแอป
- Microsoft Store สำหรับ Windows 10 และ 11 โดยใช้แพ็กเกจ APPX
- Samsung Galaxy Store โดยใช้เซิร์ฟเวอร์การสร้าง Minting ของ Samsung WebAPK
- Huawei AppGallery โดยใช้คอนเทนเนอร์ QuickApp สำหรับแอปพลิเคชัน HTML
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเผยแพร่ PWA ไปยังแคตตาล็อกแอปและ Store ได้ที่ BubbleWrap CLI และ PWA Builder