PWA：用 Manifest 定義 App 的名稱

第 12 屆 iThome 鐵人賽

DAY 24

Software Development

用 Chromebook 能寫什麼樣的東西系列第 24 篇

12th鐵人賽

NoobTW

團隊{iT12.group[i].name}

2020-09-30 21:55:08

2195 瀏覽

分享至

PWA 所以可以用來加到電腦和手機的桌面，並打造接近原生的使用者體驗，靠的就是 Manifest.json。究竟 Manifest.json 裡面記載了什麼呢？

Manifest.json 記載了 App 的相關資訊，像是 App 名稱、描述、圖案、顏色、大小等。而且你只需要準備一個 json 檔，和相對應的圖示就可以了。

範例 Manifest

這邊取上一篇提到的範例，可以在 GitHub 上存取這個檔案。

{
  "short_name": "訂房 × PWA",
  "name": "訂房 × PWA Example",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#eeeeee",
  "background_color": "#eeeeee"
}

name：App 的名稱
short_name：App 在應用程式列表顯示的名稱
icons：定義 App 會顯示的圖示。可能會顯示在網址列、手機桌面等。
start_url：App 開啟後要顯示的路徑，例如 /login.html 之類的
display：設定 App 要不要顯示全螢幕。
theme_color：主題顏色，例如狀態列的顏色。
background_color：App 的背景色。

除了這個以外，也可以設定 App 是否允許旋轉螢幕、預設是直的還是橫的，App 的啟動畫面（Splash Screen）、App 的主要語言等等。

而要把 Manifest.json 加到 App 中也只要在 <head> 裡面即可，透過 <link> 語法即可嵌入：

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

有了 Manifest.json 後不代表就是一個正常的 PWA，不過你就可以把 App 加到桌面上了。透過 Android 的 Chrome 可以加到主畫面、Safari 則在分享選單中可以加到主畫面。如果你寫好一個正確的 PWA，就會直接出現加到主畫面的提示。

PWA_Homescreen

本篇文章同步發表在 Noob's Space。

PWA：Service Worker 在網頁關掉之後還會繼續跑

PWA：用 DevTools 來檢查螢幕大小和網路速度

系列文

用 Chromebook 能寫什麼樣的東西共 30 篇

RSS系列文訂閱系列文

24 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

用 Chromebook 能寫什麼樣的東西系列 第 24 篇