Mobile
google
GoogleforMobile
ProgressiveWeb
MobileWeb

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

More than 1 year has passed since last update.


イベントサマリ


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