เมื่อผู้ใช้ติดตั้ง PWA แล้ว ระบบจะดำเนินการต่อไปนี้
- มีไอคอนใน 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 ที่ติดตั้งบนเดสก์ท็อป:
- มีไอคอนในเมนูเริ่มหรือหน้าจอเริ่มบน PC ที่ใช้ Windows, ในแท่นชาร์จหรือเดสก์ท็อปใน Linux GUI, ในแท่นวางของ macOS หรือตัวเปิดแอปของ Chromebook
- มีไอคอนในตัวสลับแอปและแท่นชาร์จเมื่อแอปทำงานอยู่ เพิ่งใช้งานล่าสุด หรือเปิดในเบื้องหลัง
- ปรากฏในการค้นหาแอป เช่น ค้นหาบน Windows หรือ Spotlight ใน 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:
- ปรากฏในหน้าจอหลัก, การค้นหาของสปอตไลท์, คำแนะนำของ 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 (แพ็กเกจ) จะลงนาม APK สำหรับ PWA กระบวนการนี้ต้องใช้เวลา แต่เมื่อ APK พร้อมแล้ว เบราว์เซอร์จะติดตั้งแอปในอุปกรณ์ของผู้ใช้โดยไม่มีการแจ้งเตือน เนื่องจากผู้ให้บริการที่เชื่อถือได้ (Play Services หรือ Samsung) เป็นผู้ลงนาม APK โทรศัพท์จึงจะติดตั้ง APK โดยไม่ปิดใช้การรักษาความปลอดภัย เช่นเดียวกับแอปอื่นๆ ที่มาจากสโตร์ จึงไม่จำเป็นต้องไซด์โหลดแอป
PWA ที่ติดตั้งผ่าน WebAPK:
- มีไอคอนในตัวเปิดแอปและหน้าจอหลัก
- ปรากฏในการตั้งค่า แอป
- มีความสามารถหลายอย่าง เช่น การติดป้าย ทางลัดของแอป และบันทึกลิงก์ภายในระบบปฏิบัติการ
- อัปเดตไอคอนและข้อมูลเมตาของแอปได้
- ติดตั้ง 2 ครั้งไม่ได้
ทางลัด
แม้ว่า WebAPK จะมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ Android แต่ก็ไม่ได้สร้างขึ้นเสมอไป หากไม่สามารถทำได้ เบราว์เซอร์จะถอยหลังกลับไปสร้างทางลัดของเว็บไซต์ เนื่องจาก Firefox, Microsoft Edge, Opera, Brave และ Samsung Internet (ในอุปกรณ์ที่ไม่ใช่ Samsung) ไม่มีเซิร์ฟเวอร์ที่เชื่อถือแพลตฟอร์มดังกล่าว จึงสร้างทางลัดให้ Google Chrome ก็เช่นกัน หากบริการการสร้าง (Mint) ไม่พร้อมใช้งานหรือ PWA ไม่เป็นไปตามข้อกำหนดการติดตั้ง
PWA ที่ติดตั้งพร้อมทางลัด:
- มีไอคอนที่มีตราสถานะเบราว์เซอร์บนหน้าจอหลัก (ดูตัวอย่างต่อไปนี้)
- ไม่มีไอคอนใน Launcher หรือในการตั้งค่า แอป
- ใช้ความสามารถที่ต้องมีการติดตั้งไม่ได้
- อัปเดตไอคอนและข้อมูลเมตาของแอปไม่ได้
- ติดตั้งได้หลายครั้งแม้จะใช้เบราว์เซอร์เดียวกัน เมื่อเกิดเหตุการณ์เช่นนี้ ข้อมูลทั้งหมดจะชี้ไปยังอินสแตนซ์เดียวกันและใช้พื้นที่เก็บข้อมูลเดียวกัน
QuickApps
ผู้ผลิตบางราย เช่น Huawei และ ZTE มีแพลตฟอร์มที่เรียกว่า QuickApps ในการสร้างเว็บแอปขนาดเล็กซึ่งคล้ายกับ PWA แต่ใช้ Technology Stack อื่น บางเบราว์เซอร์ในอุปกรณ์เหล่านี้ เช่น เบราว์เซอร์ของ Huawei จะติดตั้ง PWA ที่ได้รับการจัดแพ็กเกจเป็น QuickApp ได้ แม้ว่าคุณจะไม่ได้ใช้สแต็ก QuickApp ก็ตาม
เมื่อติดตั้ง PWA เป็น QuickApp แล้ว ผู้ใช้จะได้รับประสบการณ์การใช้งานที่คล้ายกับของที่มีทางลัด แต่จะมีไอคอนที่มีไอคอน QuickApps (รูปสายฟ้า) นอกจากนี้ยังสามารถเปิดแอปจาก QuickApp Center ได้ด้วย
การแจ้งข้อมูลสำหรับการติดตั้ง
ในเบราว์เซอร์แบบ Chromium บนเดสก์ท็อปและอุปกรณ์ Android คุณอาจเรียกกล่องโต้ตอบการติดตั้งของเบราว์เซอร์จาก PWA ได้ บทที่แจ้งให้ติดตั้งจะครอบคลุมรูปแบบในวิธีการดังกล่าว และวิธีใช้งาน
แคตตาล็อกและร้านค้าแอป
นอกจากนี้ PWA ยังอาจแสดงในแคตตาล็อกแอปและร้านค้าด้วยเพื่อเพิ่มการเข้าถึงและช่วยให้ผู้ใช้พบ PWA ในตำแหน่งเดียวกับที่หาแอปอื่นๆ เจอ แคตตาล็อกแอปและร้านค้าส่วนใหญ่รองรับเทคโนโลยีที่ให้คุณเผยแพร่แพ็กเกจที่ไม่มีทั้งเว็บแอป (เช่น HTML และเนื้อหา) เทคโนโลยีเหล่านี้ช่วยให้คุณสร้างเพียง Launcher ให้กับเครื่องมือการแสดงผลเว็บแบบสแตนด์อโลนที่จะโหลดแอปและอนุญาตให้ Service Worker แคชเนื้อหาที่จำเป็น
แคตตาล็อกและ App Store ที่รองรับการเผยแพร่ PWA มีดังนี้
- Google Play Store สำหรับ Android และ ChromeOS โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้
- Apple App Store สำหรับ iOS, macOS และ iPadOS ที่ใช้ WKWebView และโดเมนที่ผูกกับแอป
- Microsoft Store สำหรับ Windows 10 และ 11 โดยใช้แพ็กเกจ APPX
- Samsung Galaxy Store ซึ่งใช้เซิร์ฟเวอร์สร้างของ Samsung WebAPK
- Huawei AppGallery โดยใช้คอนเทนเนอร์ QuickApp สำหรับแอปพลิเคชัน HTML
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเผยแพร่ PWA ไปยังแคตตาล็อกและ App Store ได้ที่ BubbleWrap CLI และ PWA Builder