[Web] PWAs 구성

PWA - Progressive web apps

SPA - Single Page Application

 

모바일 OS 에 설치 가능한 웹 앱 정도로 이해

head 영역에 manifest 파일 추가

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

manifest.json

{
    "name": "Bootstrap",
    "short_name": "bootstrap",
    "theme_color": "#cecece",
    "background_color": "#2196f3",
    "display": "minimal-ui",
    "orientation": "portrait",
    "Scope": "/",
    "start_url": "/",
    "icons": [
      {
        "src": "images/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
      },
      {
        "src": "images/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
      },
      {
        "src": "images/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
      },
      {
        "src": "images/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
      },
      {
        "src": "images/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
      },
      {
        "src": "images/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "images/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
      },
      {
        "src": "images/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "splash_pages": null
  }