เบราว์เซอร์จำนวนมากอนุญาตให้คุณเปิดใช้และโปรโมตการติดตั้ง ของ Progressive Web App (PWA) โดยตรงภายในอินเทอร์เฟซผู้ใช้ การติดตั้ง (บางครั้งเรียกว่า "เพิ่มลงในหน้าจอหลัก") ช่วยให้ผู้ใช้ติดตั้งได้ PWA บนอุปกรณ์เคลื่อนที่หรือเดสก์ท็อป การติดตั้ง PWA จะเป็นการเพิ่ม Launcher อื่นเพื่อให้ทำงานได้เหมือนกับแอปอื่นๆ ที่ติดตั้งไว้
นอกเหนือจากประสบการณ์การติดตั้งที่เบราว์เซอร์มีให้แล้ว คุณสามารถระบุขั้นตอนการติดตั้งที่กำหนดเองได้โดยตรงภายในแอป
เมื่อพิจารณาว่าจะโปรโมตการติดตั้งหรือไม่ ให้คำนึงถึงวิธีการโดยทั่วไปของผู้ใช้
ใช้ PWA ของคุณ เช่น หากมีกลุ่มผู้ใช้ที่ใช้ PWA หลายรายการ
ใน 1 สัปดาห์ ผู้ใช้เหล่านี้อาจได้รับประโยชน์จากการเพิ่มความสะดวกของ
การเปิดแอปของคุณจากหน้าจอหลักของโทรศัพท์หรือจากเมนู "เริ่ม" บนเดสก์ท็อป
ระบบปฏิบัติการ แอปพลิเคชันเพื่อการทำงานและความบันเทิงบางอย่างก็ได้ประโยชน์
จากพื้นที่หน้าจอพิเศษ ซึ่งสร้างด้วยการนำแถบเครื่องมือของเบราว์เซอร์ออกจาก
ในโหมด standalone
หรือ minimal-ui
ที่ติดตั้งแล้ว
ข้อกำหนดเบื้องต้น
ก่อนเริ่มต้นใช้งาน โปรดตรวจสอบว่า PWA เป็นไปตาม ข้อกำหนดด้านความสามารถในการติดตั้ง ซึ่งรวมถึงการมีไฟล์ Manifest ของเว็บแอป
โปรโมตการติดตั้ง
เพื่อแสดงว่า Progressive Web App ของคุณติดตั้งได้ และระบุ ขั้นตอนการติดตั้งแอป
- ฟังเหตุการณ์
beforeinstallprompt
- บันทึกเหตุการณ์
beforeinstallprompt
เพื่อให้ทริกเกอร์ขั้นตอนการติดตั้งได้ ในภายหลัง - แจ้งเตือนผู้ใช้ว่า PWA ของคุณติดตั้งได้ และระบุปุ่มหรือ เพื่อเริ่มขั้นตอนการติดตั้งแอป
ฟังเหตุการณ์ beforeinstallprompt
หาก Progressive Web App เป็นไปตามเกณฑ์การติดตั้งที่กำหนด
เบราว์เซอร์ทำให้เหตุการณ์ beforeinstallprompt
เริ่มทำงาน บันทึกการอ้างอิงเหตุการณ์
และอัปเดตอินเทอร์เฟซผู้ใช้เพื่อระบุว่าผู้ใช้ติดตั้ง PWA ได้
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
ขั้นตอนการติดตั้งแอป
หากต้องการจัดเตรียมการติดตั้งแอป ให้ระบุปุ่มหรือองค์ประกอบอินเทอร์เฟซอื่นๆ
ที่ผู้ใช้สามารถคลิกหรือแตะเพื่อติดตั้งแอปได้ เมื่อมีการคลิกองค์ประกอบหรือ
ได้แตะ โทรหา prompt()
ในเหตุการณ์ beforeinstallprompt
ที่บันทึกไว้ (จัดเก็บไว้ใน
deferredPrompt
) แสดงกล่องโต้ตอบการติดตั้งแบบโมดัลแก่ผู้ใช้ โดยถามว่า
เพื่อยืนยันว่าต้องการติดตั้ง PWA
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
พร็อพเพอร์ตี้ userChoice
เป็นคำมั่นสัญญาที่ตัดสินใจเลือกตัวเลือกของผู้ใช้ได้
คุณจะโทรหา prompt()
ในเหตุการณ์ที่มีการเลื่อนเวลาได้เพียงครั้งเดียว หากผู้ใช้
ปิดการแจ้งเตือนนี้ คุณจะต้องรอจนกว่าเหตุการณ์ beforeinstallprompt
เริ่มทำงานอีกครั้ง ซึ่งโดยปกติจะทันทีหลังจากพร็อพเพอร์ตี้ userChoice
แก้ปัญหาแล้ว
ตรวจจับเมื่อติดตั้ง PWA เรียบร้อยแล้ว
คุณใช้พร็อพเพอร์ตี้ userChoice
เพื่อระบุว่าผู้ใช้ติดตั้งแล้วได้หรือไม่
แอปของคุณจากภายในอินเทอร์เฟซผู้ใช้ แต่หากผู้ใช้ติดตั้ง PWA
จากแถบที่อยู่หรือส่วนประกอบอื่นๆ ของเบราว์เซอร์ userChoice
จะไม่ช่วยอะไร
คุณควรจะคอยฟังเหตุการณ์ appinstalled
ซึ่งเริ่มทํางานทุกเมื่อแทน
PWA จะได้รับการติดตั้ง ไม่ว่าจะใช้กลไกใดก็ตามในการติดตั้ง
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
ตรวจหาวิธีเปิดตัว PWA
คิวรี่สื่อ display-mode
ของ CSS จะระบุวิธีเปิดตัว PWA ไม่ว่าจะใน
แท็บเบราว์เซอร์ หรือ PWA ที่ติดตั้งไว้ จึงสามารถปรับใช้
โดยขึ้นอยู่กับวิธีเปิดแอป เช่น กำหนดค่า
เพื่อซ่อนปุ่มติดตั้งเสมอ และแสดงปุ่มย้อนกลับเมื่อเปิดเป็น
ติดตั้ง PWA แล้ว
ติดตามการเปิดตัว PWA
หากต้องการติดตามวิธีที่ผู้ใช้เปิดตัว PWA ให้ใช้ matchMedia()
เพื่อทดสอบ
คิวรี่สื่อ display-mode
Safari บน iOS ยังไม่รองรับฟีเจอร์นี้ คุณจึงต้อง
ตรวจสอบ navigator.standalone
แทน ซึ่งจะส่งคืนบูลีนที่ระบุว่า
เบราว์เซอร์ทำงาน ในโหมดสแตนด์อโลน
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
ติดตามเมื่อโหมดการแสดงผลเปลี่ยนแปลง
หากต้องการติดตามว่าผู้ใช้มีการเปลี่ยนแปลงระหว่างวันที่ standalone
ถึง browser tab
หรือไม่ ให้ฟัง
เปลี่ยนเป็นคิวรี่สื่อ display-mode
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
อัปเดต UI ตามโหมดการแสดงผลปัจจุบัน
ใช้สีพื้นหลังอื่นสำหรับ PWA เมื่อเปิดเป็นอุปกรณ์ที่ติดตั้ง PWA ให้ใช้ CSS แบบมีเงื่อนไข
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
อัปเดตไอคอนและชื่อแอป
หากจำเป็นต้องอัปเดตชื่อแอปหรือระบุไอคอนใหม่ ดูวิธีที่ Chrome จัดการการอัปเดตไฟล์ Manifest ของเว็บแอป เพื่อดูว่าการเปลี่ยนแปลงเหล่านั้นจะปรากฏใน Chrome เมื่อใดและอย่างไร