スマートフォン体験を一歩先へ - プログレッシブウェブアプリの作り方

• Google for Mobile 講演A3

スマートフォンの月間利用時間

• 1h 49m
  • 1h 28m App
  • 23m Web

• スマートフォンユーザーの時間８０％はその人のトップ３アプリに費やされている

  • 残りの２割は１８分しかつかわれる時間がない

• スマーフォンユーザーの平均月間利用アプリ数

  • ２５
• chrome for androidユーザーの月間訪問サイト数
  • １００＋

Progressibe Web Apps

• 通常のウェブサイトの特徴
  • 検索(スライス)ができる
  • インデックスできる
• これらにさらに体験を追加することで品質をあげる
  • これがプログレッシブウェブアプリ

デモ

• flip cart

  • インドのサービス
  • 画面の動きがスムーズ
    • React js
  • ネットワークオフにすると画面全体がグレーになる
    • 過去に見た製品はオフラインでもみれる
    • できる限り最大限の機能を提供
  • キャッシュ画面のバーにカスタムカラーをつかえる
    • ネイティブアプリケーションライクに作れる

User Experience

アプリインストールバナー

• chromeが一定間隔でホームへの追加をサジェストしてくれる

  • manifestを定義

    • manifestをhtmlに追加すれば対応完了
  • Service workerを使用
  • HTTPSで提供
  • ５分以上の間隔で複数回アクセス

Service Worker

スマートフォン体験を一歩先へ - プログレッシブウェブアプリの作り方

• ウェブの体験を革命的に変える技術
  • Cache API
  • Push Notificatoin

Cache API

• suumoが最近対応した

  • 通常だと0.8msかかっていた起動が0.2msになった
  • オフライン機能の提供だけでなくパフォーマンスの向上につながる

• 基本的にイベントドリブン

• Application shell

  • ページの枠組みだけキャッシュしてあとは中身のコンテンツだけリクエストすれば良い
  • https://github.com/GoogleChrome/application-shell

Push Notification

• 前まではpush通知を送るにはネイティブアプリを入れてもらわなければならなかったのでハードルが高かった
• 今はウェブでも超簡単にできる
  • Google Cloud Messaging

Background Sync

• 読み込みが遅いページなどがあれば、読み込みが完了したら通知で教えてくれる