เบราว์เซอร์จำนวนมากให้คุณเปิดใช้และโปรโมตการติดตั้ง Progressive Web App (PWA) ได้โดยตรงภายในอินเทอร์เฟซผู้ใช้ การติดตั้ง (บางครั้งเรียกว่า "เพิ่มลงในหน้าจอหลัก)" ช่วยให้ผู้ใช้ติดตั้ง 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
คำค้นหาสื่อของ CSS display-mode
ระบุวิธีเปิดใช้งาน 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 เมื่อใดและอย่างไร