WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

Presentation about PWA at study group

f:id:kito0039:20180703123223j:plain

はじめに

A new way to deliver amazing user experiences on the web.

Googleが提唱しているように、PWA とは、 より素晴らしいUX(ユーザ体験)を実現する新しい手法です。 主な特徴は次の3つ「Reliable(信頼性)」「Fast(高速)」「Engaging(エンゲージメント)」。

具体的には、従来のWebを拡張し、スマートフォンでWebサイト・Webアプリケーションにアクセスしても、 まるでネイティブアプリケーションのようなUXを提供します。さらにはキャッシュを効果的に使い、高速に動かすこともできます。 また、ネイティブアプリケーションをインストールするかのように、ホーム画面に追加することも可能とし、アプリ内でPUSH通知を受け取ることまでできてしまいます。

PWAに対応しているサイトとして有名なものは、

などです。(個人調べと感覚値です)

Google Chromeデベロッパーツールでも確認できますので、ご興味ある方は見てみてください。 ちなみに、Chromeにデフォルトで実装されているLightHouseで確認したところ、どのサイトも総合的に点数が高めで素晴らしいです。(初回表示時のPerformanceの項目はいずれのサイトも点数は低めでした)

ハンズオン

恒例?のサポーターズColabさんにて、PWAのハンズオンをやってきました。キャンセル含めて約40人の方にご応募いただきました。ありがとうございます。実際に発表したスライドに修正加えたものがこちら↓↓↓

speakerdeck.com

感想

「思ったより難しそう」というご意見と、「イメージと実装の道順は見えてきた」というご意見の両方があり、全体的には高評価だったようで何よりです。 PWAというワードは知っているしなんとなく噂は耳にしているようですが、実際に触れる機会がなかったらしく、良い機会みたいでした。 参加者の中には、「仕事ではバックエンドがメインでフロントはほとんどやったことない」という方もいたのには驚きました。 ただし、こちらの方にはかなり難しかったようです…

現在は無料で使えるホスティングサービスがたくさんあります。例えば、FirebaseGithub PagesHerokuなど。 簡単なものであればすぐにでも試せる環境が揃っているので、敷居はだいぶ低いのではないでしょうか。さらに、Googleが入門向けのサイト(日本語訳)や、ブログ(日本語訳)も書いてくれています。

私個人の反省としては、ちょっと歴史の話に時間をかけすぎて、本題のハンズオンが早口になってしまったのが課題です。個人的にはPWAには未来を感じており、 今後もどんどん広まるであろう技術ですので、私自身もしっかり使い倒して行きたいと思います。

そのためにも、何度か宣言している気がしますが、まずはプライベートプロダクト作ります。(使命感)

では(*・ω・)ノ