​​Service Worker has come
​​The keystone of PWA
​​
​​まぼろしのJS勉強会 #3 「Your next hurdle」
​​株式会社まぼろし 木村 哲朗
​​

​​What is Service Worker ?

  • ​​バックグラウンドで実行されるJS
  • ​​DOMに直接アクセスすることはできない
  • ​​ネットワークリクエストに介入できる
  • ​​ブラウザが勝手に起動・終了するので変数の値を保持できない
  • ​​https か localhost でのみ使用できる
​​

​​It's available already

  • ​​Chrome, Firefox
  • ​​Safari 11.1~
  • ​​iOS 11.3~
  • ​​Edge 17~ (It will come soon)
  • ​​​😇​ IEなにそれおいｓ（ｒｙ
​​

​​In frameworks

​​Angular

  • ​​@angular/service-worker
​​ng new my-project --service-worker

​​React

​​
 
User-uploaded image: +2018-04-13+14.21.26.png
​​
​​create-react-app ./your-react-app

​​Vue

​​
 
User-uploaded image: +2018-04-13+14.29.22.png
​​
​​vue create ./your-vue-app
​​or
​​vue invoke pwa
​​
​​​😰​ やべえ、いつの間にか当たり前に使われてる…。
​​

​​Resource caching

  1. ​​ブラウザ上でのネットワークリクエスト
  1. ​​SW上で fetch​ イベントを受け取る
  1. ​​レスポンスをキャッシュする
  1. ​​次回以降キャッシュを返却する
​​https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
​​

​​Background Sync

  • ​​各SNSで実装されている「オフラインでも投稿できる」機能
  • ​​POSTリクエストの失敗時にIndexedDBなどにキューを保存
  • ​​  → 再接続時にバックグラウンドで再リクエスト
  • ​​現状ブラウザのサポートがあまりよろしくない