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は(ほぼ)全画面使えますが。

経緯

これまで読んだ本や積んでる本の値段の合計がわかるサービス「積読ハウマッチ」が最近リリースされたのですが、

#積読ハウマッチ ...ホームに追加できるんです(*´ω｀*)アイコンも用意したんです(*´ω｀*)ステータスバーの色も変わるんです(*´ω｀*) pic.twitter.com/EKn8tv45q2

— めもらば@公式 (@MemoryLoverz) July 28, 2019

PWA対応してるよ!という売りだったのでふとフロントがCRAのうちのサービスどうだったっけ...と思って確認。
manifest.json初期状態のままだったので「React App」....ダサい。

App Manifest Generatorを使ってみる

• PWAのmanifest.jsonとiconsの各サイズのアイコン画像を自動生成してくれるApp Manifest Generatorの紹介

項目で設定を選んでアイコンに使う画像ファイルをアップロードするだけ。

項目の解説はこちらが参考になります。
- manifest.jsonでホーム画面へのアプリ追加【これからはじめるPWA】

manifest.json

{
  "short_name": "JCBL-SCORE",
  "name": "日本カラーボール野球連盟スコア管理システム「JCBL-SCORE」",
  "theme_color": "darkcyan",
  "background_color": "#ffffff",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    .....
    {
      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

対応した結果

日本カラーボール野球連盟スコア閲覧サービス「JCBL-SCORE」、androidの「ホームに追加」に対応しました。#pwa#reactjs pic.twitter.com/uMYmaCZ8CI

— 日本カラーボール野球連盟公式 (@JCBL_Official) July 29, 2019