###### tags: `PWA`
# PWA
### 部署 Web App Manifest

Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊（像是名稱、作者、圖示、描述）。 manifest 的功用是將 Web 應用程式安裝到設備的主畫面，為使用者提供更快速的訪問和更豐富的體驗。

Web App manifests 是屬於 progressive web apps (PWA) 的 Web 技術系列的一部分， 這是一個能不透過 App 商店就能被安裝到設備主畫面的 Web 應用程式，伴隨著其他功能，比如離線使用和通知的接收發送。

{
  "name": "Dev'Coffee",
  "short_name": "DevCoffee",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png", "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png","sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png", "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png", "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png", "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png", "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png", "sizes": "512x512"
    }
  ]
}

* **name**: When the browser launches the splash screen, it will be the name displayed on the screen.
* **short_name**: It will be the name displayed underneath your app shortcut on the home screen.
* **start_url**: It will be the page shown to the user when your app is open.
* **display**: It tells the browser how to display the app. There are several modes like **minimal-ui**, **fullscreen**, **browser** etc. Here, we use the **standalone** mode *to hide everything related to the browser*.
* **background_color**: When the browser launches the splash screen, it will be the background of the screen.
* **theme_color**: It will be the background color of the status bar when we open the app.
* **orientation**: It tells the browser the orientation to have when displaying the app. 定義預設的顯示方向，其將作用在 all the web application's top level browsing contexts.

"orientation": "portrait-primary"
- any
- natural
- landscape
- landscape-primary
- landscape-secondary
- portrait
- portrait-primary
- portrait-secondary

* **icons**: When the browser launches the splash screen, it will be the icon displayed on the screen.

## 來源
* https://developer.mozilla.org/zh-TW/docs/Web/Manifest
* https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/#what-is-a-progressive-web-app
* https://robferguson.org/blog/2018/09/14/pwa-tips-and-tricks/
* https://appsco.pe/developer/splash-screens