PWACompat - 所有瀏覽器的網頁應用程式資訊清單

您已設計網路應用程式、編寫程式碼和服務工作者，最後新增網路應用程式資訊清單，說明在使用者裝置上「安裝」時應如何運作。包括用於手機啟動器或應用程式切換器的高解析度圖示，或是從使用者主畫面開啟時，網頁應用程式應如何啟動。

雖然許多瀏覽器都會遵循 Web App 資訊清單，但並非所有瀏覽器都會載入或遵循 每個指定值輸入 PWACompat 程式庫，可擷取網頁應用程式資訊清單，並自動插入相關 meta 或 link 標記 查看不同大小的圖示、網站小圖示、啟動模式和顏色等

PWACompat 會使用 Web App 資訊清單，並新增標準和非標準的元資料、連結等標記。
PWACompat 會採用網頁應用程式資訊清單，並新增標準和非標準中繼、連結等標記。

也就是說，您再也不必加入無數字、標準和非標準代碼了 (例如 <link rel="icon" ... /> 或 <meta name="orientation" ... />)。iOS 首頁 PWACompat 甚至能動態建立啟動畫面 則是為每種螢幕大小個別產生一個容器

Emojityper 的 iOS 啟動畫面，由 PWACompat 產生

使用 PWACompat

如要使用 PWACompat，請務必在所有網頁上連結至網頁應用程式資訊清單：

<link rel="manifest" href="manifest.webmanifest" />

然後加入這個指令碼，或將其加到非同步載入的套件：

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACompat 會擷取您的資訊清單檔案，並執行使用者瀏覽器所需的工作 使用行動裝置或電腦

針對搜尋索引功能，我們仍建議至少加入一個高品質的捷徑圖示：

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

詳情請參閱最佳做法。

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

長篇

對於支援的瀏覽器，PWACompat 實際上會執行哪些操作？PWACompat 會載入網頁應用程式資訊清單，並執行下列操作：

  • 為資訊清單中的所有圖示建立中繼圖示標記 (例如 favicon、舊版瀏覽器)
  • 針對各種瀏覽器 (例如 iOS、WebKit/Chromium forks 等) 建立備用中繼標記，藉此描述瀏覽器 網頁應用程式的開啟方式
  • 根據資訊清單設定主題顏色

針對 Safari，PWACompat 也會：

  • 設定以下使用者的apple-mobile-web-app-capable (在沒有瀏覽器 Chrome 的情況下開啟) 顯示模式：standalone、fullscreen 或 minimal-ui
  • 建立 apple-touch-icon 圖片，將資訊清單背景新增至透明圖示：否則，iOS 會將透明度算為黑色
  • 建立動態啟動畫面圖片，與為以 Chromium 為基礎的瀏覽器產生的啟動畫面圖片相近

如果您想提供更多瀏覽器支援，或是需要協助， PWACompat 位於 GitHub。

立即試用

PWACompat 已在 Airhorner、v8.dev 和 Emojityper：網站的標頭 HTML 可以簡單一點：只要指定資訊清單，讓 PWACompat 處理其餘部分即可。

📢🤣🎉