本記事はReactの公式チュートリアルアプリ(完成版)をローカル環境に構築してからGitHub Pagesに公開し、さらにPWA(Progressive Web Apps)化する手順を紹介します。
先行作業として別記事に書いたGitHub PagesにReactの初期ページを公開するところまで完了してください。
関連記事
本記事はcreate-react-appを使って作成したReactの初期段階のページをGitHub Pagesを使ってインターネットに公開(デプロイ)する方法を紹介します。 GitHub Pagesは静的ページをGitHubのリポジト[…]
公式チュートリアル(完成版)のコードをローカル環境にコピーする
- ローカル環境のReactプロジェクトにあるsrc/index.cssをこちらのコードに置き換えてください。
- src/index.jsをこちらのコードに置き換えてください。
- src/index.jsの先頭に下記コードを追加してください。
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import * as serviceWorker from ‘./serviceWorker’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import * as serviceWorker from ‘./serviceWorker’;
serviceWorker.register();
最終行の「serviceWorker.register();」がPWA化するために必要なサービスワーカーの登録処理になります。
GitHubにデプロイしてPWA化を確認する
次のコマンドでGitHubにデプロイします。
$ npm run deploy
「https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/」でチュートリアルアプリにアクセスしてLighthouseを実行します。
すると下図赤枠のとおりPWA判定されているのを確認できます。
続いてタブレット端末(Android)で確認してみます。
タブレット端末のChromeでチュートリアルアプリにアクセスすると下のほうにホーム画面に追加するかが表示されます。
初回アクセスではこれが出てこないので、一旦ページを閉じて5分以上あけてから再度アクセスしてください。
ホーム画面に追加するとモバイルアプリのようにチュートリアルアプリのアイコンが表示されます。
アイコンをタップしてチュートリアルアプリを起動するとモバイルアプリのような見た目で操作できます。
