เมธอด getInstalledRelatedApps()
อนุญาตให้เว็บไซต์ตรวจสอบว่าแอป iOS/Android/เดสก์ท็อป หรือ PWA ติดตั้งอยู่ในอุปกรณ์ของผู้ใช้หรือไม่
getInstalledApps() API คืออะไร
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 จัดลำดับความสำคัญของฟีเจอร์ต่างๆ ได้ และแสดงให้เห็นว่าผู้ให้บริการเบราว์เซอร์รายอื่นๆ มีความสําคัญเพียงใดในการสนับสนุนฟีเจอร์เหล่านั้น
- แชร์แผนการใช้ API ในชุดข้อความของ WICG Discourse
- ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก
#getInstalledRelatedApps
และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- ข้อความอธิบายแบบสาธารณะสำหรับ
getInstalledRelatedApps()
API - ฉบับร่างของข้อกำหนด
- ข้อบกพร่องในการติดตาม
- รายการ ChromeStatus.com
- คอมโพเนนต์การกะพริบ:
Mobile>WebAPKs
ขอขอบคุณ
ขอขอบคุณเป็นพิเศษ Sunggook Chue จาก Microsoft ที่ช่วยเหลือเกี่ยวกับรายละเอียด ในการทดสอบแอป Windows และ Rayan Kanso สำหรับความช่วยเหลือเกี่ยวกับรายละเอียดของ Chrome