こんにちは株式会社FIXERの神田です。顔認証スマホアプリを作成するために、PWAを利用する予定が、Power Appsを利用する方向に変わってしまい居たたまれない気持ちになったのでここで供養します。この記事ではPWAを実装することだけを目的としているので、スマホアプリ独自の機能は各々追加していってください。

PWAとは

PWAとはWebアプリをネイティブなスマホアプリのように動作させる仕組みのことです。このPWAを実装することでスマホアプリのようにホーム画面にアイコンを追加したり、プッシュ通知を送るといった機能をWebアプリに持たせることができます。この記事ではReactを簡単に始めることができるCLIツール「create-react-app」で作成したデフォルトのWebアプリにPWAを実装し、最低限のスマホアプリを作成します。

用意するもの

• create-react-app : Reactを簡単に始められるCLIツール
• ngrok : ローカルのWebサーバーを外部に公開することができるサービス
• Lighthouse : Google Chromeの拡張機能、PWAの判定を行うのであると便利
• 192x192のpng画像 : スマホのアイコン用画像
• 512x512のpng画像 : PCのアイコン用画像

PWA実装手順

1. create-react-appを実行しアプリを作成
2. ServiceWorker.jsを削除し、index.jsからServiceWorker.jsを読み込んでいる部分を削除する
3. publicフォルダ内に用意したアイコン用画像を格納
4. manifest.jsonにアイコン用画像についての記述を追加
5. publicフォルダ内に新しくServiceWorker.jsとcache-polyfill.jsを作成
6. manifest.jsonを読み込む処理とPWA Compatを有効にする処理を追加
7. npm startで起動しlocalhost:3000で立ち上がることを確認
8. ngrok http 3000でngrokを起動しhttps://~のURLを開く
9. Lighthouseを起動し、PWA判定を確認する
10. 判定がついていればPWAの実装完了

ここまで出来たらスマホからngrokで取得したURLを開き、ホーム画面に追加する。追加したアイコンが用意した画像になっていることを確認し、アイコンをタップし開く。機内モードなどでネットワークを切断した状態でも起動することができればPWAは実装完了です。

最後に

今回はPWAをただ実装するだけなので機能やデプロイについては一切考慮していないです。私は以前Github PagesにデプロイしましたがServiceWorker.jsとmanifest.jsonの書き換えが必要でした。そちらも今後記事していけたらなと思っています。