Service Workerについて調べてみた

# はじめに
先日cordovaユーザ会の勉強会で恥ずかしながら初めてService Workerという言葉を知り、興味を持ちました。アドベントカレンダーを書くということで自分も勉強になるという目的て調べた結果と個人的な感想(少々)をまとめてみました。実装について全く書いていません、ご了承ください。

# なぜService Workerを使う
## その前に**Progressive Web Apps** (PWA)っていうのがあって
Googleさんの定義はこうですと[^1]
[^1]: 参考資料4
<img width="636" alt="pwa.png" src="https://qiita-image-store.s3.amazonaws.com/0/100004/d4248032-bf59-6e76-43da-f7fd206e0b27.png">

要するに**ネイティブアプリ的なユーザ体験を提供できる**ウェブアプリということですかね。

### **ホーム画面に追加**機能について
ウェブページをホーム画面にブックマークする機能です。ChromeではWeb App Manifestを導入、iOS Safari対策でapple-mobile-web-app-capableメタタグを追加などで簡単にネイテブアプリみたいなフルスクリーンで起動することができちゃいます。

スマホユーザに知られてない心配もあるでしょうが、Chrome M42 からこの「ホーム画面に追加」をブラウザが自動的に促してくれる機能を追加しました。(PCとAndroidのみ)
<img width="200" alt="install banner.png" src="https://qiita-image-store.s3.amazonaws.com/0/100004/c6fd4998-edd5-353d-db79-9a9b16afcdb8.png">

未来でこの仕様は普通になったらすごいことではないでしょうか

話逸れましたが、見た目がネイティブになったけど接続が切れたらどうなります？　
この恐竜に見覚えありますよね <img width="200" alt="dino.png" src="https://qiita-image-store.s3.amazonaws.com/0/100004/3476622b-c3a8-66f9-d45a-8e62b8651bda.png">

こんな画面見せられたらサービスへの不信感につながるのでやはりオフラインでも動作するネイティブアプリを作るべきなのか？そこで、なんとService Workerの導入によってオフラインの閲覧(キャッシュした分)を実現することができてしまいます。PWA作成においてService Workerの導入はポイントが高いですよ。

なんかワクワクしませんか？

# Service Workerとは
> Service Worker はオフライン技術を可能にするためだけのものではありません。Service Worker とは、ひとことで言うならこうです：

> **ユーザーに見えるウェブページの裏側で動かせるイベント駆動の JavaScript 環境。**[^２]
[^２]: 参考資料1

<img width="694" alt="sw.png" src="https://qiita-image-store.s3.amazonaws.com/0/100004/07b5b64d-1c93-1b18-6059-263d6530b584.png">

ユーザのオフライン体験という点で見たらService Workerの前にもAppCacheというのがありましたが、問題が多く結局普及できないようです。

# Service Workerの特徴
- イベント駆動(install, fetch, pushなど)
- バックグラウンドで動いてる
- Web ページとはまったく異なるライフサイクルで動作します
- JavaScript Worker のひとつですので DOM に直接アクセスできません(操作したい場合は、コントロールするページ経由で行えます。)
- ネットワークリクエストをコントロールできます(プロキシ機能)
- 必要に応じて終了、起動されますので、ステータスの保持はできません(どうしてもライフサイクル間で共有したい場合は、IndexedDB API API にアクセスしなければいけません。)
- Promisesを多用します

