ติดตั้งแอปของคุณแล้วหรือไม่ get installจัดให้Apps() บอกคุณ!

getInstalledRelatedApps() วิธีนี้ช่วยให้เว็บไซต์ตรวจสอบได้ว่าแอป Android/UWP หรือ PWA ของคุณติดตั้งอยู่ในอุปกรณ์ของผู้ใช้หรือไม่

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

getInstalledRelatedApps() API คืออะไร

เมธอด getInstalledRelatedApps() จะแสดงรายการแอปที่เกี่ยวข้องซึ่งติดตั้งไว้

การเรียก navigator.getInstalledRelatedApps() จะแสดงผล Promise ที่ แก้ไขด้วยอาร์เรย์ของแอปที่เกี่ยวข้องซึ่งติดตั้งในอุปกรณ์ของผู้ใช้

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

ซึ่งจะช่วยให้หน้าเว็บของคุณตรวจสอบได้ว่าแอป Android, แอป Universal Windows Platform (UWP) หรือ Progressive Web App (PWA) ของคุณติดตั้งอยู่ในอุปกรณ์ของผู้ใช้แล้วหรือไม่ และช่วยให้คุณปรับแต่งประสบการณ์ของผู้ใช้ได้หากติดตั้งแล้ว

เช่น หากมีการติดตั้งแอปไว้แล้ว ให้ทำดังนี้

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

ประเภทแอปที่รองรับซึ่งคุณตรวจสอบได้

ประเภทแอป ตรวจสอบได้จาก
แอป Android Android เท่านั้น
Chrome 80 ขึ้นไป
แอป Universal Windows Platform (UWP) Windows เท่านั้น
Chrome 85 ขึ้นไป
Edge 85 ขึ้นไป
Progressive Web App (PWA)
ที่ติดตั้งใน ขอบเขตเดียวกันในต้นทางเดียวกัน 		Android:
Chrome 84 ขึ้นไป
เดสก์ท็อป (Windows, macOS, Linux, ChromeOS):
Chrome 140 ขึ้นไป
Edge 140 ขึ้นไป
Progressive Web App (PWA)
ที่ติดตั้งในขอบเขตที่แตกต่างกันในต้นทางเดียวกันหรือต่างกัน 		Android เท่านั้น:
Chrome 84 ขึ้นไป

ตรวจสอบว่าติดตั้งแอป Android แล้ว

เว็บไซต์สามารถตรวจสอบได้ว่ามีการติดตั้งแอป Android ของคุณหรือไม่

ใช้งานได้บน

Android เท่านั้น: Chrome 80 ขึ้นไป

บอกแอป Android เกี่ยวกับเว็บไซต์ของคุณ

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

ใน AndroidManifest.xml ของแอป Android ให้เพิ่ม asset_statements รายการดังนี้

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

จากนั้นใน strings.xml ให้เพิ่มข้อความระบุเนื้อหาต่อไปนี้ โดยอัปเดต site ด้วย โดเมนของคุณ อย่าลืมใส่อักขระหลีก

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

เมื่อเสร็จแล้ว ให้ติดตั้งแอปที่อัปเดตในอุปกรณ์หรือเผยแพร่ไปยัง Google Play Store หรือแพลตฟอร์มการจัดจำหน่ายแอป Android อื่นๆ

แจ้งให้เว็บไซต์ทราบเกี่ยวกับแอป Android

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

  • platform ต้องเป็น play
  • id คือรหัสแพ็กเกจ Android
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

ตรวจสอบว่าแอปได้รับการติดตั้งแล้ว

สุดท้าย ให้เรียกใช้ฟังก์ชันแบบอะซิงโครนัส navigator.getInstalledRelatedApps() เพื่อตรวจสอบว่าได้ติดตั้งแอป Android แล้วหรือไม่

ตรวจสอบว่าติดตั้งแอป Windows (UWP) แล้ว

เว็บไซต์ของคุณสามารถตรวจสอบได้ว่ามีการติดตั้งแอป Windows (สร้างโดยใช้ UWP) หรือไม่

ใช้งานได้บน

Windows เท่านั้น: Chrome 85 ขึ้นไป, Edge 85 ขึ้นไป

