PWAって何?
by
tsukun
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
PWAって何? 株式会社ソニックガーデン 野本 司
Slide 2
Slide 2 text
Feedbacker ● 発表に対する感想と質問を投稿するウェブアプリ ● http://bit.ly/2EASrrZ
Slide 3
Slide 3 text
自己紹介 ● 野本 司(のもと つかさ) ● 兵庫県出身 ● 1年前にソニックガーデンに新卒で入社
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
自己紹介 ● 大学までがっつり文系 ● プログラミング歴:1年ちょい ● 「HTML とは」「Ruby とは」状態 ● 最近Vue.js & Firebaseを触ってる
Slide 6
Slide 6 text
PWAに興味をもったきっかけ ● 「モバイルアプリも作れるのでは?」 ● Web、Android、iOSでそれぞれコードが違うことに絶望 ● 友達から「3つ一気に作れる方法がある」と聞き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には2段階ある ● 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
ご静聴ありがとうございました!