ServiceWorker
Kyoto.js 12 の発表資料です。
https://gyazo.com/ec597699dd6798cc0757f3caa5ae9b48https://gyazo.com/fa307263ae68c8176ba1685ff1e762bc
プログラマブルなProxy
柔軟にオフライン対応・キャッシングができる
Push通知も送れる
IndexedDBが使える
DOMとは完全に別のバックグランドで動く
自作サンプル
https://github.com/nota/sw_app
herokuに上げたもの
https://sw-app.herokuapp.com/hoge
オフラインにしてもあらゆるパスが表示されます。
https://gyazo.com/dd7b41917e07baab9eb75582d3cb90e0
ネットにつながっていないと、Google.comですら表示できないのに、このドメインだけは利用し続けることができる!
デバッグ・削除方法
Chromeはchrome://serviceworker-internals/で確認可能
他のドメインのコードもすべてここから読めるので参考になる
Firefoxはabout:serviceworkers
開発時にlocalhost:3000などで登録したservice workerは、削除しないと別のアプリの開発に差し支える
事例
google.comですでに使われている。google.comのトップがアプリ並の速度で表示される理由の一つ
twitterも使われてることを確認。
H2Oで新しく提案しているHTTP2でのキャッシュプロトコルの実証に使われている
→ YAPC2016 shokaiメモ
対応状況
いまのところChromeとFirefoxのみ
Chromeのモバイル版も対応した
Android版Slack appの内蔵ブラウザでも有効になってた
iOSには、Cordovaプラグインがある https://www.npmjs.com/package/cordova-plugin-service-worker
Androidは非対応
Electronは対応してるかな?
Chromeがサポートしているなら動きそう
参考記事
MDN ServiceWorker 公式リファレンス
従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来 | PLAID Engineer Blog
The offline cookbook - JakeArchibald.com
キャッシュのパターンを学べる
#html5