PWA 漸進式網路應用程式 - 1. 安裝

5 月 18, 2024

--

前言

一直尋找 iPhone 上網頁如何全螢幕,後來找到 <meta name="apple-mobile-web-app-capable" content="yes"> 這行網頁宣告,然後才開始認識這個已經推出好幾年的技術。

PWA 是一個很大的議題,先從「方便加入主畫面」的「安裝」說起

--

--

可安裝

為了要讓網頁可以符合安裝需要

  1. 網址必須是 https://
  2. 網頁增加 <link rel="manifest" href="manifest.json" /> 宣告
  3. manifest.json 必須正確設定,缺少不行,多餘也也不行,如果沒有 App 抄 Hoyo 的設定即可

PWA_Test.html

manifest.json

需要注意的是,不需要的設定就不要填寫,有疑問可以看一下這個網頁:rel=manifest - HTML: HyperText Markup Language | MDN (mozilla.org)

Chrome 顯示安裝

Android 顯示安裝

--

除錯

使用 Google Chrome 或 Edge 瀏覽器 F12 可以進行檢查、除錯

--

重新安裝

--

 105 total views,  1 views today

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。