f:id:omuriceman:20190526012609p:plain

2019/5/15にPWA Night vol.4というイベントに初めて参加してきました。私はiOSアプリの開発経験が長いのもあった影響か、PWAについて若干否定的でした。

最近はあまりPWAの話を聞かないなぁと思っていたのですが、ふとTwitterを見ていて最近のPWA界隈に興味が湧いたので参加してきました。

PWA Night vol.4で「こえのブログ」の話をさせていただきます！今回は"真・PWA"のアプリっぽい部分(キャッシュ、UIパーツ、マルチメディアなど)に焦点を当てる予定です🥳興味のある方、ぜひお話しましょう🙌 #pwanight https://t.co/XpdX4RHcD7
— Hara Kazunari 🤝 (@herablog) 2019年4月19日

今回はPWA Nightのセミナーに参加して見解が変わった部分をブログに残していければと思っています。

PWAとは
PWA Nightとは
発表についての感想
LTの発表について
URLのご紹介
- ハンズオン資料の紹介
- セミナー当日の動画
まとめ

PWAとは

Progressive Web Appsの略です。PWAの定義について色々と調べてみましたが「(ネイティブ)アプリと同等の体験をWebで実現できるもの」という説明が多いですね。

developers.google.com

Web Push NotificationsやWeb Bluetooth APIなどいまだにブラウザ環境によって機能の差異が多いです。この事に触れずに「PWAすごい！」みたいな一方的な記事が多くて違和感を感じておりました。

後ほど紹介するスライドをみるとその差異は少なくなってきていると思われます。

PWA Nightとは

毎月第3水曜日に開催されているPWAについて熱く語り合うイベントです。 PWA Night vol.5の案内がされております。

pwanight.connpass.com

このブログ記事を書いている最中にはもうすでにいっぱいです(^_^;) 抽選枠がありますので興味のある方は申し込んで見てはいかがでしょうか。

発表についての感想

全体を通して感じたことは「PWAでユーザー体験を向上させよう！」でした。

生の"こえ"いかがでしたでしょうか。今日のイベントは全般的に要素技術からユーザー体験良くしたいよねという方向にシフトして話されていたのが良かったです🤝 #pwanight https://t.co/S2SFskg7tm
— Hara Kazunari 🤝 (@herablog) 2019年5月15日

こえのブログでのPWA

最初は「こえのブログ」というサービスでPWAを導入している話です。自分が知らない技術の話が結構たくさん出てきました。クライアントサイドとサーバーサイドのキャッシュ管理の話はPWAに関係なく参考になりました。コードも多数載せていただいており、イメージがつかみやすかったです。

また「こえのブログ」で使用しているAPIの紹介もありました。個人的にはSafariにもVibration APIが早く搭載されて欲しいと思っています。 PWAから少し外れますが、WebAssemblyの活用事例についても紹介があり、知っているけど使ったことない自分としてはこちらも新鮮でした。

キャッシュ管理やオフライン時の対応、各種APIなどを駆使してどのようにユーザー体験を向上させるかという話をしている印象を受けました。

以下が「こえのブログ」です。

voice.ameba.jp

やっていこう。PWA

次は@oliver_diaryさんによる発表です。PWAとはなにか、から始まり歴史や特徴（Reliable, Fast, Engaging）についての話がありました。

また最近のPWA対応状況についても触れております。資料にも記載がありますがiOSは未だ難しい部分があるようですが徐々に対応していきているようですね。

個人的に面白かったのはプッシュ通知についてです。同意画面の出し方については色々と工夫されているようです。自分もふと訪れたサイトでいきなりプッシュ通知のアラートを出されたら絶対に許可しませんね。

資料内で紹介されていたPWAのチェックリストのURLを掲載しておきます。

developers.google.com

PWAの触り程度しか知らなかったので色々と勉強になりました。

また発表スライドに記載してある2015年11月のChromeサミットの映像はおそらく下記のものかもしれません。 youtu.be

業務システムでこそ使えるPWA

PWAに関してほぼ初心者であった自分が一番得るものが多かった発表です。以下は資料の前半にある図ですが、私はそもそもプッシュ通知やアプリ化するものをPWAと呼ぶと思っていました。

さらにこちらの資料をみると、PWAの最初の一歩はレスポンシブ対応にあるようです。そう言ったところからできる範囲で、となると自分にもPWAを導入できそうな気がしてきます。

あととても興味深かったのがこのページです。海外旅行時などに利用するモバイルWi-fiの通信制限時に速度をあげたいのだが申し込みフォームのjQueryの容量が重くてサイトが表示されない。こういったファイルをキャッシュしておけば困らずにサイトを表示できたのに。という話です。普段生活している分には気にならないファイル容量ですが、それがキャッシュされるだけでも利便性が向上しそうですね。

PWAは「ユーザー体験の向上」がまずあって、その技術を組み合わせることでアプリ化もできる。という捉え方でいいのではないかなと感じました。

あと資料に無くて面白かった内容が、iOSアプリの32bit と 64bit対応問題の話です。YouTubeに上がっていたので該当の部分を紹介いたします。

https://youtu.be/50kUeuwp_MA?t=3591

私も実体験で起こった話なのですがアプリ開発をしているとOSの追従に合わせなければならず、32bitから64bitにアップしなければならないというような割と不毛な仕事もありました。(Swiftの言語のバージョンアップなども似ていますね)

業務システムをPWAで作ることはかなりいいですね。メリットしか感じないように思えました。Web Bluetooth APIを使った業務系システムを作ってみたいと思います。