การตรวจจับ

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

โอนการไปยังส่วนต่างๆ ระหว่างแท็บเบราว์เซอร์และหน้าต่าง PWA

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

ในภาพต่อไปนี้ คุณจะเห็นรายการเมนูใน Android เมื่อติดตั้งแอปแล้ว

Chrome ใน Android จะแสดงรายการเมนูเพื่อเปิดการนําทางใหม่ในหน้าต่าง PWA

โอนหลังการติดตั้ง

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

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

กำลังตรวจหาการโอน

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

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 แต่ละรายการ

การสนับสนุนเบราว์เซอร์

  • x
  • 79
  • x
  • x

แหล่งที่มา

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

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

  • chrome_web_store: Google Chrome เว็บสโตร์
  • play: แอป Google Play (Android และ ChromeOS)
  • chromeos_play: เล่น ChromeOS
  • webapp: เว็บแอป
  • 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/ โดยให้สิทธิ์แก่ขอบเขตอื่นตามที่อธิบายไว้ในบทความนี้

แหล่งข้อมูล