reactアプリをPWA、apk、electronを用いたデスクトップアプリにする方法

はじめに

reactでPWAを開発し、リリースするまでの手順を説明する。

以下のサイトを参考にした。
・Reactで学ぶPWA (Progressive Web App)
・Netlifyで静的サイトのホスティングをする

PWA化

create-react-appをした際にあるindex.jsを編集
serviceWorkerに登録する

index.js

- serviceWorker.unregister();
+ serviceWorker.register();

あとはgithubにレポジトリをつくってNetlifyで公開すればよい
「google lightHouse」でPWAになっているかを確認できる

apk化

pwa2apkというサービスを使う。
https://appmaker.xyz/pwa-to-apk/
あとは手順にそってapkを作成し、play consoleに公開すれば良い。

electron化

electronをinstall

とりあえず以下をインストール

npm install --save electron electron-packager electron-is-dev electron--prebuilt electron-log electron-builder concurrently wait-on

electron.jsを作成

react-electron-shellを使えばelectronを用いた雛形が簡単にできる

create-react-app [yourAppName]
cd [yourAppName]
npm install --save react-electron-shell
npm run dev

electron移行に必要な手順をまとめてやってくれる。
あとはsrcやpublicをコピペすれば良い

Mac用にpackage化

electron-packagerをインストール

npm install -d electron-packager

"electron-build": "electron-packager ./ todoApp --platform=darwin --arch=x64 --electronVersion=4.1.3 --icon=public/images/icon.icns"

todoAppは任意のアプリ名にする。--platformはmacなのでdarwinにする。--archは64bitであればx64。--electronVersionは今使っているelectronのバージョン。--iconはicnsファイルのパスを通す。

windowsにpackage化

上のようにやるとエラーが発生するので以下のサイトを参考にする
http://otiai10.hatenablog.com/entry/2017/10/26/174912