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