### ちなみに
Service Workerのライフサイクルについて[y_fujiedaさんの記事](http://qiita.com/y_fujieda/items/f9e765ac9d89ba241154#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB)のすばらしい画像をご覧ください。

# Service Workerの制限について
### **ブラウザのサポート状況**
[Can I use service worker?](http://caniuse.com/#search=service%20worker)
[Is SERVICEWORKER ready?](https://jakearchibald.github.io/isserviceworkerready/)

残念ながらiOSまだサポートされていません。前向き検討中のようで準備しておいて楽観的に待ちましょう。
### **HTTPSのみ**
中間者（man-in-the-middle）攻撃を防ぐためHTTPSの環境は必須です。
証明書や環境周りでコストが跳ね上がりそうなのでミニ規模のアプリには難しい。
localhostはテストのためにhttpでも使用可です。



# Service Workerで何ができるの
よく挙げられるユースケースとして
- **ローカル プロキシ** - リクエストに加工したりできる
- **オフライン キャッシュ** - オフラインの使用が可能
- **オフサイト プッシュ通知** - アプリを閉じてもプッシュ通知を受けられる
- **バックグラウンド同期**
- **ジオ フェンシング**(未)

プッシュ通知デモ
https://simple-push-demo.appspot.com/

オフラインキャッシュデモ(ネット接続切ってリロードしても200 OK)
http://qiita.com/y_fujieda/items/f9e765ac9d89ba241154#cache%E7%B7%A8


# Service Workerを始めるにはどうしたらいいの
[Googleのスタートガイド](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)はわかりやすく翻訳されてて、読みながら手を動かすのが良さそう。

## Chromeでの使用状況を見るには
- [chrome://serviceworker-internals/](chrome://serviceworker-internals/)
- [chrome://inspect/#service-worker](chrome://inspect/#service-worker)
- デベロッパーツール -> Applicationタブ

# まとめ
このメモかまとめかよくわからない記事を最後までご覧いただき、ありがとうございます。少しでもService Workerに興味持ちましたら幸いです。
これからウェブアプリもネイティブアプリみたいに使えたら開発の手間は激減ですね。
ウェブアプリでもホームスクリーンからワンタップ起動でき、貯蓄されたデータを閲覧できてのかつプッシュ通知も送信できる、最近見たアニメでたとえすると、超帯電体質のガモタンがポヤガンの加勢により実体化みたいな感じになり、どんどん情報付き電磁気も溜め、かつスカイセンサーと共振して電磁気を出力することもできちゃう！(すみません、自分も何を言ってるのかわかりません)
そして人間か幽霊か、ウェブアプリかネイティブアプリかの差がどんどんなくなる！そんな夢を見てもいいですよね。


# 参考資料
1. [Service Worker で作る 最新モバイル ウェブ エクスペリエンス - Google Developers Summit まとめ](https://developers-jp.googleblog.com/2015/04/service-worker-google-developers-summit.html)
2. [Service Worker の紹介](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)
3. [Service Workerの基本とそれを使ってできること](http://qiita.com/y_fujieda/items/f9e765ac9d89ba241154)
4. [Angular 2 と Progressive Web Apps - Google I/O 2016](https://www.youtube.com/watch?v=vAb-2d1vcg8)
5. [従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来](http://tech.plaid.co.jp/cong-lai-nowebapurinochang-shi-wobian-eru-service-workergamotarasuwebnowei-lai/)
6. [Progressive Web Apps Roadshow @Mountain View で心に残った項目リスト](http://qiita.com/ryoyakawai/items/4f4356a94bcc89aba583)
7. [W3C Working Draft - Service Workers](https://www.w3.org/TR/2015/WD-service-workers-20150625/)

# おまけ
Chromeの[Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)拡張機能を使って冬になって雪たまにサンタが降ってくるニジボックスのコーポレートサイトのPWA点数を測ってみました。

![ニジボコーポレートサイト](https://qiita-image-store.s3.amazonaws.com/0/100004/698135e3-7855-ff46-6690-993742278019.png)

19点でした。:innocent:
<img width="1231" alt="Lighthouse report-nijibox-jp.png" src="https://qiita-image-store.s3.amazonaws.com/0/100004/b98235fb-f555-70b1-72b5-d42472dcb919.png">

見た通りウェッブアプリをPWAにするために足りない部分と改善案が表示されてますのでそれを見ながら目標点数に達するまでアプリを改善することができます。
でもコーポレートサイトはユーザとのエンゲージを求めてないので19点でいいじゃないでしょうか :grin: