PWAって何？

SonicGarden Tech in 岡山（2018/04/14開催）で使用

・PWAとは？
・PWA vs Native App
・PWA導入事例
・具体的に何をしたらPWAなの？
・次のアクション

Transcript

1. PWAって何？ 株式会社ソニックガーデン 野本 司
2. Feedbacker • 発表に対する感想と質問を投稿するウェブアプリ • http://bit.ly/2EASrrZ
3. 自己紹介 • 野本 司（のもと　つかさ） • 兵庫県出身 • １年前にソニックガーデンに新卒で入社
5. 自己紹介 • 大学までがっつり文系 • プログラミング歴：１年ちょい • 「HTML とは」「Ruby とは」状態 • 最近Vue.js & Firebaseを触ってる
6. PWAに興味をもったきっかけ • 「モバイルアプリも作れるのでは？」 • Web、Android、iOSでそれぞれコードが違うことに絶望 • 友達から「３つ一気に作れる方法がある」と聞きPWAに興味が 湧いた
7. 今日の発表のゴール ❏ PWAについてなんとなくわかってもらう ❏ PWA作ってみよう！と思ってもらう
8. 今日話すこと • PWAとは？ • PWA vs Native App • PWA導入事例 • 具体的に何をしたらPWAなの？ • 次のアクション
9. PWAとは？
10. PWAとは • ネイティブアプリっぽいウェブアプリ • 既存の技術 + PWAに合わせて出した技術の集合体 • ウェブでサイトを訪れる→ホームに追加→PWA
11. Twitter Lite • 「ホーム画面に追加」バナー • Push通知 • オフラインでも使える
12. PWAの特徴は？
13. Responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engageable, installable, linkable web experiences
14. (；´д｀)ゞ
15. PWAとは • Responsive → いろんなデバイスに対応 • Connectivity independent → ネット環境が悪くても動く • Applike → アプリっぽい
16. PWAとは • Fresh → アプリ自身とコンテンツをオンライン時に更新 • Safe → 改ざん、覗き見防止のためHTTPS経由で配信 • Discoverable → 検索エンジンから発見
17. PWAとは • Re-engageable → プッシュ機能 • Installable → リンクをホーム画面に登録 • Linkable web experience → URLでの共有
18. どんな技術を使ってるの？
19. Service Worker • ブラウザがWeb ページとは別でバックグラウンドで実行するス クリプト • APIとの組み合わせでキャッシュ、Push通知、バックグラウンド でデータの同期などを実現
20. App Manifest • アプリ自身の設定ファイル • name、short_name、start_url、display、icon等の設定 • html内で読み込み
21. レスポンシブ • レスポンシブ対応は必須 • Vuetify.jsがオススメ ◦ 雛形用意してくれる ◦ vue init vuetifyjs/pwa my-project
22. https • こちらも必須 • Firebase Hostingなら無料で簡単
23. PWA vs Native App
24. PWAのメリット • コードが一つでいい（？） • ストア審査なし • ユーザーからみた利用までの手順の少なさ • 軽量
25. PWAのデメリット • デバイスの機能が使えないものがある ◦ アラーム ◦ 電話帳 ◦ 設定変更
26. • Chrome → 対応 • Firefox → ほぼ対応（一部使えない機能あり） • Safari → Service worker対応開始（通知、バナーはまだ） 対応ブラウザ
27. PWAを選べない場合？ • PWAで利用できないネイティブAPIが必要な場合 • ユーザー登録なしでサブスクリプションを利用したい場合（スト ア決済を利用したい場合） • アプリストアに並べることに価値がある場合
28. PWAを選べない場合？ • iOSでpush通知が必要な場合 • サーバーを用意したくない場合（個人利用）
29. PWA導入事例
30. Twitter Lite • 以前のウェブ版と比較して ◦ セッション毎のページ閲覧が65％アップ ◦ 直帰率20%向上 ◦ 投稿が75%増加
31. 楽天レシピ • 1ユーザーあたりのPVが3.1倍 • AMP to PWA ◦ AMP = モバイルページの高速表示（制限あり） ◦ 平均滞在時間50%向上 ◦ 回遊率3倍
32. AMP to PWA 1. 検索からAMPページにユーザが訪問 2. 訪問中にバックグラウンドでService Workerインストール 3. サイト内の別ページに移動→PWA
33. 楽天レシピ • 1ユーザーあたりのPVが3.1倍 • AMP to PWA ◦ AMP = モバイルページの高速表示（制限あり） ◦ 平均滞在時間50%向上 ◦ 回遊率3倍
34. 具体的には何をしたらいいの？
35. PWAには２段階ある • PWAにもレベルがある • Baseline（最低限の） • Exemplary（模範的な）
36. Baseline ❏ HTTPSで配信されている ❏ レスポンシブ対応されている（モバイル＆タブレット） ❏ オフラインでも何か表示させる
37. Baseline ❏ 「ホーム画面に追加」バナーを表示できる ❏ App Manifestでname、short_name、アイコン、start_url が登録されている ❏ Service Workerが登録されている ❏ HTTPS
38. Baseline ❏ 初回アクセス（3G環境）で10秒以内に「操作可能な状態」にな る ❏ Chrome、Edge、Firefox、Safariで動く
39. Baseline ❏ ネット環境が悪くてもページ移動がスムーズ ❏ 各ページが独立したURLをもっている
40. Lighthouse • Webの品質スコアを出してくれる • PWAの対応状況を自動でチェック • Baselineのチェックリストのほとんどに対応
41. Lighthouse
42. Exemplary - Index & Social ❏ Googleにインデックス登録する ❏ Social metadata
43. Exemplary - User Experience ❏ 戻るボタン → 前回スクロールした位置に戻る ❏ inputがキーボードによって隠れない
44. Exemplary - Caching ❏ Cache-first ❏ オフラインであることを伝える
45. Exemplary - Push Notification ❏ 通知許可の際の説明 ❏ アプリ内で通知オンオフができる
46. 次のアクション
47. おすすめチュートリアル • チュートリアル（https://bit.ly/2uJTJRD） • 「vue.js progressive web app」で検索 • Vue.jsとFirebase使ってる
48. 取り扱う項目 • 「ホーム画面に追加」 • オフライン対応
49. おすすめチュートリアル • Vue CLIでプロジェクト作成 ◦ vue init pwa cropchat
50. おすすめチュートリアル • 雛形が出来上がる ◦ Service Worker ◦ App Manifest • HTTPSでホストしたらバナー出せる
51. おすすめチュートリアル • Material design light → applike • Vuetify.js使ってプロジェクト作成
52. おすすめチュートリアル • Firebase導入 → fresh • オフライン対応 → connectivity... ◦ App Shell ◦ HTTP request ◦ Firebase Stream
53. 今日の発表のゴール ❏ PWAについてなんとなくわかってもらう ❏ PWA作ってみよう！と思ってもらう
54. ご静聴ありがとうございました！