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

您已設計網頁應用程式，編寫其程式碼和 Service Worker，最後新增了網頁應用程式資訊清單，用於說明應用程式安裝在使用者裝置上後應的行為。這包括用於手機啟動器或應用程式切換器等高解析度圖示，或是從使用者主畫面開啟時，網頁應用程式的啟動方式。

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

PWACompat 會採用網頁應用程式資訊清單，並加入標準和非標準的中繼資料、連結等標記。
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 會載入網頁應用程式資訊清單，並：

  • 為資訊清單中的所有圖示建立中繼圖示標記 (例如，為網站小圖示或較舊的瀏覽器)
  • 請為各種瀏覽器 (例如 iOS、WebKit/Chromium 分支) 建立備用中繼標記，說明網頁應用程式的開啟方式
  • 根據資訊清單設定主題顏色

適用於 Safari 和 PWACompat：

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

如果您想進一步瞭解其他瀏覽器支援情形，或想取得相關協助，請造訪 GitHub 推出的 PWACompat。

立即體驗

PWACompat 已推出 Airhorner、v8.dev 和 Emojityper。網站的標頭 HTML 相當簡單：只要指定資訊清單，PWACompat 即可處理剩下的問題。

📢🤣🎉