หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Pete LePage

Alexey Rodionov

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

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

Bubblewrap เป็นชุดไลบรารีแบบโอเพนซอร์สและเครื่องมือบรรทัดคำสั่ง (CLI) สำหรับ Node.js Bubblewrap พัฒนาโดยทีม Google Chrome เพื่อช่วยให้นักพัฒนาซอฟต์แวร์สร้าง สร้าง และลงนามในโปรเจ็กต์ Android ที่เปิด PWA เป็น Trusted Web Activity (TWA)

PWABuilder เป็นโปรเจ็กต์โอเพนซอร์สที่พัฒนาโดย Microsoft ซึ่งช่วยให้นักพัฒนาแอปแพ็กและลงนามใน PWA เพื่อเผยแพร่ไปยัง Store ต่างๆ ได้แก่ Microsoft Store, Google Play Store, App Store และ Meta Quest Store โดยการป้อน URL ของ PWA, ป้อน/แก้ไขข้อมูลเมตาของแอป และคลิกปุ่มสร้าง

PWABuilder ใช้ Bubblewrap เบื้องหลังเพื่อแพ็กเกจ PWA สำหรับ Android และ ChromeOS

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

เช่น

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

หากต้องการใช้ Get Installed Related Apps API คุณต้องแจ้งให้แอปทราบเกี่ยวกับหน้าเว็บ แล้วแจ้งให้หน้าเว็บทราบเกี่ยวกับแอป เมื่อกำหนดความสัมพันธ์ระหว่างทั้ง 2 อย่างแล้ว คุณจะตรวจสอบได้ว่ามีการติดตั้งแอปที่เกี่ยวข้องหรือไม่

เพื่อป้องกันไม่ให้เว็บไซต์ทดสอบชุดแอปของตนเองที่กว้างเกินไป ระบบจะพิจารณาเฉพาะแอป 3 รายการแรกที่ประกาศไว้ในไฟล์ Manifest ของเว็บแอป

เช่นเดียวกับ Web API อื่นๆ ที่มีประสิทธิภาพส่วนใหญ่ Get Installed Related Apps API จะพร้อมใช้งานเมื่อแสดงผ่าน HTTPS เท่านั้น

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;

ซึ่งหมายความว่าเมธอด navigator.getInstalledRelatedApps() จะยังคงแสดงแอปที่เกี่ยวข้องซึ่งติดตั้งไว้ แม้ว่าแอปเหล่านั้นจะมีเวอร์ชันต่ำกว่า min_version หรือใบรับรองการลงนามไม่ตรงกับ fingerprints ใดๆ ที่ประกาศไว้ในช่อง related_applications ของไฟล์ Manifest ของเว็บแอป

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

ประเภทแอป	ตรวจสอบได้จาก
แอป 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 โดยเพิ่มไฟล์ 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 ในช่องคอมโพเนนต์

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

คำอธิบายแบบสาธารณะสำหรับ Get Installed Related Apps API
ร่างข้อกำหนด
ข้อบกพร่องในการติดตาม
รายการใน ChromeStatus.com
คอมโพเนนต์ Blink: Mobile>WebAPKs

ขอขอบคุณ

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