작은 재료입니다.

PWA를 구성하는 요소 중 하나는 Web App Manifest에 사용할 manifest.json을 수동으로 작성하지 않았습니까?
Web App Manifest의 icon용으로 몇개의 사이즈의 화상을 준비하지 않으면 안됩니다만, 화상 변환 소프트로 하나씩 사이즈 변환하고 있지 않습니까?

이번에는 이러한 작업을 3분 이내에 만들 수 있는 서비스를 소개합니다. 타이핑이 빠르면 1분도 걸리지 않는다고 생각합니다.

아마 이 기사에 도착한 분은 Web App Manifest나 manifest.json에 대해서는 이미 알고 있다고 생각합니다만, 만약을 위해 모르는 분은 아래의 링크를 참고해 주세요.

Web App Manifest | MDN

웹 앱 매니페스트 | 웹 | Google Developers

App Manifest Generator

이번 소개하는 것은 App Manifest Generator 라는 사이트입니다.


각 양식을 작성하고 이미지를 업로드하면 manifest.json 및 여러 크기로 변환된 아이콘에 대한 이미지를 다운로드할 수 있습니다.

각 양식에 대해서는 App Manifest | MDN 를 참고에 입력해 주세요.
ICON 버튼을 클릭하여 아이콘용 이미지를 업로드하면 다음 크기의 이미지로 변환합니다.

72x72

96x96

128x128

144x144

152x152

192x192

384x384

512x512

마지막으로 GENERATE ZIP 버튼을 클릭하면 app-images.zip라는 zip 파일이 만들어집니다.
압축을 풀면 manifest.json와 각 크기의 이미지가 들어 있습니다.

app-images
├── images
│   └── icons
│       ├── icon-128x128.png
│       ├── icon-144x144.png
│       ├── icon-152x152.png
│       ├── icon-192x192.png
│       ├── icon-384x384.png
│       ├── icon-512x512.png
│       ├── icon-72x72.png
│       └── icon-96x96.png
└── manifest.json

예

필자의 GitHub Pages용 manifest.json를 작성하는 예를 소개합니다.


다음과 같은 manifest.json 를 할 수 있습니다.

manifest.json

{
  "name": "shisama",
  "short_name": "shisama",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "https://shisama.github.io",
  "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
}

이것을 수동으로 하면 꽤 힘들지만, App Manifest Generator 로 만들면 매우 간단하게 작성할 수 있습니다.

다운로드한 manifest.json 와 이미지는 그대로 PWA 대응하고 싶은 프로젝트 바로 아래에 놓아 사용할 수 있습니다.

App Manifest Generator 그냥 Web App Manifest의 모든 속성을 설정할 수는 없지만 최소한 필요한 속성을 제공할 수 있습니다.

요약

manifest.json 만들 때는 먼저 App Manifest Generator

끝까지 읽어 주셔서 감사합니다.
미비나 질문이 있으면, 코멘트란 또는 Twitter( @ 시마 _ )로부터 부탁드립니다.