Expoで制作したReactNativeアプリをPWA対応Webビルドする必要最小限の手順

Expo-ReactNative を PWAサイトにする

この記事は、Expoの準備から、WEBサイトをビルドして、SPAにすることと、PWA対応にすることの最低限の作業を記載しています。
細かいことは別記事がたっぷりあるのでお任せ。

あくまで必要最小限を知ることを目的にしています。

Expo作成開始

expo init AppNameWoIretene

カレントにフォルダができる

頑張って作る

割愛

ローカルデバッグする

npm start

Metro Blender が起動して、Androidエミュレータ起動したり、ブラウザ起動させたりできる
しかも修正がリアルタイムにエミュレータに反映されて、開発しやすいのなんのって・・・・

WEBビルドする

作成したソースコードをそのままサーバにアップロードするわけではなく、ちゃんとビルドするってのが、Javascriptっぽっくないなぁと思う。
経験にもよるだろうけど。

expo build:web

カレントに出来上がる web-build ディレクトリ以下をサーバにアップロードすれば、SPAサイトの出来上がり。
でもこれだけだと、PWAに対応はしていても、実際にはインストールができない

PWA 対応する

手順はこちら
https://github.com/expo/fyi/blob/master/enabling-web-service-workers.md

開始コマンド

expo customize:web
# 色々選択肢が出るけど以下を選択(スペース押下)してエンター
(*) webpack.config.js

npm install --save-dev @expo/webpack-config が実行される

少しすると、カレントディレクトリに webpack.config.js が作成される。

webpack.config.js を編集

デフォルトの記述をちょっと修正する

webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
///////////////////////////////これを削除
//  const config = await createExpoWebpackConfigAsync(env, argv);
///////////////////////////////以下に修正
// 上流から受け取った env に offline:true のキーバリューセットを追加している　要は offline 使うよ、って追加しているだけ
    const config = await createExpoWebpackConfigAsync(
        {
            ...env,
            offline: true,
        },
        argv
    );
///////////////////////////////ここまで
  // Customize the config before returning it.
  return config;
};

続けてもう一度ビルド

expo build:web

これだけで、PWAが有効になる。
カレントに出来上がる web-build ディレクトリ以下をサーバにアップロードすれば、PWAサイトの出来上がり。

細かいことは別記事にお任せします。