Service Workerとの戦い ~ 実装編 ~ #scripty03

Service Workerとの戦い ~ 実装編 ~

ヤフー株式会社マーケティングソリューションカンパニー開発本部エクスペリエンスデザイン部テクニカルデザイン

柴田和祈

photo by halfrain

2015.3.10　SCRIPTY#3　～フロントエンド紳士・淑女のための勉強会～

https://www.flickr.com/photos/halfrain/14818814190/in/photolist-ozuibo-6w1JzM-6w5UmJ-aTpqfV-aogEU1-58CCzq-qseei-7mYcu7-5wLrf8-7DGHRn-aogET3-93JtxW-fqJRqv-dQ4xah-5PCgyL-5fin3g-64c6um-7Q43wD-qauTZo-nZLAhu-9n9cgL-pZGGiF-7N1sri-9enkQ-d44bBC-noKTrb-8QYrBh-do4K3c-6E93yv-6u83mT-9WcZXL-7Q7oCA-ohdft5--6juihZ-54fHqn-pYToqa-qVd1Gr-aodU6e-beros-goK5BU-8wh1z-8BzTRN-8KhRUT-8BzUmG-88qSJK-7MgiaN-eyJ5Pd-zw2KV-8BzTLG/

柴田和祈@shibe97

Web Designer / Frontend Engineer

Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止


Service Workerとは

‣ ブラウザのバックグラウンドで動作するJavaScript環境

‣ フォアグラウンドとは別スレッド

‣ サーバへのリクエストをキャッチできる

‣ 動かせる環境は今のところ限られているhttps://jakearchibald.github.io/isserviceworkerready/

‣ localhost、またはhttps環境でのみ動く

https://jakearchibald.github.io/isserviceworkerready/

画面サーバ画面サーバ


画面サーバ画面サーバService Worker


画面サーバService Worker

クライアントサイドサーバサイド



今日やりたいこと

‣ データのキャッシュ

‣ Ajax通信のモックテスト

‣ 値のバリデーションチェック







Ajax通信のモックテストの流れ

1. Service Workerの登録

2. Ajax通信

3. Service Workerがリクエストをキャッチ

4. ダミーJsonを返す

5. 画面に表示


Ajax通信のモックテスト


navigator.serviceWorker.register( "service-‐worker.js", {scope: "./"} ) .then(function(result){ // 登録成功 }) .catch(function(result){ // 登録失敗 });



つまずきポイント#1

root ├── index.html └── sw └── test.json

test.jsonへのリクエストをキャッチしたいからスコープを「/sw」にする

test.jsonへのリクエストをindex.htmlから行なうのでスコープを「/」にする

×○

【スコープ】



‣ Service Workerはスコープ内からのリクエストをキャッチする

‣ リクエスト先がスコープ内にあるかどうかは関係ない

‣ スコープを指定していない場合はルート以下すべてがスコープとなる

【スコープ】



$.ajax({ url: "/success", dataType: "json" }) .done(function(result){ // 成功処理 }) .fail(function(result){ // 失敗処理 });

2. Ajax通信




self.onfetch = function(event){ var requestURL = new URL(event.request.url); if(requestURL.pathname.match("/success")){ ! // success以外のリクエストは素通りさせる ! } };





‣ リクエストのキャッチが可能な状態になるのはロードのタイミング

‣ ワーカーが登録されても、リロードしなければリクエストはキャッチされない

‣ リロードすると、index.htmlのリクエストがキャッチされ、本物のindex.htmlが取得できない

- URL判定でindex.htmlは素通りさせる必要がある

【リクエストのキャッチ】



var result = [ {id: 1, name: "柴田", mail: "[email protected]"},

{id: 2, name: "小川", mail: "[email protected]"},

{id: 3, name: "森本", mail: "[email protected]"} ]; var response = new Response(JSON.stringify(result), { status: 200, statusText: "OK", headers: { "Content-‐Type": "application/json" } }); event.respondWith(response);

4. ダミーJSONを返す




‣ JSON形式で引数に渡してしまうと上手くいかないので、文字列に変換する

‣ ヘッダー情報を与える必要がある

‣ レスポンス処理が行なわれない場合は、予定通りのfetchが行なわれる

【レスポンスの生成】



5. 画面に表示

$.ajax({ url: "/success", dataType: "json" }) .done(function(result){ // 成功処理 }) .fail(function(result){ // 失敗処理 });








値のバリデーションチェックの流れ


2. Ajax通信


4. リクエストのパラメータをチェック

5. チェック結果を返す

6. 画面に表示


値のバリデーションチェック


navigator.serviceWorker.register("service-‐worker.js") .then(function(result){ // 登録成功 }) .catch(function(result){ // 登録失敗 });




$.ajax({ type: "POST", url: "/success", dataType: "json", data: { name: $("#input_name").val(), tel: $("#input_tel").val() } }) .done(function(result){ // 成功処理 }) .fail(function(result){ // 失敗処理 });

2. Ajax通信






self.onfetch = function(event){ var requestURL = new URL(event.request.url); if(requestURL.pathname.match("/success")){ ! // 処理 ! } };



event.request.text().then(function(data){ var jsonData = getConverted(data); // JSON形式に変換

var errors = validate(jsonData); // バリデーション }); !var validate = function(data){ var errors = []; if(data.name === ""){ errors.push("name:empty"); } if(data.tel.match(/[^0-‐9]+/)){ errors.push("tel:notNumber"); } // 等々 return errors; };

4. リクエストのパラメータをチェック




‣ リクエストパラメータは event.request.text() で取得する

‣ console.log で event の中身を見てもパラメータが入っていない

【パラメータのチェック】



5. チェック結果を返す

event.respondWith( event.request.text().then(function(data){ var jsonData = getConverted(data); var errors = validate(jsonData); return new Response(JSON.stringify(errors), { status: 200, statusText: "OK", headers: { "Content-‐Type": "application/json" } }); }) )



つまずきポイント#５

‣ Promise後に respondWith() すると動かない

‣ respondWith() してからPromise処理

‣ respondWith() はonfetch内で1度しか使えない

【Promise処理とレスポンス作成】


まとめ

‣ スコープの指定には注意が必要スコープ内では特定のリクエストのみキャッチさせる

‣ リクエストのキャッチが可能な状態になるのはロードのタイミング

‣ リクエストパラメータは event.request.text() で取得する

‣ Promise処理は respondWith() の後で行なう


参考資料

‣ Google Chromeサンプルhttps://github.com/GoogleChrome/samples/tree/gh-pages/service-worker

‣ Service Workerの紹介http://www.html5rocks.com/ja/tutorials/service-worker/introduction/

‣ Service Workerを使ったXHRのモックテスト http://jxck.hatenablog.com/entry/response-injection

‣ スペシャルアドバイザー @nhiroki_氏 !

https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker

http://www.html5rocks.com/ja/tutorials/service-worker/introduction/

http://jxck.hatenablog.com/entry/response-injection

Technology

Service Workerとの戦い ~ 実装編 ~ #scripty03