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

by shigemk2

当面は技術的なことしか書かない

Introduction to Service Worker #frontrend

勉強会

Webを取り巻く環境の変化

ネットワークとハードウェア

マシンスペックもすごい向上した。(PCもモバイルも)

ネットワークはLTEと3Gで二分されている。

ネットワークはハードウェアほど安定はしていない。

負荷をかけるべきはネットワークではなくハードウェア。

モバイルデバイスの普及やWeb技術の進化とともにパフォーマンスが問われる。

High Performance Browser Networking

オフライン時は画面が真っ白。

  1. オフラインファースト
  2. オフラインWebを実現する技術
  3. 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

IndexedDB | MDN

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

Cache API - MoodleDocs

なんでもかんでもpromise

coonsta/cache-polyfill · GitHub

バックグラウンド同期

サーバープッシュの受信(web push api)

Service Worker

  • 高機能ゆえHTTPSが必須(開発はローカルホストで)
  • オフラインWebのためだけ?ではない。Service Workerの元で、WebPushやバックグランド同期を実現する。

todo

オフラインという新たなパラダイムを受け入れよう