見出し画像

PWANightに参加してきました！その1-オフライン対応とServiceworker

はらだ

こんにちは。
昨日PWANightというPWAを学ぶ勉強会&懇親会に行ってきました。
初めての勉強会だったのですが、なかなか楽しめました。
で、僕もPWA使っているので意外と話せること多いなと思い、次回以降LTで登壇しようかなと思いました(次回のLT枠が次の日の朝には埋まっていて驚きました。人気！)。
その時に話す内容は今日の内容と結構かぶったりするかもー。

PWAについて簡単に

PWAとは、プログレッシブウェブアプリの略で、Webページを「ホームに追加」するだけでネイティブアプリっぽく表示する技術(?)です。
URLバーがなくなるようなデザイン面だけでなく、Androidだと、プッシュ通知とかも出来て、インストールしたアプリのように使えます。
そういったPWAの機能の中でも特筆すべきが、Serviceworkerです。
Serviceworker自体は、Webページとは別にブラウザのバックグラウンドで動くJavascriptのプログラムなのですが、こいつにキャッシュを任せることで色々上手くいくんです。
詳細は後程。

なぜPWANightに参加したのか

僕がPWANightに行った理由は単純です。
僕もPWAを使っているからです。
より良い使い方を学びに行きました。
すぐに使えるものがあったかと言われれば微妙なところですが、ちゃんと調べて自分のものにすれば使えるかな～というものはありました。
ただ、僕のサービスClubCloudはユーザー投稿型の動的なコンテンツなので、キャッシュがあまり有効ではなく、動画も扱うので、ネイティブアプリ化しようかなと考えているところです。
まぁでもネイティブアプリ化には時間がかかるので、PWAでとりあえず現行通り使ってもらう上でPWA戦略を練るのも大事だと思います。

PWANightのお話は明日以降するにして、Serviceworkerとオフライン対応についてで今日は終わります。

Serviceworkerとオフライン対応

先ほども出てきたServiceworkerから始めます。
Serviceworkerはリクエストとレスポンスの仲介役です。

(出典 : https://blog.sessionstack.com/how-javascript-works-service-workers-their-life-cycle-and-use-cases-52b19ad98b58)

例えば、次のようなことが出来ます。

1. ブラウザがリクエストを投げる。
2. そのリクエストは前にサーバーに飛ばしたことがあり、実はそのレスポンスはキャッシュに入っている。
3. Serviceworkerがリクエストをサーバーに飛ばさずに、対応するレスポンスをキャッシュからとってきて(fetch)、ブラウザに渡す。


すごい！！

キャッシュにあるときはサーバーに投げたふりしてキャッシュからレスポンスを持ってこられる！

で、何をキャッシュするかも、開発者が指定できます。
特に初回アクセス時のServiceworkerインストール時にもこのファイルをキャッシュするって書いておけば、ユーザーがリクエストを飛ばしてないページもキャッシュしておけます！

さてもうお気づきかと思いますが、これを利用すればオフライン対応も出来ます。
オフライン対応は2パターンあります。

1. 前見たページのオフライン表示
前見たページは、そのページを前見たときにキャッシュしておいて、それをオフライン時のレスポンスとして使えばOK。
サービスによっては、以前の情報だから変わってるかも！ってユーザーに伝える必要があるかもですね。

2.初めて見るページのオフライン表示
初めてのページはキャッシュがないので、表示できないですね。
でも、オフライン用のページを用意しておけば、変な恐竜が出ることもありません。
明らかにデフォルトのエラーページが出るのと、そのサービスのオフラインページが出るのとではユーザビリティは全く違うと思います。
オフラインページには他のページと同様タブなどを用意しておいてスムーズに他のページに移れるようにしたうえで、
・現在オフラインであること
・前見たページなら表示できること
を表示すればいいのではないでしょうか。

ClubCloudでは、以下のようなオフラインページを表示していました。
過去形なのは、とあるバグで今Serviceworkerを使えてないからです(明日以降お話します)。

動画比較ページはオフラインでも使えるように初回Serviceworkerインストール時にキャッシュしてあるので、そこへの動線も張っています。

これが出るときとのユーザビリティの違いたるや！
そもそも接続エラーが出るまでに時間がありますしね。
待たされた挙句このエラー画面か、すっとオフラインページに行くのか。
この違いは大きいですね。

ただ、オフラインかどうか調べるnavigator.onLineはたまに嘘つくらしいので、気を付けてください。
嘘つかれてサーバーに問い合わせた結果オフラインだとわかってオフラインページを表示する場合は時間かかりそうですね。

ということで、PWAはオフライン対応できる！というか、Serviceworker使うとキャッシュいじれまくれるからオフライン対応できる！ってことなんですね。
まぁPWAという技術の総称を構成している要素のひとつとしてServiceworkerがあるので、間違ってもいないんですけどね。


すこし知識があいまいなところもあるので、間違っていれば訂正してくださるとありがたいです！

ここらへんのキャッシュの扱いについても苦労した(している)ので、PWANightに登壇する機会があったらお話しできるかなと思います。

ではまた！


今日もお読みくださりありがとうございます。
ほぼ毎日、アプリ開発や事業に関する日記を書いておりますので是非またお読みになってください！

この記事が気に入ったらサポートをしてみませんか？