好奇心の足跡

飽きっぽくすぐ他のことをしてしまうので、忘れないため・形にして頭に残すための備忘録。

PWA Night vol.3 ~PWAのミライや活用方法をみんなで考えよう~ 参加レポート

4/17(水)に開催された、PWAの勉強会に参加してきました!

pwanight.connpass.com

ハッシュタグ: #pwanight

そもそもPWAとは?

PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。

PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

上記サイトから引用させていただきました。個人的には、下記 PWA Night vol.1 のときの資料もかなりわかりやすかったです。

t.co

なんで参加したの?

私がPWAに興味を持ったきっかけは、普段はサーバーサイドのサービス開発・運用をしているのですが、そのサービスを宣伝するためのデモ用アプリを作ることになった時、対象プラットフォーム選定に出てきたことです。iOS or Android の Nativeアプリ開発しか選択肢に入れていませんでしたが、もう少し早くPWAに出会っていればPWAという選択肢はかなり魅力的だったかも。逆に技術選定する立場としてPWA知らなかったの痛かったなーとちょっと反省したのでした。

今回は、次に機会があれば最初から選択肢として考えられるように、かつちゃんと知識をつける&アップデートして正しい判断ができるように、という気持ちで参加。

最近参加しているイベントは、すでに片足(か両足)突っ込んでいる内容のものが多かったので、今回は久々に「何もわからん」メンバーとして行ってきました。

幸い、connpassのグループ

PWA Night - connpass

から、過去の資料や参加報告が一部見れるので予習?復習?していくことに。
最初に全員(参加者全員!90人くらい?)の自己紹介が一人10秒くらいであったんですけど、フロントエンド・Web開発の方が多かった印象。私みたいなサーバーサイドエンジニアやBizDev・Web企画の人も。
斜め前の人はMozillaの中の人で「普段はブラウザ開発してます」いうてはった。びっくり。PWAは個人の趣味らしい。

はじめてのPWA開発 ~あなたのWebサイトがPWAになるまで~ by 小椋陽太さん@アシアル

speakerdeck.com

Service Workerの挙動をわかりやすく図で説明していただきました。
Service Workerの更新タイミング = Cacheが壊れてしまうのを防ぐために、全てのタブを閉じてサービスが終了した時に更新が走るよ、など。
PWAのサンプルコードやドキュメントがGoogleのDeveloperブログで紹介されているとのことだったので、前回のLTでちょっとしたアプリを作ってみた紹介があったみたいだし、自分でちょこっとなにか作ってみるの面白そう。
資料の最後にGoogleのDocument/Blogへのリンクが貼ってあります。

Cache APIに触れる by @tiwu_officialさん

speakerdeck.com

Service Workerの話から始まり、実際にCacheを司っているのは Cache APIだよ、という話。
Cache API は Service Worker とは独立しているため、単独で使える。使いこなせるとかなり強力。
Cache APIの紹介と、それぞれのAPIをどういう場面でどう使用するか、みたいな話がメインでした。

RoRをVueJS + Nuxt PWAで置き換えてみた by 天野たけしさん@devMeTokyo

moksahero.github.io

発表者の天野さん、活動の幅が多様すぎて捕捉しきれない…。

「今日起きてからスマホで何やりましたか?」→「FB, Twitter, Googleもろもろ, Amazon」でしょ?
これらのサービスは世界最速・PWA対応済み。ユーザーは常にこれらのオリンピックレベルのサービスに触れている。それ以外は県大会レベルだぞ。少しでもオリンピックに近づくのがWeb開発者の使命!

と非常にパワフルな出だし。

下記の「PWA Status」というサイトで、PWA化に関する様々な数値を見ることができる。PWA化でどれくらいパフォーマンスが上がったか・コンバージョン率・売上が上がったか、など。PWA化によって劇的にパフォーマンス・売上がUpした事例がいくつも載っている。

www.pwastats.com

Ruby on Rails から VueJS + Nuxt PWA に置き換えた話がここから始まり、全体構成の変更や各レイヤーの置き換えなどわかりやすく簡潔に紹介。
また、UXはスマホファースト、というのも納得。70~80%はスマホからのアクセスなので、ブラウザ用に作ってスマホに展開ではなく、スマホに特化したUIで作る、というもの。

最後のJobsのくだりもエモエモでした。(資料にもあります)

LT-1: 最大公約数的なServiceWorker制作から見るPWAの勘所 by 進藤龍之介さん@NPO法人日本Androidの会

www.slideshare.net

WordPressプラグインの 「PWA4WP」を開発されているそうです。

wordpress.org

という宣伝からの、「PWAはキャッシュが命」
PWAはキャッシュする・しない要素の切り分けが大事。

LT-2: Servic eWorkerのCacheで色々と問題が起きた話 by @biga816 さん

speakerdeck.com

地下アイドルアプリを開発した時の話。地下アイドルアプリってとこで掴みはOK!

  • (アイドルの)写真を全キャッシュするようにしたら、容量の上限に達していた -> CAPを設定する
  • 開発環境ではAoTコンパイルされないので、アプリ自体が巨大に。
  • キャッシュから動画が再生されない(Safariのみ) -> HTTP Rangeリクエストに対して206を返すように

結論:Cacheが無限に増えるコンテンツは、CDNでキャッシュしたほうが良い。オフラインで最低限見たいものだけに。

ということで、またもCacheの話。今回はPWA=Cache戦略が大事!というのがよくわかった。

LT-3: IonicとPWA Toolkitについて by @scrpgil さん

speakerdeck.com

IonicのPWA toolkitはこちら

ionicframework.com

Ionicは、Web Componentsベースの開発フレームワーク。表示が爆速。ReactやVueでも使える。
Ionic自体が、iOSAndroidのUIデザインの切り替えをやってくれるので、かなり楽。確かにコレは楽そう!!

ロゴやグッズ

今回ロゴの名前が発表されました!
pwan(ぷわん)ちゃん!かわいい!ロゴが可愛いとテンション上がりますよね₍₍ (ง ˙ω˙)ว ⁾⁾

あと、なんと技術書展行けなかったけど欲しかったなーと思っていた、PWA Nightの「今日からできる 実践PWA」、もしかしたら会場で売ってないかな〜?と期待していたのですが、ありました!!( ✧Д✧) カッ!!
即購入しましたよ、デュへへへへ…。

f:id:kusuwada:20190418103513j:plain

もうこれでPWAアプリなにか作ってみるしか無いですね。
BOOTHでもともと買う予定でしたけど、やっぱりモノがあるとテンション上がります(2回目)

感想

PWAもつい今年の1月末、TWA(Trusted Web Activity)を使うことでGooglePlayStoreで配信できるようになったりと、注目が高まっているところで参加できてよかったです。
これから先2年ほど無職(無所属ではない…)の予定なので、開発するとしたら個人開発になるんだけど、個人開発ともPWAって相性良さそうだなぁと思ったり。特に今Nativeの経験もスキルもないので…。同じようなモチベーションの方が参加されていることも自己紹介タイムで把握できたので、そういう意味でも自己紹介タイム良かったです!

あとは懇親会!今回、Oisix la daichiさんで開催だったのですが、Oisixさん提供のおいしいおいしいお野菜が食べられるということで後ろ髪引かれまくりだったのですが、流石に8ヶ月妊婦は涙をのんで帰ることにしました…(இдஇ; )

次は 5/15(水) 株式会社ウフルさん@虎ノ門 で開催予定だそうです。既に懇親会なし枠は定員オーバーですが、懇親会前払い枠・ブログ枠は空いているので是非!

pwanight.connpass.com