「Web Working Group 「PWAに備える３ヶ月」 vol.1」に参加してきました

勉強会メモ

Progressive Web Apps: WebのInstallabilityのおさらい

従来のWebのユーザエクスペリエンス

  • 電車の中で
    • ブラウザのロードバーが
    • ぐるぐるがでてきて
    • 画像の領域がでてきて
    • ようやく映ったら広告がでて
  • 多様なデバイス × あらゆる環境
  • 足りなかったもの
    • プッシュ通知
    • ホームに追加
    • 簡単な支払い
    • 信頼おけるパフォーマンス
    • 常にログイン
  • Webのよさとアプリのよさを兼ね備えたい

PWA(主にAndroidの観点から)

  • PWAはホームに追加できる
    • アイコンちゃんとある
    • 全画面表示

ホームに追加

  • ホーム画面登録の条件
    • manifestファイルが存在する
      • short_name - ホーム画面で仕様
      • name - アプリ名
      • icon - アイコンのパス
      • scope - PWA化させる範囲
        • スコープ外れるとchromeタブが開く
    • プロンプトを出したいページにlinkタグで設置
    • ServiceWorkerが登録されてること
      • 空のServiceWorkerだとだめ(昔はできた)
      • fetchをlistenしてないとだめ
    • HTTPSで配信されてること
  • 2回以上のアクセスがあり間隔が5分以上であることがプロンプト出る条件
  • ユーザがどの程度エンゲージしてるかchromeが持ってる(1~100)
    • 2以上だと出る
  • chromeが自動的に出してしまう
    • タイミング悪いこともある
    • beforeinstallprompt
      • プロンプトでる直前のイベント
      • ストップしてどっかで任意のとこで呼び出すとかできる

ホームに追加したアプリ

オフライン対応

  • chromeの恐竜じゃなくて側だけでも作ったページ返すだけで印象全然違う

パフォーマンス

  • Lighthouseで計測する
    • chromeチームが使ってる
    • chrome開発者ツールで使える
      • Auditsタブ

プッシュ通知

それ以外

  • Offline
    • Background Sync
    • Periodic Sync
    • 急にネット切れても裏で持っておいて後から通信
  • Social Share
    • Web Share API
    • Web Share Target API
    • Webページの「共有」的なアイコンで他アプリが候補で出てくる
  • Photo
    • New image upload UI
    • Image capture API
    • デフォルトでギャラリーみたいなのがでる
  • Trusted Web Activity

今後

  • iOS11.3
    • 一部まだ使えない
  • Microsoft Store
    • PWA対応してるサイトがストアに載る
    • デスクトップアプリとして使える
  • Workbox
  • Credential Management API
    • 裏でオートログイン
    • JSでブラウザに保存したCredentioalにアクセスできる
  • Payment Request API
    • 支払いフォームをブラウザで提供
    • みんな同じことしてるのにそれぞれで作っていた

まとめ

  • Webの新たなUX
    • -> PWA
  • 信頼のおけるパフォーマンス
    • 必須
  • ホーム画面追加
    • お手軽

Service Worker とは何者か

前回の振り返り

  • ServiceWorkerが動くブラウザが増えてきている
    • Safariの対応
    • 日本では80%超
    • モバイルに絞れば99%
    • 使えるAPIには注意
  • コンテンツマイニングのいい機会

PWA化してみた話

ServiceWorkerの動き

  • install
    • インストール時のアクション
    • インストール終わったら必須な所をキャッシュ
      • アイコン、スタートページ、オフライン北ぞ
      • cache.addAll(fileToCache)
  • activate
    • ServiceWorkerが有効化された時
  • fetch
    • リクエストが来た時に発生
    • e.requestの内容見てハンドリング
    • online/offlineも見える
      • navigator.onLine
  • cacheを捨てるタイミング難しい
  • ServiceWorkerとは何者か
    • cacheを制御するもの
  • 未対応の環境にはなにも影響ないのも良い
  • どうさしてるServiceWorkerを見る
    • chrome://serviceworker-internals/

PWAってどんな使い方ができるのかしら？

PWA対応してみた

  • https対応面倒
  • ServiceWorker
    • ホーム追加だけなら簡単
  • アイコン作るの面倒

PWA入れた狙い

  • 新規よりリピータを増やしたい

PWAに向き不向き

  • 全てがPWAが良いわけではない
    • 全てがモバイルアプリがいいわけではない
  • yahooとかWebの方が使いやすい

PWA開発の視点

  • PWAであることはWebアプリであること
  • Webで使われる場合もアイコンから使われる場合も考えないといけない

まとめ

  • ちゃんとした設計思想のもと作らないとゴミアプリになる可能性ある
  • サービスのステータスを見てネイティブ/PWAの選択を賢く
  • PWAの登場でUXデザインがより一層重要
  • 技術の選択肢が増えたんだからしっかり理解して判断するべき
    • だから今PWAをキャッチアプする価値はある