API Test with Service Worker

2dfd5e0acd70adff0e2efc745d992396?s=47 Yohei Munesada
February 21, 2015

API Test with Service Worker

LT on Frontrend Conference Final at Feb. 2015.
Service Worker is not only for Offline, but for many use-cases.
Whether you can go on front-end, it depends on your creativities.

2dfd5e0acd70adff0e2efc745d992396?s=128

Yohei Munesada

February 21, 2015
Tweet

Transcript

  1. 9.

    Service Worker ✦ a kind of Web Worker, proxies HTTP

    Requests. /* Register @main.js */ navigator.serviceWorker.register('./sw.js') /* Fetch Event @sw.js */ self.onfetch = function(event) { return event.respondWith(…); }
  2. 10.

    Message Channel ✦ messaging between a window and a worker.

    /* @main.js */ var messageChannel = new MessageChannel(); navigator.serviceWorker.controller .postMessage(‘hello’, [messageChannel.port1]); /* @sw.js */ self.onmessage = function (event) { console.log(event.data); // ‘hello’ }
  3. 11.
  4. 12.

    ✦ index.html ✦ jQuery.js ✦ main.js ✦ jasmine.css ✦ jasmine.js

    ✦ jasmine-html.js ✦ boot.js ✦ sw.js Files
  5. 13.

    ✦ index.html ✦ jQuery.js ✦ main.js ✦ jasmine.css ✦ jasmine.js

    ✦ jasmine-html.js ✦ boot.js ✦ sw.js Files
  6. 15.

    ✦ get fullName through Promise Test Target function getFullName (id)

    { return new Promise(function (done, fail) { $.getJSON('/api/users/' + id).then(function (user) { done(user.firstName + ‘ ’ + user.lastName); }).fail(fail); }); }
  7. 17.

    Test Data var testData = { '/api/users/1': { firstName: ‘Yohei',

    lastName: ‘Munesada’ }, '/api/users/2': {firstName: 'Tomoko', lastName: null}, '/api/users/3': {firstName: null, lastName: 'Yamada'}, '/api/users/4': {firstName: null, lastName: null} };
  8. 19.

    ✦ Regist ServiceWorker, Set mock data BeforeEach - main.js beforeEach(function

    (done) { navigator.serviceWorker.register('./sw.js').then(function () { var mc = new MessageChannel(); mc.port2.onmessage =done; var str = JSON.stringify(testData); navigator.serviceWorker.controller .postMessage(str, [messageChannel.port1]); })catch(function () { done(false); }); });
  9. 20.
  10. 21.

    ✦ Unregist Service Worker AfterEach - main.js afterEach(function (done) {

    navigator.serviceWorker .getRegistration().then(function (reg) { reg.unregister().then(done); }); });
  11. 22.
  12. 23.

    ✦ Receive message, Setup mock data, and Replay. Setup Mock

    Data - sw.js self.onmessage = function (event) { // Mockσʔλड͚औΓͱԠ౴ var mockObject = JSON.parse(event.data); if (event.ports) { event.ports[0].postMessage('Mock Data Recived'); } // Mockڍಈͷఆٛ self.onfetch = function(event) {…} };
  13. 24.

    ✦ HTTP Jack onfetch - sw.js self.onfetch = function(event) {

    var path = (new URL(event.request.url)).pathname; // MockΛฦ٫͢Δ if (mockObject && mockObject[path]) { var response = _createResponse(path); return event.respondWith(response); // ϦΫΤετΛεϧʔ͢Δ } else { return; } };
  14. 25.

    ✦ Create mock response createResponse - sw.js function _createResponse (path)

    { var mock = mockObject[path]; var body = JSON.stringify(mock); var head = { status: 200, statusText: 'OK', headers: { 'Content-Type': 'application/json' } }; return new Response(body, head); }
  15. 26.
  16. 27.