NextJSをPWA化しました

「草野球放送局」という草野球のライブ配信補助ツールを作ったのですが、ブラウザにカメラ映像を映してスコアボードと合成する手法だと、どうしても動画の表示部分が狭くなってしまう問題点がありました。

草野球放送局

• 草野球のライブ配信を補助するツールを作った話

ReactJSをPWA化する方法

• PWA対応

NextJSをPWA化するには

next-pwa

• next-pwa

詳しくはREADMEを読んでいただければと思うのですが、

1. next.config.jsを書き換える
2. serviceWorker.jsを設置する(SW.jsにリネーム)

NextJSをcreate-next-appで作るとserviceWorker.jsがないのでCRAから拝借しました。

PWAでカメラを使うには

あれ、iOSでカメラ起動しないな...と思ってたのですが、iOS13以前ではPWAの表示モードが"browser"でしかカメラを起動できません。

PWAでカメラを使うためiOSとAndroidで異なるmanifestを読み込む

なので、react-device-detectを使ってmanifest.jsonへのリンクをユーザエージェント別に書き換えます。

import * as rdd from 'react-device-detect';
...中略

{rdd.isAndroid && rdd.isChrome 
        ? <link rel="manifest" href="/manifest.json" />
        :''
      }
 {rdd.isIOS && rdd.isSafari 
      ? <link rel="manifest" href="/manifest.ios.json" />
      :''
   }

オチ

iOSは"browser"モードだから表示領域増えないじゃん！！！
androidは(ほぼ)全画面使えますが。