本頁面由 Cloud Translation API 翻譯而成。

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

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

Pete LePage

什麼是 getInstalledRelatedApps() API？

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

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

舉例來說，如果應用程式已安裝：

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

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

支援的應用程式類型

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

注意： getInstalledRelatedApps() API 僅允許檢查您的應用程式是否已安裝。您無法取得所有已安裝應用程式的清單，或是檢查是否安裝了其他第三方應用程式。

檢查是否已安裝 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 屬性，也就是提供詳細資料的陣列包括 platform 和 id

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 屬性，也就是提供詳細資料的陣列包括 platform 和 id

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"
    }
  }
]

注意： 我在建立 assetlinks.json 檔案時，請仔細檢查檔案名稱，因為我一直在發現自己新增了額外的 's'，。

向您的網站介紹您的 PWA

接著，請向網站介紹 PWA 應用程式：在您的網頁上新增網頁應用程式資訊清單。資訊清單必須包括 related_applications 屬性，也就是提供詳細資料的陣列，包括 platform 和 url。

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 團隊優先處理特定功能，並顯示其他相關資訊對瀏覽器供應商來說，支援這些廠商極為重要。

歡迎前往 WICG Discourse 討論串，說明您打算如何使用這個 API。
使用主題標記將推文傳送至 @ChromiumDev #getInstalledRelatedApps敬上，並說明你使用這項服務的位置和方式。

實用連結

謝謝

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