完全に参考にしてます

react-create-appでプロジェクトを作る

まずはプロジェクトを作る

npx create-react-app test
cd test
npm start

create-react-appを利用するだけで実はPWA対応ができている。。。

オフライン対応

src/index.jsをちょいと修正する

serviceWorker.unregister();
// ↓
serviceWorker.register();

アイコンの設定

してもしなくてもいいが、アプリっぽくするために試しにやってみる。

ここの紹介されているサイトを利用して、一気にアイコンを作る。
参考：https://qiita.com/shisama/items/d4d0b24980beaea57231

そして、出来上がったmanifest.jsonのiconsの部分を書き換える。

がしかし、iosのsafariではうまく表示されないため、
google様が提供し始めたこれを使うと、うまいこと大体のブラウザのフォーム画面追加で、
アイコンが表示される。
参考：https://github.com/GoogleChromeLabs/pwacompat

<link rel="manifest" href="manifest.json" />
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.9/pwacompat.min.js"
    integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc"
    crossorigin="anonymous"></script>

スプラッシュ

気分が乗ってきたのでスプラッシュもやってみる。
と思ったが、google様のスクリプトのおかげで、うまいことlinkを差し込まずともよしなに対応してくれていた！
神や。。。

manifest.json

結果こんな感じでいけてます。

{
  "nape": "hellow! ribery!",
  "short_name": "!!ribery!!",
  "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"
    }
  ],
  "display": "standalone",
  "theme_color": "#4682b4",
  "background_color": "#ffffff"
}

まとめ

今後、webアプリを作るにあたって、アプリの工数を削減できる手段の一つになるかもしれない！