Help us understand the problem. What is going on with this article?

Service Workerについて調べてみた

More than 3 years have passed since last update.

はじめに

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

なぜService Workerを使う

その前にProgressive Web Apps (PWA)っていうのがあって

Googleさんの定義はこうですと1
pwa.png

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

ホーム画面に追加機能について

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

スマホユーザに知られてない心配もあるでしょうが、Chrome M42 からこの「ホーム画面に追加」をブラウザが自動的に促してくれる機能を追加しました。(PCとAndroidのみ)
install banner.png

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

話逸れましたが、見た目がネイティブになったけど接続が切れたらどうなります? 
この恐竜に見覚えありますよね dino.png

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

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

Service Workerとは

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

ユーザーに見えるウェブページの裏側で動かせるイベント駆動の JavaScript 環境。2
sw.png

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

Service Workerの特徴

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

ちなみに

Service Workerのライフサイクルについてy_fujiedaさんの記事のすばらしい画像をご覧ください。

Service Workerの制限について

ブラウザのサポート状況

Can I use service worker?
Is SERVICEWORKER ready?

残念ながら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のスタートガイドはわかりやすく翻訳されてて、読みながら手を動かすのが良さそう。

Chromeでの使用状況を見るには

まとめ

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

参考資料

  1. Service Worker で作る 最新モバイル ウェブ エクスペリエンス - Google Developers Summit まとめ
  2. Service Worker の紹介
  3. Service Workerの基本とそれを使ってできること
  4. Angular 2 と Progressive Web Apps - Google I/O 2016
  5. 従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来
  6. Progressive Web Apps Roadshow @Mountain View で心に残った項目リスト
  7. W3C Working Draft - Service Workers

おまけ

ChromeのLighthouse拡張機能を使って冬になって雪たまにサンタが降ってくるニジボックスのコーポレートサイトのPWA点数を測ってみました。

ニジボコーポレートサイト

19点でした。:innocent:
Lighthouse report-nijibox-jp.png

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


  1. 参考資料4 

  2. 参考資料1 

ifhung
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away