已安裝您的應用程式嗎?getInstalledRelatedApps() 就會告訴你!

getInstalledRelatedApps() 方法可讓網站 您的 iOS/Android/電腦版應用程式或 PWA 已安裝在使用者的裝置上。

什麼是 getInstalledRelatedApps() API?

網站使用 getInstalledRelatedApps() 判斷是否有 已安裝 Android 應用程式。

getInstalledRelatedApps()」可讓「您的」頁面執行以下操作: 檢查行動版或電腦版應用程式,或者在某些情況下,也可以檢查漸進式應用程式 使用者的裝置已安裝網頁應用程式 (PWA),可讓您 也可以自訂使用者體驗

舉例來說,如果應用程式已安裝:

  • 將使用者從產品行銷頁面直接重新導向至您的應用程式。
  • 將其他應用程式的通知 (例如通知) 集中化, 防止重複通知
  • 如果您的 PWA 並未推廣安裝 PWA, 已安裝其他應用程式。

若要使用 getInstalledRelatedApps() API,您必須將 然後將你的應用程式介紹給你的網站將 就能檢查應用程式是否已安裝

支援的應用程式類型

應用程式類型 可檢查時間:
Android 應用程式 僅限 Android 裝置
Chrome 80 以上版本
Windows (UWP) 應用程式 僅限 Windows
Chrome 85 以上版本
Edge 85 以上版本
漸進式網頁應用程式
安裝在相同範圍不同範圍
僅限 Android 裝置
Chrome 84 以上版本

檢查是否已安裝 Android 應用程式

你的網站可以檢查是否已安裝 Android 應用程式。

支援平台

Android:Chrome 80 以上版本

向 Android 應用程式說明您的網站

首先,您必須更新 Android 應用程式來定義關係 使用自然語言處理 Digital Asset Links 系統:這可以確保 網站可以查看是否已安裝 Android 應用程式

在 Android 應用程式的 AndroidManifest.xml 中新增 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 商店。

為您的網站介紹您的 Android 應用程式

接著,如何向您的網站介紹您的 Android 應用程式: 在您的網頁上新增網頁應用程式資訊清單。資訊清單必須 包括 related_applications 屬性,也就是提供詳細資料的陣列 包括 platformid

  • platform 須為 play
  • id 是您 Android 應用程式的 Google Play 應用程式 ID
{
  "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 擴充功能註冊作業 檔案 Package.appxmanifest。舉例來說,假設網站網址是 example.com 應在應用程式的資訊清單中新增下列項目:

<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/ 目錄中。個人中心 您可以在應用程式資訊清單的「封裝」部分找到套件名稱 我們才剛開始使用

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

請參閱「使用應用程式 URI 處理常式啟用網站的應用程式」一文, 完整的設定 URI 處理常式。

為您的網站提供 Windows 應用程式的相關資訊

接著,請按照下列步驟介紹您的 Windows 應用程式: 在您的網頁上新增網頁應用程式資訊清單。資訊清單必須 包含 related_applications 屬性,也就是提供詳細資料的陣列 包括 platformid

  • platform 須為 windows
  • id 是應用程式的套件名稱,附加在 <Application> Id 後方 值Package.appxmanifest
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

檢查是否已安裝應用程式

最後,請呼叫 navigator.getInstalledRelatedApps() 來檢查 已安裝 Windows 應用程式。

檢查是否已安裝漸進式網頁應用程式 (位於範圍內)

您的 PWA 可確認是否已安裝。在這個例子中 發出要求必須位於相同網域,且位於範圍內 ,如同網頁應用程式資訊清單中的範圍。

支援平台

Android:Chrome 84 以上版本

向 PWA 自我介紹

在以下位置新增 related_applications 項目,向 PWA 自我介紹 PWA 網頁應用程式資訊清單

  • platform 須為 webapp
  • url 是 PWA 網頁應用程式資訊清單的完整路徑
{
  
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  
}

檢查是否已安裝 PWA

最後,在navigator.getInstalledRelatedApps() 檢查 PWA 的範圍,檢查是否已安裝該程式。如果 系統會在 PWA 範圍之外呼叫 getInstalledRelatedApps(), return false。詳情請參閱下節。

試用示範模式

檢查是否已安裝漸進式網頁應用程式 (不在範圍內)

您的網站可以檢查是否已安裝 PWA 您的 PWA 範圍。舉例來說,假設有個到達網頁 「/landing/」可以檢查是否已安裝透過 /pwa/ 提供的 PWA,或您的 到達網頁的放送來源www.example.com,而您的 PWA 的放送位置為 app.example.com

支援平台

Android:Chrome 84 以上版本

向 PWA 說明您的網站

首先,您必須將數位資產連結新增至 PWA 的伺服器 。這樣一來,您就能定義網站 ,確保只有您的網站可以檢查是否已安裝 PWA。

assetlinks.json 檔案新增至 /.well-known/ 目錄 網域為 PWA,例如 app.example.com。在「site」中 屬性,請提供要執行的網頁應用程式資訊清單完整路徑 檢查 (而非 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 應用程式: 在您的網頁上新增網頁應用程式資訊清單。資訊清單必須 包括 related_applications 屬性,也就是提供詳細資料的陣列 ,包括 platformurl

  • platform 須為 webapp
  • url 是 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);
});

如要避免網站測試範圍太廣的應用程式, 在這個情況下,系統只會向網頁應用程式資訊清單中宣告的前三個應用程式 所需的任何角色

如同其他最強大的網路 API 一樣,getInstalledRelatedApps() API 是 只有在透過 HTTPS 提供的情況下才能使用。

還有問題嗎?

還有其他問題嗎?檢查 StackOverflow 上的 getInstalledRelatedApps 標記 ,看看其他人是否有類似問題。如果沒有,請詢問 question,請務必使用 progressive-web-apps 標記。我們的團隊經常監控 並試著回答您的問題

意見回饋

您發現 Chrome 實作錯誤嗎?另一種是實作 該怎麼辦?

  • 前往 https://new.crbug.com 回報錯誤。盡可能加入 請盡可能詳細說明,提供重現錯誤的簡單操作說明,以及 在「Components」方塊中輸入 Mobile>WebAPKs毛刺 很適合用來分享快速又簡單的建議。

顯示對 API 的支援

您是否打算使用 getInstalledRelatedApps() API?你的公開 支援團隊可協助 Chrome 團隊優先處理特定功能,並顯示其他相關資訊 對瀏覽器供應商來說,支援這些廠商極為重要。

實用連結

謝謝

特別感謝 Microsoft 團隊 Sunggook Chue 為大家提供詳細資訊 ,用於測試 Windows 應用程式,而 Rayan Kanso 是關於 Chrome 詳細資料的說明。