狠狠撸

Service Workerとの戦い?
実装編
ヤフー株式会社
マーケティングソリューションカンパニー?
開発本部エクスペリエンスデザイン部テクニカルデザイン?
柴田和祈
photo by halfrain
2015.3.10?SCRIPTY#3?～フロントエンド紳士?淑女のための勉強会～

柴田和祈
@shibe97
Web Designer / Frontend Engineer
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用?転載禁止

Service Workerとは
? ブラウザのバックグラウンドで動作する
JavaScript環境
? フォアグラウンドとは別スレッド
? サーバへのリクエストをキャッチできる
? 動かせる環境は今のところ限られている?
https://jakearchibald.github.io/isserviceworkerready/
? localhost、またはhttps環境でのみ動く

画面サーバ画面サーバ

画面サーバ画面サーバ
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:
?"shibata@scripty.com"},
?

? {id:
?2,
?name:
?"小川",
?mail:
?"ogawa@scripty.com"},
?

? {id:
?3,
?name:
?"森本",
?mail:
?"morimoto@scripty.com"}
?
];
?
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"
?
})
?
?

? //
?成功処理
?
})
?
?

? //
?失敗処理
?
});

値のバリデーションチェックの流れ
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()
?

? }
?
})
?
?

? //
?成功処理
?
})
?
?

? //
?失敗処理
?
});
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_氏
!

狠狠撸

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

Recommended

More Related Content

What's hot (20)

Similar to Service Workerとの戦い ~ 実装編 ~ #scripty03 (20)

More from 驰补丑辞辞!デベロッパーネットワーク (20)

Recently uploaded (11)

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