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

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

Pete LePage

getINSTALLrelatedApps() API คืออะไร

วันที่
เว็บไซต์ที่ใช้ getInstalledRelatedApps() ในการพิจารณาว่า ติดตั้งแอป Android ไว้แล้ว

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

เช่น หากคุณติดตั้งแอปไว้แล้ว

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

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

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

ประเภทแอป ตรวจสอบได้จาก
แอป Android Android เท่านั้น
Chrome 80 ขึ้นไป
แอป Windows (UWP) Windows เท่านั้น
Chrome 85 ขึ้นไป
Edge 85 ขึ้นไป
Progressive Web App
ติดตั้งในขอบเขตเดียวกันหรือ ขอบเขตอื่น 		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>

เมื่อเสร็จแล้ว ให้เผยแพร่แอป Android ที่อัปเดตแล้วไปยัง Play Store

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

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

  • platform ต้องเป็น play
  • id คือรหัสแอปพลิเคชัน Google Play สำหรับแอป 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 ช่วงเวลานี้ ช่วยให้มั่นใจว่ามีเฉพาะเว็บไซต์ของคุณเท่านั้นที่ตรวจสอบได้ว่ามีการติดตั้งแอป 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 ขึ้นไป

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

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

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

ตรวจสอบว่าได้ติดตั้ง 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 แล้ว

ลองใช้การสาธิต

การเรียกใช้ getInstalledApps()

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

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

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

เช่นเดียวกับ API ของเว็บที่มีประสิทธิภาพอื่นๆ ส่วนใหญ่ getInstalledRelatedApps() API คือ ใช้ได้เฉพาะเมื่อแสดงผ่าน HTTPS เท่านั้น

หากมีคำถาม

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

ความคิดเห็น

คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือเป็นการติดตั้งใช้งาน แตกต่างจากข้อกำหนด

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

แสดงการรองรับ API

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

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

ขอขอบคุณ

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