はじめに
React Native + Expo で開発したWebアプリを PWA に対応させます。
プロジェクトのセットアップ方法には触れません。
開発環境
- Expo SDK version 53.0.0
手順
① app.jsonを編集する
app.jsonのweb.outputの項目をSPA(single)に変更します。
デフォルトで設定されているはずですが、staticになっている場合があります。
app.json
{
"expo": {
"web": {
"output": "single",
"bundler": "metro"
}
}
}
② index.htmlを編集する
以下のコマンドを実行し、PWAマニフェストをリンクするhtmlを生成します。
npx expo customize public/index.html
生成された index.html の <head> タグに、以下の内容を記述します。
<link rel="manifest" href="/manifest.json" />
③ マニフェストファイルを作成する
②の手順で作られた public フォルダに、 manifest.json ファイルを作成し、以下の内容を記述します。
manifest.json
{
"short_name": "Expo App",
"name": "Expo Router Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
short_nameなどのスキーマは、自身の作成しているアプリに合わせて調整しましょう。
④ ロゴ画像を追加
public フォルダに logo192.png と logo512.png を追加します。これは、デバイスにインストールされたときに使用されるアイコンとなります。
⑤ 動作確認
npx expo export で一度出力し、 serve コマンドで動作確認しましょう。
npx expo export -p web
npx expo serve
PCの場合、アドレスバーにインストールアイコンが表示されていれば成功です。
おわりに
Expo SDKバージョンが 50 になったタイミングで方法が変わったようで、ネット上に様々な方法が散見されたので、最新の方法を簡単にまとめました。
今回は SPA(single) での方法なので、server・staticの方法は公式ドキュメントを確認してください。