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

イベントサマリ

• Titlle: Google for Mobile Tokyo
• Date: 2015-12-09 10:00 - 17:30
• URL: https://events.withgoogle.com/google-for-mobile-tokyo/
• hashtag: #gfmtokyo https://twitter.com/hashtag/gfmtokyo
• スライド資料: スマートフォン体験を一歩先へ 〜 プログレッシブ ウェブ アプリの作り方

Introduction

• スマートフォンの月間利用時間 1.49
• スマートフォンの月間利用時間 APP 1.28, Web 0.23
• スマートフォンの時間 80%は，その人のトップ3アプリに費やされている
• スマートフォンユーザーの平均月間利用アプリ数 25
• Chrome for Androidユーザーの平均月間訪問サイト数 100+

提案

• アプリのトップ3を目指すより，Webを使いやすくしたほうが使ってもらえるのでは？
• インストールされないアプリより，Webを提供したほうが良いのでは？

デモ

• 実体験(アパレルショップ訪問>ユーザ登録すると5%off>並んでる間にできなくて面倒で断念)から
• アプリインストールの壁，ユーザー登録の壁 を通じて，
• FlipKartというインド最大のECサイトをデモで紹介。
• Progressive Enhancement で， Reactで実装されておりオフラインにも対応している

技術

• HTML5
  • Cache
• アプリインストールバナー −− Chromeがサジェストしてくれる機能
• Service Worker
• Cache API -- オフラインのためだけではなく，パフォーマンスとしても意味あり
• シングルページアプリケーション
• Application Shell
• プッシュ通知
  • 過去： メール，いいね，アプリ通知
    • 過去はユーザーのアクションが必要だった。メルマガ登録，いいねする，アプリをインストールする
  • 未来： Webを訪問してくれて，通知の許可をOKしてもらうだけ
    • 例) チケットサイトに訪問し，まだ発売前なのでnotify meをタップ，ユーザが通知を許可，販売開始したら通知
  • FacebookのWeb版は既に対応しているので，ぜひアプリ版ではなくWeb版で試して欲しい
• Background Sync -- Offlineでページを表示できなかった → Onlineになったら通知してくれる
• One-off Sync
• Periodic Sync