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

441 Views

March 11, 15

#scripty03 #Service Worker #Ajax #モックテスト #バリデーション #フロントエンド開発

スライド概要

2015/3/10の勉強会にて発表された資料です。

SCRIPTY#3　～フロントエンド紳士・淑女のための勉強会～
http://scripty.connpass.com/event/12374/

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 159.9K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 85.4K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 72.6K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 57.4K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 34.8K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 28.9K
各ページのテキスト
1.

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

2.

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

3.

Service Workerとは ‣ ブラウザのバックグラウンドで動作する JavaScript環境 ‣ フォアグラウンドとは別スレッド ‣ サーバへのリクエストをキャッチできる ‣ 動かせる環境は今のところ限られている https://jakearchibald.github.io/isserviceworkerready/ ‣ localhost、またはhttps環境でのみ動く Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

4.

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

5.

画面 画面 サーバ サーバ Service Worker Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

6.

クライアントサイド 画面 サーバサイド サーバ Service Worker Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

7.

今日やりたいこと ‣ データのキャッシュ ‣ Ajax通信のモックテスト ‣ 値のバリデーションチェック Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

8.

今日やりたいこと ‣ データのキャッシュ ‣ Ajax通信のモックテスト ‣ 値のバリデーションチェック Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

9.

Ajax通信のモックテストの流れ 1. Service Workerの登録 2. Ajax通信 3. Service Workerがリクエストをキャッチ 4. ダミーJsonを返す 5. 画面に表示 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

10.
[beta] 
Ajax通信のモックテスト

1. Service Workerの登録

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

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

つまずきポイント#1 【スコープ】 root ├── index.html └── sw └── test.json test.jsonへのリクエストをキャッチしたいから スコープを「/sw」にする ○ test.jsonへのリクエストをindex.htmlから行なうので スコープを「/」にする Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

12.

つまずきポイント#1 【スコープ】 ‣ Service Workerはスコープ内からのリクエストを キャッチする ‣ リクエスト先がスコープ内にあるかどうかは関係ない ‣ スコープを指定していない場合はルート以下 すべてがスコープとなる Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

13.
[beta] 
Ajax通信のモックテスト

2. Ajax通信

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

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

Ajax通信のモックテスト 3. Service Workerがリクエストをキャッチ self.onfetch  =  function(event){     var  requestURL  =  new  URL(event.request.url);     if(requestURL.pathname.match("/success")){   !     //  success以外のリクエストは素通りさせる   !   }   }; Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

15.

つまずきポイント#2 【リクエストのキャッチ】 ‣ リクエストのキャッチが可能な状態になるのは ロードのタイミング ‣ ワーカーが登録されても、 リロードしなければリクエストはキャッチされない ‣ リロードすると、index.htmlのリクエストが キャッチされ、本物のindex.htmlが取得できない - URL判定でindex.htmlは素通りさせる必要がある Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

16.
[beta] 
Ajax通信のモックテスト

4. ダミーJSONを返す

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);
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
17.

つまずきポイント#3 【レスポンスの生成】 ‣ JSON形式で引数に渡してしまうと上手くいかない ので、文字列に変換する ‣ ヘッダー情報を与える必要がある ‣ レスポンス処理が行なわれない場合は、予定通りの fetchが行なわれる Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

18.
[beta] 
Ajax通信のモックテスト

5. 画面に表示

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

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

今日やりたいこと ‣ データのキャッシュ ‣ Ajax通信のモックテスト ‣ 値のバリデーションチェック Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

20.

値のバリデーションチェックの流れ 1. Service Workerの登録 2. Ajax通信 3. Service Workerがリクエストをキャッチ 4. リクエストのパラメータをチェック 5. チェック結果を返す 6. 画面に表示 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

21.

値のバリデーションチェック 1. Service Workerの登録 navigator.serviceWorker.register("service-­‐worker.js")   .then(function(result){     //  登録成功   })   .catch(function(result){     //  登録失敗   }); Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

22.
[beta] 
値のバリデーションチェック

2. Ajax通信
$.ajax({	
  
	
   type:	
  "POST",	
  
	
   url:	
  "/success",	
  
	
   dataType:	
  "json",	
  
	
   data:	
  {	
  
	
   	
   name:	
  $("#input_name").val(),	
  
	
   	
   tel:	
  $("#input_tel").val()	
  
	
   }	
  
})	
  
.done(function(result){	
  
	
   //	
  成功処理	
  
})	
  
.fail(function(result){	
  
	
   //	
  失敗処理	
  
});
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
23.

値のバリデーションチェック 3. Service Workerがリクエストをキャッチ self.onfetch  =  function(event){     var  requestURL  =  new  URL(event.request.url);     if(requestURL.pathname.match("/success")){   !     //  処理   !   }   }; Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

24.
[beta] 
値のバリデーションチェック

4. リクエストのパラメータをチェック
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;	
  
};
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
25.

つまずきポイント#4 【パラメータのチェック】 ‣ リクエストパラメータは event.request.text() で取得する ‣ console.log で event の中身を見ても パラメータが入っていない Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

26.
[beta] 
値のバリデーションチェック

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"	
  
	
   	
   	
   }	
  
	
   	
   });	
  
	
   })	
  
)	
  

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

つまずきポイント#５ 【Promise処理とレスポンス作成】 ‣ Promise後に respondWith() すると動かない ‣ respondWith() してからPromise処理 ‣ respondWith() はonfetch内で1度しか使えない Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

28.

まとめ ‣ スコープの指定には注意が必要 スコープ内では特定のリクエストのみキャッチさせる ‣ リクエストのキャッチが可能な状態になるのは ロードのタイミング ‣ リクエストパラメータは event.request.text() で取得する ‣ Promise処理は respondWith() の後で行なう Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

29.

参考資料 ‣ 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̲氏 ! Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止