PWA概論

2018/05/18 Connehito Marché #2〜webフロントエンド市〜

Transcript

1. PWA 概論 Kohei TAKATA
2. もくじ PWA とはなにか なぜPWA か なぜ今PWA のような話をするのか 現状の問題点 既存サー ビスへの導入 ～～～～～～～～～～～～～～～～ 話さないこと → 実装の細かいトコ
3. PWA とはなにか Progressive Web Apps の略。 スマホのWEB 上で、 ネイティブアプリのような体験を提供するため のもの。 （ 機能例） ホー ム画面への追加、 オフラインキャッシュ、 プッシュ 通知、 スプラッシュ画面、 全画面表示、 など 導入事例としては、twitter、SUUMO、lancome などが有名 アプリを代替するものではないぞ → パフォー マンス、 体験ではアプリに軍配。 → 出面の1 つ。 実装の優先順位の問題
4. なぜPWA か① アプリは費用対効果が悪い スマホの利用時間は少数のアプリがほぼ独占 「 いつも使ってるアプリの体験 ＝ 使いやすい」 になっちゃう iOS、Android、Swift、Java（Kotlin）、PUSH 通知、WebView、 Apple の審査、 証明書、 リリー ス、 ストア、 アップデー ト.........
5. なぜPWA か② 従来のWEB との比較 ペー ジ容量の増加への対応 フロント側でキャッシュが利用できる ホー ムアイコン、PUSH 通知によるユー ザー の復帰率向上
6. なぜ今PWA のような話をするのか safari が対応したから！！！！！！！ １
7. 現状の問題点 見た目や体験はアプリと一緒にはできない safari ではまだ完全に機能が揃っていない（PUSH 通知とか） ユー ザー にまだ体験として普及していない → よりよい体験を求めてアプリをストアで検索するのがまだ一般的 → 「 なんかよくわからんダイアログ出てきた」 って思われる
8. 既存サー ビスへの導入 基本的には既存のWEB をそのまま使える。 まずはhttps 化する必要があるよ。 機能を1 つずつ対応していく（1 歩1 歩進めていく） ことが可能。 → 「 ホー ム画面に追加」 からやる、 とか。
9. That's all! PWA を使うことでユー ザー の体験は上がることしか無いので、 一歩 一歩進めていきましょ。
10. ご静聴。
11. 参考資料 Service Worker とは何者か PWA ってどう有効なのかしら 考えてみた What Type of Mobile Marketer Are You? PWA ツー ルを利用した対応と企業サイドの懸念点 お手軽PWA 開発環境と近い将来の課題 Creating Media Without an App (Chrome Dev Summit 2017) PWA の大手の事例が増えてきた 注目のサイト改善施策PWA とは？ 企業の最新活用事例5 選