PWAのインストールを試したいけどHTTPSが大変、どうにか簡単にできないものかと探して、今日見つけたのはこのパターン。

今回使う材料

空っぽのAppを作成

このコマンド打って、空っぽのAppを作成します。

npx create-react-app my-app

manifestをジェネレータで

サイト「manifest generator」に、512×512より大きなアイコン画像をアップロードすると、マニフェストと数種類のpngが入ったimagesフォルダの入ったzipがダウンロードできます。このmanifest、imagesフォルダをこんな感じで空Appのpublicフォルダに配置します。

PWAをインストールするには、このままだと「display property must be set to ‘standalone’ or ‘fullscreen’」と「No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest」なので、

manifestの「display」にstandalone と 「start_url」にはS3のBucketNameを環境に合わせて変えておきます。

{
  "name": "mypwatest",
  "short_name": "mypwatest",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/mizu-pwa-test/",
  "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
}

ビルド

ビルドします。今回は、S3にのせて、httpsでアクセスさせるので、package.jsonの中にこんな感じで、homepageという項目を追加します。※URLにbucket名が付くのでそれを。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "homepage": "https://s3.amazonaws.com/mizu-pwa-test/"
}

そしたら、このコマンドでビルド。

npm run build

S3を用意してアップロード

コンソールから作ってもいいけど、今回はaws cliでパパッと。

作成

BUCKET_NAME=mizu-pwa-test
aws s3 mb s3://${BUCKET_NAME}

ポリシーをpublicで

$ PUBLIC_POLICY=public.json
$ cat << EOF > ${PUBLIC_POLICY}
{
    "Version": "2012-10-17",
    "Id": "PublicRead",
    "Statement": [
        {
            "Sid": "ReadAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::${BUCKET_NAME}/*"
        }
    ]
}
EOF
aws s3api put-bucket-policy --bucket ${BUCKET_NAME} --policy file://${PUBLIC_POLICY}

buildしたリソースをs3にupload

aws s3 sync ./build s3://${BUCKET_NAME}/

動作確認

このアドレスに、Chromeでアクセス。 ※ 自分のURLはAWSのS3管理コンソールで確認できます。

https://s3.amazonaws.com/${BUCKET_NAME}/index.html

そうすると、こんな感じで、インスールしますか?みたいなボタンが出ます。

Addボタンを押すと、アプリが追加されます。