เบราว์เซอร์หลายรุ่นให้คุณเปิดใช้และโปรโมตการติดตั้ง Progressive Web App (PWA) ได้โดยตรงในอินเทอร์เฟซผู้ใช้ การติดตั้ง (บางครั้งก่อนหน้านี้เรียกว่า "เพิ่มลงในหน้าจอหลัก") ช่วยให้ผู้ใช้ติดตั้ง PWA ของคุณในอุปกรณ์เคลื่อนที่หรือเดสก์ท็อปได้ การติดตั้ง PWA จะเป็นการเพิ่ม Launcher อื่นเพื่อให้ทำงานได้เหมือนกับแอปอื่นๆ ที่ติดตั้งไว้
นอกจากประสบการณ์การติดตั้งที่ให้บริการโดยเบราว์เซอร์แล้ว คุณยังระบุขั้นตอนการติดตั้งที่กำหนดเองได้โดยตรงภายในแอป
เมื่อพิจารณาว่าจะโปรโมตการติดตั้งหรือไม่ ให้พิจารณาวิธีที่ผู้ใช้ใช้ PWA ของคุณโดยทั่วไป ตัวอย่างเช่น หากมีกลุ่มผู้ใช้ที่ใช้ PWA หลายครั้งในสัปดาห์ ผู้ใช้เหล่านี้อาจได้รับประโยชน์จากความสะดวกที่เพิ่มขึ้นในการเปิดแอปจากหน้าจอหลักของโทรศัพท์หรือจากเมนู Start ในระบบปฏิบัติการเดสก์ท็อป แอปพลิเคชันเพื่อการทำงานและความบันเทิงบางอย่างก็ได้ประโยชน์
จากพื้นที่หน้าจอพิเศษ ซึ่งสร้างด้วยการนำแถบเครื่องมือของเบราว์เซอร์ออกจาก
ในโหมด standalone, minimal-ui หรือ window-control-overlay ที่ติดตั้ง
ข้อกำหนดเบื้องต้น
ก่อนเริ่มต้นใช้งาน ให้ตรวจสอบว่า 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
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
ติดตามเมื่อโหมดการแสดงผลเปลี่ยนแปลง
หากต้องการติดตามว่าผู้ใช้เปลี่ยนระหว่าง browser กับโหมดการแสดงผลอื่นๆ หรือไม่ ให้คอยฟังการเปลี่ยนแปลงในคําค้นหาสื่อ display-mode
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
อัปเดต UI ตามโหมดการแสดงผลปัจจุบัน
ใช้สีพื้นหลังอื่นสำหรับ PWA เมื่อเปิดเป็นแอปที่ติดตั้งแล้ว PWA ให้ใช้ CSS แบบมีเงื่อนไข
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
อัปเดตไอคอนและชื่อแอป
หากจำเป็นต้องอัปเดตชื่อแอปหรือระบุไอคอนใหม่ ดูวิธีที่ Chrome จัดการการอัปเดตไฟล์ Manifest ของเว็บแอป เพื่อดูว่าการเปลี่ยนแปลงเหล่านั้นจะปรากฏใน Chrome เมื่อใดและอย่างไร