はじめに

ネイティブアプリの開発をしていて、Web アプリとの差がプッシュ機能くらいなのでは…と思いました。

じゃあ、「Webアプリでプッシュ機能を実装できればいいのにな」と思い、
いろいろ調べたら ServiceWorker に出会いました。

折角なので調査した内容を共有しようと、Qiita に投稿してみました。
主な内容は下記のとおりです。

• ServiceWorker の概要
• ServiceWorker を使ってできること
  
• ServiceWorker の始め方
• 他の似たようなサービス
  

※本記事は ServiceWorker を実際に使うにあたって、サービスの大まかなイメージを掴んでもらうための導入的な記事です。これから実装していく中での発見等を共有できたら幸いです。

ServiceWorker って何？

端的に言うと ユーザーの端末上でバックグラウンドで動くイベント駆動のJavaScript環境です。
ユーザーがブラウザで Webページを開いていないときでも、何かしらの処理を実行させることが出来ます。

※ServiceWorker の概要に関しては下記の記事を参考にさせていただきました。

Service Workerの基本とそれを使ってできること

何ができるか

バックグランドで動くイベントの種類によって色んなことができそうです。

• ウェブのプッシュ通知
  GCMからプッシュ通知を受け取り、ブラウザに表示させる
  
• バックグラウンド同期
  ブラウザを閉じていてもバックグラウンドでデータ受信したり、
  オフライン状態で受けた動作も通信可能になるとバックグラウンドで動作可能
• データのキャッシュ
  指定したページや画像等をCache APIを使って保存、Fetchイベントハンドラで取り出す
• リクエストの横取り
  ブラウザから投げられるリクエストを横取りして、サーバに投げる前に加工したり、
  サーバにリクエストを投げずに、固定のページをレスポンとして返したりすることが可能

ServiceWorker の始めかた

ServiceWorker を使いたいサイトの好きな場所に下記のスクリプトを埋め込む。

navigator.serviceWorker.register('/ServiceWorker.js',{scope: '/mysite'}); 
//scope プロパティで ServiceWorker.js が有効になるスコープの指定もできる。

register が完了すると、次回以降スコープ内のページにアクセスしたときに

ユーザーの環境上で ServiceWorker.js がブラウザをコントロールするようになります。
そして、ページにアクセスするたびに fetch イベントを発火するようになります。
あとは fetch イベントをキャッチするイベントリスナー内で好きな処理を書けばいいです。

self.addEventListener('fetch', (event) => {
    //fetch イベントに対してやりたい処理を書く
}

実現方法例

• ウェブのプッシュ通知
  
  • Service Worker + Push API
    • https://ics.media/entry/11763
      
  • PushCrew
    • https://digitalcontent.tokyo/push-notifaction-pushcrew/
      
  • GrowthPush
    • http://jp.techcrunch.com/2013/08/07/sirok-launched-growthpush/
      
  • Pushdog Owned
    • http://wdplu.com/pushdog-owned
• バックグラウンド同期
  
  • Service Worker + Background Sync API
    
    • https://developers.google.com/web/updates/2015/12/background-sync?hl=en
      
    • http://www.publickey1.jp/blog/15/chromebackground_syncapi.html
      
• データのキャッシュ
  
  • Service Worker + Fetch API + Cache API
    • http://qiita.com/horo/items/175c8fd7513138308930
      
  • HTML5 Application Cache
    
    • https://developer.mozilla.org/ja/docs/Web/HTML/Using_the_application_cache
      
    • http://qiita.com/TakamiChie/items/a7f8921bdb95871d90e1
      
  • localStorage, cookie等
    
• リクエストの横取り
  
  • AngularJS の interceptor
    
    • http://qiita.com/uggds/items/b89be96f1e297f6dbab4
    • https://docs.angularjs.org/api/ng/service/$http#Interceptors
  • Proxy サーバ

おわりに

次回は実際に ServiceWorker を使ってプッシュ通知などを実装してみる予定です！