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

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

พีต เลอเพจ

getInstalledApps() API คืออะไร

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

getInstalledRelatedApps() ช่วยให้หน้าของคุณตรวจสอบได้ว่าแอปของคุณบนอุปกรณ์เคลื่อนที่หรือเดสก์ท็อปหรือไม่ หรือในบางกรณีหากมี Progressive Web App (PWA) ติดตั้งไว้ในอุปกรณ์ของผู้ใช้แล้ว และให้คุณปรับแต่งประสบการณ์ของผู้ใช้ได้ (หากมี)

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

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

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

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

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

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

การเรียก getInstalledrelatedApps()

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

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

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

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

หากมีคำถาม

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

ความคิดเห็น

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

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

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

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

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

ขอขอบคุณ

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