บอกแอป Windows เกี่ยวกับเว็บไซต์ของคุณ

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

เพิ่มการลงทะเบียนส่วนขยาย Windows.appUriHandler ลงในไฟล์ Manifest ของแอป Package.appxmanifest เช่น หากที่อยู่เว็บไซต์ของคุณคือ example.com คุณจะต้องเพิ่มรายการต่อไปนี้ในไฟล์ Manifest ของแอป

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

โปรดทราบว่าคุณอาจต้องเพิ่มเนมสเปซ uap3 ลงในแอตทริบิวต์ <Package>

จากนั้นสร้างไฟล์ JSON (ไม่มีนามสกุลไฟล์ .json) ชื่อ windows-app-web-link และระบุชื่อตระกูลแพ็กเกจของแอป วาง ไฟล์นั้นไว้ที่รูทของเซิร์ฟเวอร์หรือในไดเรกทอรี /.well-known/ คุณ ดูชื่อตระกูลแพ็กเกจได้ในส่วนการแพ็กเกจในโปรแกรมออกแบบไฟล์ Manifest ของแอป 

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

ดูเดโมนี้

ดูรายละเอียดทั้งหมดเกี่ยวกับการตั้งค่าตัวแฮนเดิล URI ได้ที่เปิดใช้แอปสำหรับเว็บไซต์โดยใช้ตัวแฮนเดิล URI ของแอป

บอกเว็บไซต์เกี่ยวกับแอป Windows

จากนั้นแจ้งให้เว็บไซต์ทราบเกี่ยวกับแอป Windows โดยเพิ่มไฟล์ Manifest ของเว็บแอปลงในหน้าเว็บ ไฟล์ Manifest ต้องมีพร็อพเพอร์ตี้ related_applications ซึ่งเป็นอาร์เรย์ที่ให้รายละเอียดเกี่ยวกับแอป รวมถึง platform และ id

  • platform ต้องเป็น windows
  • id คือชื่อตระกูลแพ็กเกจของแอป ซึ่งต่อท้ายด้วยค่า <Application> Id ในไฟล์ Package.appxmanifest
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

ตรวจสอบว่าแอปได้รับการติดตั้งแล้ว

สุดท้าย ให้เรียกใช้ฟังก์ชันแบบอะซิงโครนัส navigator.getInstalledRelatedApps() เพื่อตรวจสอบว่าได้ติดตั้งแอป Windows แล้วหรือไม่

ตรวจสอบว่าติดตั้ง Progressive Web App แล้ว (อยู่ในขอบเขต)

PWA สามารถตรวจสอบได้ว่ามีการติดตั้งไว้แล้วหรือไม่ ในกรณีนี้ หน้าเว็บที่ส่งคำขอต้องอยู่ในโดเมนเดียวกันและภายในขอบเขต ของ PWA ตามที่กำหนดโดยขอบเขตในไฟล์ Manifest ของเว็บแอป

ใช้งานได้บน

Android: Chrome 84 ขึ้นไป

เดสก์ท็อป (Windows, macOS, Linux, ChromeOS): Chrome 140 ขึ้นไป, Edge 140 ขึ้นไป

บอก PWA เกี่ยวกับตัวมันเอง

บอก PWA เกี่ยวกับตัวมันเองโดยการเพิ่มรายการ related_applications ในไฟล์ Manifest ของเว็บแอปของ PWA

  • platform ต้องเป็น webapp
  • url คือเส้นทาง (อาจเป็นแบบสัมพัทธ์) ไปยังไฟล์ Manifest ของเว็บแอปของ PWA
  • id คือเส้นทางแบบเต็มไปยังเว็บแอป (ต้องระบุสำหรับเดสก์ท็อป แต่ไม่จำเป็นสำหรับ Android)
{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com"
  }],
  …
}

ตรวจสอบว่าติดตั้ง PWA แล้วหรือยัง

