今すぐReactでPWAを試したくなったら

2233 ワード
React PWA React テキストリンク

試しにpwa-sampleというアプリを作成します(Reactで)。

npx create-react-app pwa-sample --typescript
cd pwa-sample

src/index.tsxを開き、コメントにある通り、記述を書き換えます。

src/index.tsx
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
- serviceWorker.unregister();
+ serviceWorker.register();

https://create-react-app.dev/docs/making-a-progressive-web-app/
production環境でないと動かないらしいので、ビルドします。

npm run build

buildの中身を、ローカルサーバで動かします。

例：Python3があるなら　
cd ./build
python3 -m http.server
例：npmのserveがあるなら
serve -s ./build

httpsで公開します。ngrokを使うと楽です。

ngrok http <localで動いているポート番号>

生成されたhttpsのURLにアクセスすると、PWA対応になっているはず

コード的にはserviceWorker.register();に書き換えるだけで完了しましたね。
ただ、httpsで公開しないといけないので、ちょっとだけ試すというのはちょっとだけ面倒です。