福岡PWA勉強会に参加してきました

  • Web

3月29日に開催された福岡PWA勉強会#01に参加してきました。

PWAはWebサイト、ネイティブアプリに次ぐ新たなWebの1形態で、この私のサイトもそれなりに対応しているわけですが、そろそろ本格的に来そうな雰囲気です。

PWAの概要と活用の仕方について(渋田達也さん)

PWAの概要と活用の仕方について
最初の登壇者はウミーベ株式会社の渋田達也(@mya-ake)さん。
PWAの概要から、Twitter Liteの事例をもとに、いくつかのケースからどういった活用ができるか、というお話でした。
ネイティブアプリに比べて軽量化、という点は本当に圧倒的ですね。ここまで顕著に差が出るのはただただすごいなと。
これから新規に立ち上げるサービスで実験の場として利用する、というのは面白いなと思いました。あまりそういう視点で考えていなかったので、今度何かをすることがあればこういう考え方でPWAを推めるのもアリですね。
恥ずかしながらLighthouseというツールは知りませんでした。
このサイトの点数は82点(ツイートでは84点と書いたのですが、あらためて見てみたら82点でした)。具体的に何を修正すべきなのかがはっきりするので、とてもいいツールですね。
Lighthouse(Google ウェブストア)

ただしく学ぼうPWA(中川雄貴さん)

ただしく学ぼうPWA
2人目はピクシブ株式会社の中川雄貴(@_ikasoumen)さん。
タイトルの通りPWAについてきちんと知ろうという話と、PWAの作り方に関する話でした。
このサイトでPWA化を対応していたので、話を聞きながらそうだよね、と一人で頷いていました。
ただ、なんとなくで対応してしまった部分がほとんどなので、ServiceWorkerのイベントや実際にサービス案件として対応した場合にどういった問題があるのかなどはとても勉強になりました。

Add to homescreenのちょっと深い話(神野真彦さん)

Add to homescreenのちょっと深い話
3人目はヤフー株式会社の神野真彦(@MiracleTShirt09)さん。MDD(筋肉駆動開発)の提唱者兼実践者とのことなので、私はRDD(ランニング駆動開発)でも提唱しましょうかね(笑)
Add to homescreen(A2HS)、いわゆるWebアプリのホーム画面追加の話でした。
httpsでmanifest.jsonとServiceWorkerのfetchがあれば動くということは知っていたのですが、そこから踏み込んだいろんな話を聞けました。
特にApp Install Banners(訴求バナー)の表示条件や、表示される際に発火するbannerinstallpromptイベントについては全く知らなかったのでとてもためになりました。
instagramのように先にモーダルなどで説明を出したりできるそうなので、是非使っていきたいところです。

Web Pushを(ちょっと)詳しく説明する(穴井宏幸さん)

Web Pushを(ちょっと)詳しく説明する
4人目はヤフー株式会社の穴井宏幸(@pirosikick)さん。
Web Push(プッシュ通知)の、詳しい解説でした。
私はWeb Pushは以前テストで作ったのですが、サーバー認証あたりで力尽きて、ローカルでとりあえず通知が来るところまで作ってやめてしまった経緯があったので、改めて勉強できるいい機会でした。
しかしながら、暗号化や秘密鍵などの概念が入ってくることもあって、他のものに比べて少し実装が難しいな、という印象をやはり受けました。
ここは努力が必要そうです。

LT:PWAで「出来ない」こと(森内建太さん)

PWAで「出来ない」こと
LTはピクシブ株式会社アルバイトの森内建太(@petamoriken)さん。
これまでできることとその解説だったのに対し、逆にできないことを説明してくださいました。
PWAはネイティブアプリの代替ではない、というのはまさにその通りだな、と思いました。
ストアにアプリを載せられない、というのはWindowsの次期大型アップデートでストアに載せられるかも?という話と同様に、App StoreもGoogle Playも将来的にはきちんと載せられるようになるのでは?と淡い期待を抱いています。

雑感

みなさん本当にわかりやすくPWAの導入にはちょうどいいお話をして下さったな、と思いました。
ただ、ブラウザの対応がまちまちだったり、PWAでは辛い部分ももちろんあるという話があったりと、本格導入するにはいろいろと課題があるなと思いました。
とはいえ、このサイトをPWA化した時も思ったこととして、実はそんなに難しくない、むしろ手軽にできるのがPWAでもあるとも思います。
複雑なものを作るならいろいろと考慮する点はあると思いますが、まずはできることから取り入れてみる、というのでもいいのではないでしょうか。
一点注意しておきたいなと思ったことは、PWAはネイティブアプリの代替ではないという話。
この認識はちゃんと周りにも説明していかないと、将来マーケターやプランナーから誤った認識のまま話が降りてきて辛い思いをすることが出てきそうだなと。
その上で、ユーザーにとって本当に必要なものは何か、メリットは何かを考えて選択することを忘れないようにしたいですね。そして全く見当がつかないものであれば実験としてPWAを選択してみるのが良いのではないでしょうか。
ちなみにこのWebサイトがWeb Pushに対応していない理由は、個人のサイトで更新はほぼランニングのデータだけだから、わざわざ通知するまでのものではないし、自分がユーザーの立場でアクセスした時に、別に有名人でも何かの権威者でもない人の個人サイトで通知の許可を求められてもなんだかなあと思うと思うからです。
今回の勉強会で私が特に完全に知らなくて急いで調べた方がいいな、と思ったのがWorkboxです。
何人かの方が話に挙げられていたのですが、よくわからなかったのでちゃんと調べたいなと。ざっと見る限り、使えるようになればかなりいいのかも?ということだけ分かりました(笑)
PWA時代に入るので、しっかり調べておきたいですね。
Workbox

そして夜が明けたらPWA時代が幕開けした

この勉強会の翌日というか夜が明けたらiOSのアップデートが入り、ついにiPhoneでもServiceWorkerが正式に対応となりました。
Web Pushは未実装ですが、それ以外の主要な機能は使えます。
これでスマートフォンは完全にPWA時代に入ったと言えるでしょう。
この機会にしっかり勉強しましょう!