คุณติดตั้งแอปแล้วใช่ไหม Get Installed Related Apps API จะบอกคุณ

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Get Installed Related Apps API ช่วยให้คุณดูรายการแอปที่เกี่ยวข้องซึ่งติดตั้งไว้พร้อมกับรายละเอียดเกี่ยวกับแอปเหล่านั้นได้

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

หากติดตั้งแอปแล้ว คุณสามารถปรับแต่งประสบการณ์ของผู้ใช้ได้

เช่น

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

Get Installed Related Apps API คืออะไร

การเรียกใช้เมธอด navigator.getInstalledRelatedApps() แบบไม่พร้อมกันจะแสดงผล Promise ที่แก้ไขด้วยอาร์เรย์ของออบเจ็กต์ที่มีรายละเอียดเกี่ยวกับแอปที่มีลักษณะต่อไปนี้

  • ติดตั้งในอุปกรณ์ปัจจุบัน
  • ที่กำหนดไว้ในช่อง related_applications ของไฟล์ Manifest ของเว็บแอป
  • มีความสัมพันธ์ที่ยืนยันแล้วกับหน้าเว็บที่มีการเรียกใช้เมธอด navigator.getInstalledRelatedApps() (ดูรายละเอียดในส่วนถัดไป)
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

การเรียกใช้ console.log(installedRelatedApps) จะแสดงผลคล้ายกับตัวอย่างต่อไปนี้

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

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

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

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

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

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

ประเภทแอป ตรวจสอบได้จาก
แอป 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 โดยใช้ระบบลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ซึ่งจะยืนยันว่ามีเพียงเว็บไซต์ของคุณเท่านั้นที่ตรวจสอบได้ว่ามีการติดตั้งแอป 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/ คุณดูชื่อตระกูลแพ็กเกจได้ในส่วนการแพ็กเกจใน App Manifest Designer

[{
  "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 คือรหัสเว็บแอปที่ประกาศไว้ในฟิลด์ id ของไฟล์ Manifest ของเว็บแอป หรือคำนวณโดยเบราว์เซอร์ (ต้องระบุสำหรับเดสก์ท็อป แต่ไม่จำเป็นสำหรับ Android)
{
  …
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com/?utm_source=home_screen"
  }],
  …
}

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

สุดท้าย ให้เรียกใช้ฟังก์ชันแบบไม่พร้อมกัน navigator.getInstalledRelatedApps() จากภายในขอบเขตของ PWA เพื่อตรวจสอบว่ามีการติดตั้งหรือไม่ หากมีการเรียกใช้ navigator.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 เกี่ยวกับเว็บไซต์ของคุณ

ก่อนอื่นคุณจะต้องเพิ่มลิงก์ Digital Asset Links ไปยังเซิร์ฟเวอร์ที่แสดง 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 ในช่องคอมโพเนนต์

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

ขอขอบคุณ

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