การตรวจจับ

คุณจะตรวจสอบได้ว่าผู้ใช้กำลังใช้ 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 ได้ด้วย ซึ่งบันทึกไว้ดูด้วย Analytics เพื่อติดตามสถิติเกี่ยวกับช่วงเวลา ลักษณะ และปริมาณการใช้งาน PWA

ข้อควรระวัง: หากคุณใช้พารามิเตอร์การค้นหาใน start_url เพื่อบันทึกเมตริก อย่าลืมตั้งค่าช่อง id ในไฟล์ Manifest เพื่อระบุแอปแบบไม่ซ้ำ อ่านวิธีตั้งค่าช่องนี้ใน การระบุ PWA แบบไม่ซ้ำโดยใช้พร็อพเพอร์ตี้รหัสไฟล์ Manifest ของเว็บแอป

การติดตั้งแอป

เมื่อผู้ใช้ยอมรับข้อความแจ้งให้ติดตั้งในเบราว์เซอร์ เหตุการณ์ appinstalled จะเริ่มทำงานในเบราว์เซอร์แบบ Chromium การใช้งานที่ดีสำหรับเครื่องจัดการเหตุการณ์นี้คือการนำโปรโมชันการติดตั้งแอปที่คุณเพิ่มไว้ออก

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

โปรดทราบว่าในอุปกรณ์ Android ที่มี WebAPK เหตุการณ์จะเริ่มทำงานเมื่อผู้ใช้ยอมรับกล่องโต้ตอบ ไม่ใช่หลังจากที่สร้างและติดตั้ง WebAPK แล้ว อาจมีความล่าช้าเล็กน้อยก่อนที่แอปจะได้รับการติดตั้งอย่างสมบูรณ์

ส่วนเนื้อหาพร้อมท์การติดตั้งจะอธิบายวิธีตรวจสอบว่าข้อความแจ้งการติดตั้งพร้อมใช้งานหรือไม่และผู้ใช้จะเลือกอะไร

คำเตือน: เหตุการณ์ appinstalled ใช้ได้เฉพาะในเบราว์เซอร์แบบ Chromium และเป็นส่วนหนึ่งของโปรแกรมบ่มเพาะสำหรับข้อกำหนดของไฟล์ Manifest

การโอนเซสชัน

ผู้ใช้จะใช้ 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 แต่ละรายการ

แอปพลิเคชันที่เกี่ยวข้อง

การรองรับเบราว์เซอร์

• เท่า
• 79 คน
• เท่า
• เท่า

แหล่งที่มา

เว็บไซต์ระบุความสัมพันธ์กับแอปผ่านไฟล์ Manifest โดยใช้สมาชิก related_applications ของข้อกำหนดไฟล์ Manifest ของเว็บแอป คีย์ related_applications คืออาร์เรย์ของออบเจ็กต์ที่แสดงแอปพลิเคชันที่เกี่ยวข้องแต่ละรายการ แต่ละรายการจะมี platform, url และ id ซึ่งไม่บังคับ

ค่าแพลตฟอร์มที่เป็นไปได้มีดังนี้

• chrome_web_store: Google Chrome เว็บสโตร์
• play: แอป Google Play (Android และ ChromeOS)
• chromeos_play: ChromeOS Play
• webapp: เว็บแอป
• windows: Microsoft Store (Windows 10 และ 11)
• f-droid: 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
}

หมายเหตุ: การใช้ prefer_related_applications: true กับแอปพลิเคชันที่ต้องการ webapp เท่านั้นไม่ได้ส่งผลต่อวิธีเสนอและติดตั้ง PWA

แบนเนอร์ Apple Smart App

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 ในช่องไฟล์ Manifest related_applications ด้วย 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/ โดยให้สิทธิ์ขอบเขตอื่นตามที่อธิบายไว้ในบทความนี้

แหล่งข้อมูล

• ติดตั้งแอปของคุณแล้วใช่ไหม getInstalledrelatedApps() จะบอกคุณไว้
• MDN: แอปพลิเคชันที่เกี่ยวข้อง
• MDN: เหตุการณ์ที่ติดตั้งแอป
• Apple: การโปรโมตแอปด้วยแบนเนอร์แอปอัจฉริยะ