PWAって意外と簡単にできる？
何を持ってpwaなのか少し曖昧ですが、serviceworkerを動かしてホーム画面に追加して起動がネイティブっぽくなるのは本当に簡単にできました。
参考記事
https://qiita.com/narikei/items/4240f03542f29e313989
https://qiita.com/hirotakasasaki/items/e3fb638b4f75a92bce8b
PWAにした目的
運営しているサービスがユーザーさんの利用頻度がそこそこ高いサービスで、WEBサービスなのですが、たまにユーザーさんから「どうやったらインストールできるの？」や「導線がメールなので不便」のような声をたまに頂いておりました。
なので「Androidだけでも良いからブラウザで開いた時に【ホーム画面に追加する】の表示を出したいね。」と言う事になり、実装する事になりました。
ネイティブ的な動きをしたいからという目的ではありません。笑
ハマった事
個人的には２つハマりポイントがありました。
nginx周り
一つ目はnginx周りでハマりました。
ローカルでは問題なく動いていたのにstagingにあげると
Failed to register a ServiceWorker: A bad HTTP response code (404)...
みたいなエラーが出てきました。
どうやら/serviceworker.jsにアクセスするとnginxが404を返してる模様。
ローカルでアクセスすると問題なく表示されるんだけどね。。
cloudfrontを利用している影響でしょうか？
色々調べましたが、まだ原因はわかってません。。
nginx.confに下記を追記してあげると読み込んでくれるようになったのでとりあえあず良しとしました（良くない）
location = /serviceworker.js {
proxy_pass http://localhost:3000/serviceworker.js;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-CSRF-Token $http_x_csrf_token;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto
$http_cloudfront_forwarded_proto;
proxy_redirect off;
}
iOSだと戻るボタンが無くなる問題に関して
次にiOSだと戻るボタンが無くなる問題に関してです。
アプリケーションを起動した時の画面の表示を設定できるオプションがありまして
- fullscreen(全画面表示)
- standalone（ステータスバーのみが表示されるネイティブアプリと同じような画面表示）
- browser(ブラウザと同じ表示)
上２つだとネイティブっぽくなるのですが、iosだとブラウザの戻るボタンが無くなるんですよね。
「iOSでホーム画面に追加している人がいたら致命的に使いにくいよな」と思い調べてみると、standaloneかfullscreenモードにして戻るボタンをつけましょうとのこと。
いや、pwaで起動されたかをチェックして全画面に戻るボタンつけるのって結構面倒じゃないですか？？
仕方ないのでbrowserモードにしてみたところ、iOSの方では戻るボタンが復活したのですが、なんとAndroidで【ホーム画面に追加する】という表示が消えるではありませんか！！！
ブラウザモードだったらホーム画面に追加しなくても良いよね？とchromeが判断しているのでしょうか。。あちらを立てればこちらが立たず。どうしようかな〜と思っていたら。
minimal-uiというオプションがもう一つある事を発見。（今更）
動きはbrowserの挙動と近いですが、iosでは戻るボタンも表示されるし、Androidでは【ホーム画面に追加する】という表示も出てきて当初の目的を達成できました。
めでたしめでたしです。
PWAを触ってみた感想
ほんの触りの部分だけしか触ってませんが、他にもpush通知（Androidのみ）などの機能もあり可能性を感じました。
まだサービスの検証が終わってないスタートアップ系の企業はガンガン改善してリリースしての繰り返しになるので、プラットフォームの審査などがあるネイティブアプリよりWEBの方が相性が良いと思ってます。
WEBの表現がリッチになっていくのは嬉しい限りです。