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