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