読者です 読者をやめる 読者になる 読者になる

Noblesse Oblige

App/iOS/Android/Unity/cocos2d/VR/GameJam/Hackathon/肉 ブログの記事は勉強会の書きなぐりメモが多め

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

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

  • 1h 49m
    • 1h 28m App
    • 23m Web
  • スマートフォンユーザーの時間80%はその人のトップ3アプリに費やされている

    • 残りの2割は18分しかつかわれる時間がない
  • スマーフォンユーザーの平均月間利用アプリ数

    • 25
  • chrome for androidユーザーの月間訪問サイト数
    • 100+

Progressibe Web Apps

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

デモ

  • flip cart

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

User Experience

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

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

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

Service Worker

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

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

Cache API

  • suumoが最近対応した

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

  • Application shell

Push Notification

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

Background Sync

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