PWANightの第六回に参加したときのレポートです。
前回(その1)は、この勉強会というより、PWAについて書きました。
Serviceworkerの概要と共に、UX向上に大きく寄与する2パターンのオフライン対応を書いたので、おススメです。
今回は勉強会の概要をざっくりお話します。

どんな感じの会か

80人くらいの規模です。
時間は19:30~22:00(うち懇親会が最後1時間)。
場所は銀座シックスの10階でした。

会場はこんな感じ。
芝生。

僕のパソコンは充電しながらでないと使えない仕様なので、充電させてもらいました。

初見殺し。
芝生の一部が開いて充電できるとか絶対わかんないわ。
すぐにスタッフの人に聞いてよかった。

ちなみに充電するために、椅子を最後尾からさらに後ろに移動して座ってたんですが、服がスタッフの方と同じオレンジだったこともあってトイレの場所聞かれました(後から間違われたと気づきました)。

内容

20分登壇×3人と、LT×3人でした。
20分の方々のPWAのプロダクトはそれぞれ、

収益物件.com (不動産投資アプリ)
Hackaru (OSSの時間計測アプリ)
Scrapbox (wikiのようなノートアプリ)

です。
最初のお二方はNuxt.js、ScrapboxはReactだそうです。
以下、てきとうに出てきたお話をかいつまんで列挙します。

・NuxtなどフロントのフレームワークはPWAをサポートしているので、PWA化も楽
らしいです。
ただ、僕はスクラッチでも特に面倒はない印象を持っています。
必要なのもmanifest.jsとserviceworker.jsくらいなので。
とはいえ、使ってみないともっといい感じの最適化してくれる部分とかあるかもなので分かりませんね。
僕もdjango-progressive-web-appてのをDjangoでは使ってます。
こちらの記事(Convert Django Website to a Progressive Web App)を参考にしました。

・開発が楽
ネイティブ開発しなくて済むので楽です。
レスポンシブ対応するだけでネイティブアプリっぽくなるという。
JSを使えば、
・スワイプメニュー
・スワイプでページ送り(リストで横にスワイプして削除マークを出したりするやつ)
・ドラッグドロップ
などのネイティブっぽいUIも実現可能。
まぁここはPWAというかWebアプリのスマホ対応って感じですね。
まぁその総称がPWAなんですけども。

・Cookie共有されない問題(しかもたまに破棄)
iOSはアンドロイドと違って、プッシュ通知を筆頭にサポートがまだまだ追いついていません。
(まぁPWAが対応しすぎると、app storeからの課金手数料徴収が減るとかいろいろあると思いますがサポート頑張って欲しいです…)

Hackaruの方がおっしゃっていたのは、CookieがブラウザとPWAで共有されないという問題。
これに関しては、LocalStorageにリフレッシュトークンを入れておくことでログイン状態を保持して解決…らしい。
アクセストークンは5-10分に期限を設定するとか。
すみません、WebUIの立ち位置がハッキリと分かっていないのでそこまで理解していません。
LocalStorageはブラウザ、PWAで共有だから、LocalStorageにリフレッシュトークンを入れておいておき、そのトークン(実際にはアクセストークンにして)で自動ログインさせることで実質ログイン状態を共有、保持しているということでしょうか。

ただ、ブラウザとPWAでCookie(ログイン状態)が共有されないということはデメリットばかりではありません。
インストールしたPWAごとにログインアカウントを変えられるので、アカウントの使い分けが楽です。
特に開発中のテストなんかで有用です。

・iOS、PWAへの動線甘い問題
アンドロイドだと、add to home screen(A2HS)といって、ホームに追加でPWA化できるよ！っていう通知を表示することが出来るのですが、iOSでは無理です。
自前で準備するしかありません。
僕も自前で動線を強化しました。( ⇒ PWAインストールへの動線を強化 )

・戻るボタンも自前で！
PWA化すると、ブラウザにはあった「戻る」「進む」ボタンがありません。
エッジスワイプができるバージョンなら大丈夫ですが、そうでないバージョン、もしくはエッジスワイプを知らないとユーザビリティを損ねます。
(※エッジスワイプ : 画面の左もしくは右端からスワイプを始めると「戻る」「進む」とほぼ似た画面遷移が出来る)

Hackaruの方は、戻るボタンが不要な設計にしてみるのもいいかもとおっしゃっていました。
もともとHackaruをPWAでアプリ化しようとしたのも、時間計測という割と単純な機能だからだそうで、戻るボタンも含め、設計が複雑なものはまだPWAに向かなそうですね。

ちなみに僕のサービスでも戻るボタン実装していますが、スワイプでも戻れる/進めるようにしています。
JSでタッチイベントからスワイプの距離と角度、速度を算出して、スワイプ判定をしてhistory.back/forwardで画面遷移させています。
問題含めここら辺のお話もいつかできればと思います。

・Serviceworkerでのキャッシュ戦略
Scrapboxではキャッシュ戦略かなり練ってました。
オフラインでも見られるようにServiceworkerでページごとキャッシュしたり、キャッシュのもので仮画面を構成し、落ち着いたら最新情報をサーバーから持ってきたり。
あとは、リンクのマウスホバーでプリフェッチするなど。

キャッシュの名前に日付を入れて、最新のものが分かりやすくしたり、
cache.match()`のoptionsに{ignoreSearch: true}をセットするとsearch queryを無視して取得できたり
request.destination === image'で画像リクエストを判定したり、
const { quota, usage } = await navigator.storage.estimate()で現在のオリジンに割り当てられた容量と使用量の見積もりを取得したり、実践的なお話をたくさん聞けました。

まとめ

まぁだいたいこんな感じでレポートは終わりたいと思います。
今色々あってServiceworkerも最低限の使用にしてますし、もうちょっとPWAで頑張ろうかなとも思えました。
色んな人がいて懇親会も楽しかったです。
9月にはLTで登壇しようかと思っているので是非！

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