Save 37% off PRO during our Black Friday Sale! »

PWAって何?

7f95c0d13932eae764819dbeb5f895fc?s=47 tsukun
April 14, 2018

 PWAって何?

SonicGarden Tech in 岡山(2018/04/14開催)で使用

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

7f95c0d13932eae764819dbeb5f895fc?s=128

tsukun

April 14, 2018
Tweet

Transcript

  1. PWAって何? 株式会社ソニックガーデン 野本 司

  2. Feedbacker • 発表に対する感想と質問を投稿するウェブアプリ • http://bit.ly/2EASrrZ

  3. 自己紹介 • 野本 司(のもと つかさ) • 兵庫県出身 • 1年前にソニックガーデンに新卒で入社

  4. None
  5. 自己紹介 • 大学までがっつり文系 • プログラミング歴:1年ちょい • 「HTML とは」「Ruby とは」状態 •

    最近Vue.js & Firebaseを触ってる
  6. PWAに興味をもったきっかけ • 「モバイルアプリも作れるのでは?」 • Web、Android、iOSでそれぞれコードが違うことに絶望 • 友達から「3つ一気に作れる方法がある」と聞き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には2段階ある • 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. ご静聴ありがとうございました!