สุดท้าย ให้เรียกใช้ฟังก์ชันแบบอะซิงโครนัส navigator.getInstalledRelatedApps() จากภายในขอบเขตของ PWA เพื่อตรวจสอบว่าติดตั้งแล้วหรือไม่ หากมีการเรียกใช้ getInstalledRelatedApps() นอกขอบเขตของ PWA ระบบจะ แสดงผล [] ดูหัวข้อถัดไปสำหรับรายละเอียดเพิ่มเติม

ตรวจสอบว่าติดตั้ง Progressive Web App แล้ว (อยู่นอกขอบเขต)

เว็บไซต์สามารถตรวจสอบได้ว่ามีการติดตั้ง PWA หรือไม่ แม้ว่าหน้าเว็บจะอยู่นอกขอบเขตของ PWA ก็ตาม ตัวอย่างเช่น หน้า Landing Page ที่แสดงจาก /landing/ สามารถตรวจสอบได้ว่ามีการติดตั้ง PWA ที่แสดงจาก /pwa/ หรือไม่ หรือหากหน้า Landing Page แสดงจาก www.example.com และ PWA แสดงจาก app.example.com

ใช้งานได้บน

Android เท่านั้น: Chrome 84 ขึ้นไป

บอก PWA เกี่ยวกับเว็บไซต์ของคุณ

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

เพิ่มไฟล์ assetlinks.json ไปยังไดเรกทอรี /.well-known/ ของโดเมนที่ PWA อยู่ เช่น app.example.com ในsiteพร็อพเพอร์ตี้ ให้ระบุเส้นทางแบบเต็มไปยังไฟล์ Manifest ของเว็บแอปที่จะทำการตรวจสอบ (ไม่ใช่ไฟล์ Manifest ของเว็บแอปของ PWA)

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

บอกเว็บไซต์เกี่ยวกับ PWA

จากนั้นแจ้งให้เว็บไซต์ทราบเกี่ยวกับแอป PWA โดยเพิ่มไฟล์ Manifest ของเว็บแอปลงในหน้าเว็บ ไฟล์ Manifest ต้องมีพร็อพเพอร์ตี้ related_applications ซึ่งเป็นอาร์เรย์ที่ให้รายละเอียดเกี่ยวกับ PWA รวมถึง platform และ url

  • platform ต้องเป็น webapp
  • url คือเส้นทางแบบเต็มไปยังไฟล์ Manifest ของเว็บแอปของ PWA
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

ตรวจสอบว่าติดตั้ง PWA แล้วหรือยัง

สุดท้าย ให้เรียกใช้ฟังก์ชันแบบไม่พร้อมกัน navigator.getInstalledRelatedApps() เพื่อตรวจสอบว่าได้ติดตั้ง PWA แล้วหรือไม่

หากยังมีข้อสงสัย

หากยังมีข้อสงสัย ดูแท็ก getInstalledRelatedApps ใน StackOverflow เพื่อดูว่ามีใครเคยถามคำถามที่คล้ายกันหรือไม่ หากไม่พบ ให้ถามคำถามที่นั่น และอย่าลืมติดแท็กprogressive-web-apps ทีมของเราจะตรวจสอบแท็กดังกล่าวอยู่เสมอ และพยายามตอบคำถามของคุณ

ความคิดเห็น

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งาน แตกต่างจากข้อกำหนด

  • รายงานข้อบกพร่องที่ https://new.crbug.com ระบุรายละเอียดให้มากที่สุด เท่าที่จะทำได้ ระบุวิธีการจำลองข้อบกพร่อง และ ป้อน Mobile>WebAPKs ในช่องคอมโพเนนต์

แสดงการสนับสนุน API

คุณวางแผนที่จะใช้ getInstalledRelatedApps() API ไหม การสนับสนุนแบบสาธารณะของคุณ ช่วยให้ทีม Chrome จัดลําดับความสําคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้มีความสําคัญเพียงใด

  • แชร์วิธีที่คุณวางแผนจะใช้ API ในเธรด WICG Discourse
  • ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #getInstalledRelatedApps และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

ขอขอบคุณ Sunggook Chue จาก Microsoft ที่ช่วยให้รายละเอียด สำหรับการทดสอบแอป Windows และ Rayan Kanso ที่ช่วยให้รายละเอียดเกี่ยวกับ Chrome