Webを取り巻く環境の変化
ネットワークとハードウェア
マシンスペックもすごい向上した。(PCもモバイルも)
ネットワークはLTEと3Gで二分されている。
ネットワークはハードウェアほど安定はしていない。
負荷をかけるべきはネットワークではなくハードウェア。
モバイルデバイスの普及やWeb技術の進化とともにパフォーマンスが問われる。
High Performance Browser Networking
オフライン時は画面が真っ白。
- オフラインファースト
- オフラインWebを実現する技術
- Service Worker is coming!
オフラインファースト
オフラインを前提にWebアプリをつくること
2014年にはWebアプリの「オフラインファースト」が流行するのではないか？ － Publickey
そのメリット
- オフラインでもアクセスできる
- 積極的にキャッシュを参照するので高速
ネットワーク帯域も節約可能
辺境や地下鉄のような環境に対しても対応できるようにする
ネイティブの振る舞いに近づく
- インストール時に描画リソースを確保する
- オフライン時にも画面が真っ白にならない
- 通信できなかったことを意識させない設計
オフラインは機能のひとつ
- リアルタイム性を要求されるようなアプリには不向き
- 読む中心 即効性が不要な編集
- アプリケーションの機能のひとつにすぎない
→オフライン化は正義ではないが、検討は出来る。
関連するブラウザAPI
navigator.onLine
window.navigator.onLine - Web API インターフェイス | MDN
FileSystem(たぶんChromeだけ対応)
FileSystem API について知る - HTML5 Rocks
WebStorage
Web Storage－HTML5のAPI、および、関連仕様
indexedDB
Application Cache
アプリケーション キャッシュ初心者ガイド - HTML5 Rocks
諸々の仕様上、設計が強制される
onlineAPI + StorageAPI
Service Worker
高機能なローカルプロキシ
JavaScript Workerのひとつ
Service Worker の紹介: Service Worker の使い方 - HTML5 Rocks
HTTPリクエストの検知と改ざん
FetchAPIを使ったリソースの取得
Fetch API 解説、または Web において "Fetch する" とは何か？ - Block Rockin’ Codes
CacheAPI
なんでもかんでもpromise
coonsta/cache-polyfill · GitHub
バックグラウンド同期
サーバープッシュの受信(web push api)
Service Worker
- 高機能ゆえHTTPSが必須(開発はローカルホストで)
- オフラインWebのためだけ?ではない。Service Workerの元で、WebPushやバックグランド同期を実現する。
オフラインという新たなパラダイムを受け入れよう
