คุณตรวจสอบได้ว่าผู้ใช้กำลังใช้ PWA ในเบราว์เซอร์หรือในโหมดสแตนด์อโลน ในเบราว์เซอร์แบบ Chromium (Android และเดสก์ท็อป) คุณยังสามารถตรวจหาเหตุการณ์ต่อไปนี้ได้ด้วย
- สถานะและผลลัพธ์ของกล่องโต้ตอบสำหรับคำเชิญการติดตั้ง
- ติดตั้งเสร็จแล้ว
- การโอนการนำทางจากเบราว์เซอร์ไปยังหน้าต่าง PWA และในทางกลับกัน
- สถานะการติดตั้ง PWA
- แอปที่เกี่ยวข้องซึ่งติดตั้งจาก App Store
คุณใช้ข้อมูลนี้เพื่อการวิเคราะห์ ทำความเข้าใจการตั้งค่าของผู้ใช้ และปรับแต่งประสบการณ์ของผู้ใช้ได้ หากต้องการบันทึกเหตุการณ์เหล่านี้ คุณสามารถใช้เครื่องมือ เช่น คิวรี่สื่อ เหตุการณ์จาก window
หรือใช้ API ความสามารถที่คุณสามารถค้นหาแสดงที่นี่ได้
กำลังตรวจหาโหมดการแสดงผล
หากต้องการติดตามวิธีที่ผู้ใช้เปิด PWA คุณสามารถใช้ matchMedia()
เพื่อทดสอบการค้นหาสื่อของ display-mode
window.addEventListener('DOMContentLoaded', () => {
let displayMode = 'browser tab';
if (window.matchMedia('(display-mode: standalone)').matches) {
displayMode = 'standalone';
}
// Log launch display mode to analytics
console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});
หากคุณใช้ตัวอย่างนี้ อย่าลืมจับคู่โหมดการแสดงผลจากไฟล์ Manifest ของเว็บแอป เช่น standalone
, minimal-ui
หรือ fullscreen
นอกจากนี้ คุณยังจับคู่คำค้นหาหลายรายการในสตริงคำค้นหาสื่อโดยใช้เงื่อนไขที่คั่นด้วยคอมมาได้อีกด้วย
นอกจากนี้ คุณยังเพิ่มพารามิเตอร์การค้นหาลงใน start_url
ของไฟล์ Manifest ได้ด้วย ซึ่งบันทึกได้ด้วยข้อมูลวิเคราะห์เพื่อติดตามสถิติเกี่ยวกับเวลา ลักษณะ และปริมาณ PWA ที่ใช้อยู่
การติดตั้งแอป
เมื่อผู้ใช้ยอมรับข้อความแจ้งให้ติดตั้งในเบราว์เซอร์ เหตุการณ์ appinstalled
จะเริ่มทำงานในเบราว์เซอร์แบบ Chromium การใช้งานที่ยอดเยี่ยมสำหรับเครื่องจัดการกิจกรรมนี้คือการนำโปรโมชันการติดตั้งแอปในแอปที่คุณเพิ่มไว้ออก
window.addEventListener('appinstalled', () => {
// If visible, hide the install promotion
hideInAppInstallPromotion();
// Log install to analytics
console.log('INSTALL: Success');
});
โปรดทราบว่าในอุปกรณ์ Android ที่มี WebAPK เหตุการณ์จะเริ่มทำงานเมื่อผู้ใช้ยอมรับกล่องโต้ตอบ แต่จะไม่เริ่มหลังจากที่สร้างและติดตั้ง WebAPK แล้ว อาจมีความล่าช้าประมาณไม่กี่วินาทีก่อนที่แอปจะติดตั้งเสร็จสมบูรณ์
บทของข้อความแจ้งให้ติดตั้งจะอธิบายวิธีตรวจสอบว่ามีข้อความแจ้งให้ติดตั้งหรือไม่ และผู้ใช้เลือกตัวเลือกใด
การโอนเซสชัน
ผู้ใช้จะใช้ PWA ภายในเบราว์เซอร์และในแบบฟอร์มแบบสแตนด์อโลนที่ติดตั้งไว้ได้ ในเบราว์เซอร์บนเดสก์ท็อป คุณสามารถโอนการนำทางปัจจุบันระหว่างบริบทเหล่านี้โดยใช้ป้ายหรือรายการในเมนู ดังที่แสดงในรูปภาพต่อไปนี้
ใน Android มีรายการในเมนูที่คล้ายกับรายการบนเดสก์ท็อปจากเบราว์เซอร์ที่โอนการนำทางไปยังแอป ในกรณีนี้ URL ปัจจุบันจะเปิดขึ้น แต่จะเป็นการไปยังส่วนต่างๆ ในหน้าใหม่ในแอป
ในภาพต่อไปนี้ คุณจะเห็นรายการเมนูใน Android เมื่อติดตั้งแอปแล้ว
โอนหลังการติดตั้ง
จากเบราว์เซอร์ในเดสก์ท็อป ระบบจะโอนการนําทางปัจจุบันไปยังแอปทันทีเมื่อติดตั้ง แท็บของเบราว์เซอร์จะปิดลง และแอปที่เพิ่งติดตั้งจะเปิดขึ้น เพื่อดำเนินการต่อกับสิ่งที่ผู้ใช้กำลังทำอยู่
ในเบราว์เซอร์ในอุปกรณ์เคลื่อนที่ การนำทางปัจจุบันจะยังคงอยู่ในเบราว์เซอร์เมื่อคุณติดตั้งแอป หากผู้ใช้ต้องการย้ายไปยังแอป ผู้ใช้จะต้องเปิดแอปด้วยตนเองและจะเป็นการนำทางใหม่
กำลังตรวจหาการโอน
หากต้องการตรวจหาการโอนระหว่างเบราว์เซอร์และหน้าต่าง คุณสามารถใช้คิวรี่สื่อได้โดยทำดังนี้
window.addEventListener('DOMContentLoaded', () => {
// replace standalone with your display used in manifest
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);
});
});
การแยกพื้นที่เก็บข้อมูล iOS และ iPadOS
บน iOS และ iPadOS จะไม่มีการนำทางหรือการโอน URL ระหว่างเบราว์เซอร์กับไอคอนที่ติดตั้งไว้ แม้ว่าจะเป็น PWA เดียวกัน แต่ไอคอน PWA ทั้งหมดที่ผู้ใช้ติดตั้งจะมีพื้นที่เก็บข้อมูลของตัวเอง โดยแยกจากแท็บของ Safari และไอคอนอื่นๆ เมื่อผู้ใช้เปิดไอคอนที่ติดตั้งไว้ ระบบจะไม่แชร์พื้นที่เก็บข้อมูลกับ Safari หาก PWA ของคุณต้องเข้าสู่ระบบ ผู้ใช้จะต้องลงชื่อเข้าสู่ระบบอีกครั้ง หากเพิ่มแอปลงในหน้าจอหลักหลายครั้ง ผู้ใช้จะมีเซสชันที่แตกต่างกันสำหรับอินสแตนซ์ของ PWA แต่ละรายการ
แอปพลิเคชันที่เกี่ยวข้อง
เว็บไซต์ระบุความสัมพันธ์กับแอปผ่านไฟล์ Manifest ซึ่งทำได้โดยใช้สมาชิก related_applications
ของข้อกำหนดไฟล์ Manifest ของเว็บแอป
คีย์ related_applications
คืออาร์เรย์ของออบเจ็กต์ที่แสดงถึงแอปพลิเคชันที่เกี่ยวข้องแต่ละแอป แต่ละรายการจะมี platform
, url
และ id
ที่ไม่บังคับ
ค่าแพลตฟอร์มที่เป็นไปได้มีดังนี้
chrome_web_store
: Google Chrome เว็บสโตร์play
: แอป Google Play (Android และ ChromeOS)chromeos_play
: เล่น ChromeOSwebapp
: เว็บแอปwindows
: Microsoft Store (Windows 10 และ 11)f-droid
: หุ่นยนต์หุ่นยนต์amazon
: Amazon AppStore (FireOS)
ต้องการรับแอปที่เกี่ยวข้องมากกว่า
เมื่อผู้ใช้ติดตั้งแอป คุณเปลี่ยนเส้นทางผู้ใช้ไปยังแอปที่เกี่ยวข้องได้หากตั้งค่าช่อง prefer_related_applications
เป็น true
ในไฟล์ Manifest ด้วยการตั้งค่านี้ ในเบราว์เซอร์ที่เข้ากันได้ ขั้นตอนการติดตั้งจะไม่ติดตั้ง PWA แต่จะทริกเกอร์การติดตั้ง Store จาก url
หรือ id
ที่คุณระบุไว้ในรายการ related_applications
แทน
แอปพลิเคชันที่เกี่ยวข้องอาจเป็น PWA ของคุณและจะติดตั้งผ่าน App Store ข้อดีอย่างหนึ่งของการกำหนดค่านี้คือ ในขณะนี้ระบบจะกู้คืนเฉพาะแอปที่ติดตั้งผ่าน App Store ด้วยข้อมูลสำรองหรือเมื่อคุณเปลี่ยนไปใช้อุปกรณ์ใหม่
{
...
"related_applications:" [
{
"platform": "play",
"url": "https://play.google.com/..."
}
],
"prefer_related_applications": true
}
แบนเนอร์แอปอัจฉริยะของ Apple
Safari ไม่รองรับสมาชิก related_applications
แต่มีแบนเนอร์สมาร์ทแอปสำหรับแอปใน App Store ดังนั้น หากต้องการโปรโมต PWA หรือแอปอื่นๆ ที่เคยเผยแพร่ใน App Store ให้คุณใส่เมตาแท็กใน HTML ของ PWA เพื่อเชิญผู้ใช้ให้ติดตั้งแอป (ดูลิงก์ที่เพิ่งให้มา) หรือโอนการนำทางหากติดตั้งไว้แล้ว
การตรวจหาแอปที่ติดตั้งที่เกี่ยวข้อง
เมธอด getInstalledRelatedApps()
อนุญาตให้เว็บไซต์ตรวจสอบว่ามีการติดตั้งแอป iOS/Android/เดสก์ท็อป หรือ PWA ในอุปกรณ์ของผู้ใช้แล้วหรือไม่
การตรวจสอบว่ามีการติดตั้งแอปที่เกี่ยวข้องไว้แล้วหรือไม่จะช่วยให้คุณใช้งานฟีเจอร์ต่างๆ ได้ เช่น การซ่อนข้อความแจ้งที่ติดตั้งแบบกำหนดเอง หรือการเปลี่ยนเส้นทางผู้ใช้ไปยังแอปที่ติดตั้งโดยตรงแทนการไปที่เว็บไซต์สำหรับวัตถุประสงค์ทั่วไป
หากต้องการใช้เมธอด getInstalledRelatedApps()
ทั้งแอปที่ติดตั้งและเว็บไซต์จะต้องกำหนดค่าการเชื่อมต่อซึ่งกันและกัน แต่ละแอปขึ้นอยู่กับแพลตฟอร์มของแอปนั้น จะมีข้อมูลเมตาที่ใช้จดจำเว็บไซต์และเว็บไซต์จะมีแอปที่ติดตั้งไว้ในช่อง related_applications
ในไฟล์ Manifest
เครื่องมือต่างๆ เช่น BubbleWrap หรือ PWA Builder ที่ช่วยให้คุณเผยแพร่ PWA ไปยัง App Store ได้ ให้เพิ่มข้อมูลเมตาที่จำเป็นเพื่อให้เว็บไซต์ใช้ getInstalledRelatedApps()
ได้ทันที
หากต้องการตรวจหาว่าติดตั้ง PWA แล้วหรือไม่โดยใช้ getInstalledRelatedApps()
ให้กำหนด webapp
ในช่อง related_applications
ของไฟล์ Manifest ด้วย URL ไปยังไฟล์ Manifest ดังนี้
...
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
...
getInstalledRelatedApps()
แสดงผลอาร์เรย์ของออบเจ็กต์แอป หากอาร์เรย์ว่างเปล่า แสดงว่าไม่มีการติดตั้งแอปที่เกี่ยวข้อง
const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;
ตรวจหาการติดตั้งจากภายนอกขอบเขตของ PWA
จาก Chrome ใน Android 89 คุณจะตรวจหาได้ว่ามีการติดตั้ง PWA หรือไม่ แม้ว่าจะอยู่นอกขอบเขตของ PWA ก็ตาม PWA ต้องตั้งค่าไฟล์ JSON ในโฟลเดอร์ /.well-known/
โดยให้สิทธิ์แก่ขอบเขตอื่นตามที่อธิบายไว้ในบทความนี้