PWA: как превратить сайт в устанавливаемое приложение

PWA — это сайт, который ведёт себя как приложение: его можно «установить» на главный экран телефона, он открывается офлайн и не просит скачивать ничего из магазина. Настраивается из двух файлов.

manifest.json — чтобы сайт ставился

{
  "name": "Океан 2048",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#38b6ff",
  "icons": [
    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

service worker — чтобы работало офлайн

Service worker кэширует страницы и статику, и сайт открывается даже без интернета. Минимальный SW помещается в 15 строк: слушаем install, activate и fetch.

Итог

Добавили manifest и SW — получили «приложение» без магазина приложений и без одобрения Apple. Так сделана игра Океан 2048: она устанавливается на телефон и играет офлайн.