はじめに
Progressive Web Appsがすごいということなのでやってみました。
かつてはネイティブアプリを作る＝iPhone app ならxcodeとswiftで作る。AndroidならAndroid StudioとJAVAでそれぞれ別に作るという感じでした。
それがreactのexpo cliを使えばどちらのOSにも対応したアプリが簡単に作ることができるようになりました。少し凝ったものならreact native cliですかね。
そしてPWAという仕組みを利用することで、普通にwebブラウザで閲覧するアプリをネイティブアプリのようにすることができるようになりました。
簡単に書くと、PWA化されているサービスをブラウザで開き、端末メニューの「ホーム画面に追加」を押すと、通常のアプリをインストールしたときのようにアイコンがホーム画面に追加され、それをタップするとトップレベルで開く(ブラウザで開いたときのURL入力バーなどが表示されず、そのアプリ単体として立ち上がる)ことができるようになります。
Androidならプッシュ通知ができるし、キャッシュ利用によるオフラインでのアクセスができたりもする。
そしてストアでのダウンロードの手間が不要。
ゲームや高度なアプリについては今度もストア経由でインストールして使うという形は変わらないでしょうが、簡単なサービスなどならこっちの方が全然良い気がします。
アプリ＝ストアから探してインストールというのが定着している分まだ馴染みはないですけどね。
前置きが長くなりすぎましたが、次から実践した手順と詰まった点など書いていきます。
PWAについてはこの記事がわかりやすかったです。
https://digital-marketing.jp/seo/what-is-progressive-web-apps/
PWAに必要なもの
メインは以下の２つだけ。
manifest.jsonとservice-worker.jsの２つ。
そしてそれぞれのサイズのアイコン画像を用意して読み込むだけです。
今回create-react-appでフロント側を作ったのですが、create-react-appでは既に最初から上記ファイルを用意してくれるので、楽です。
SSL化(https)されていないと使えないというのが前提にあるので、この点は忘れないように。
アプリ公開まで
アプリの実装が済んだら、create-react-appでnpm run buildコマンドを実行し、build以下のファイル達をまるっとテストサーバーのサブディレクトリに配置しました。
問題１．画面が真っ白
これはPWAに関係ないのですが、jsの読み込みパスなどが正しいのにreactアプリが表示されない現象が発生。
ローカル環境では動くのになぜ、と思いいろいろ試しましたが、素の(create-react-appのサンプル)状態では無事に見えることから、使用したパッケージに原因があることがわかりました。
画面遷移をreact-routerでルーティングをしているのですが、普通にwebサーバーのサブディレクトリ配下に置いただけではSPAとして機能できないというのが原因。
考えてみれば当然でした…。
解決策としては、該当ディレクトリ配下はどのパスでアクセスしてもindex.htmlを返すようにwebサーバーを設定する。もしくはBrowserRouter でなくHashRouterを使うという方法。
今回はHashRouterを使用することで解決しました。
問題２．カメラアクセスできない
今回はネイティブっぽい機能を入れたほうがいいなと思い実装時にカメラを起動するアプリにしていました。
ブラウザ上での確認ができたあと、実際にiPhone端末上でホーム画面に追加してみました。
するとブラウザ上ではカメラアクセスの確認が表示され、承認するとカメラが起動するのに、ホーム画面からの起動ではそれが表示されないため使えませんでした。
ちなみにAndroidでは正常。
これはmanifest.jsonでdisplayをstandaloneにしているのが原因でした。
この設定は以下の影響がでます。
fullscreen：ChromeのUIを表示しない全画面standalone：ネイティブアプリ風になる
minimal-ui：最小限のUI部品のみ
browser：通常のブラウザータブ
iOSではブラウザで開かないとカメラアクセスができないとのこと。
結果的にはOSによって別にmanifest.jsonを読み込むことで解決しました。
OS別にmanifest.jsonを読み込むのは以下を参考にしました。
https://qiita.com/1pp0/items/a3f0ea14910e25f49878
まとめ
とりあえずザーっとやってみた結果ですが、普通のwebサイトのPWA化は簡単にできるので、メリットの有無は別として静的サイトやwordpress等のブログサイトなどはPWA対応してみてもいいかもしれません。
プッシュ通知やネイティブな機能については少し調べながらやっていく必要があるのは事実ですが、ネイティブアプリ開発よりは圧倒的に簡単です。
まずは作りたいサービスがPWAで実現できるかどうかを確認するのが最重要ですね。
ネイティブアプリ開発でやってて作り終わったあとでこれWEBで実現できたねってなれば学習コストがかかってしまったことになるし、逆に途中からこれWEBじゃダメだねってなるともっと大変。