$30 off During Our Annual Pro Sale. View Details »

Introduction to Service Worker

Shogo Sensui
February 21, 2015

Introduction to Service Worker

2015/2/21に開催されたFrontrend Conferenceの「Introduction to Service Worker」のセッションの資料です。

Shogo Sensui

February 21, 2015
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. *OUSPEVDUJPOUP
    4FSWJDF8PSLFS
    'SPOUSFOE$POGFSFODF

    View Slide

  2. !DI
    !

    View Slide

  3. 4FOTVJ4IPHP
    &OHJOFFSBU$ZCFS"HFOU *OD
    'SPOUFOEⰋ菙
    /PEFKTהַ&4הַ

    View Slide

  4. ؿٗٝزؒٝسؒٝآص،
    균䧭铣劤
    8%#13&44
    8FCؿٗٝزؒٝس剑⵸简

    View Slide

  5. 㛇燉ַ׵׻ַ׷
    8FC$PNQPOFOUT䗡䎿鍑铡
    ։➬圫ַ׵㹋鄲תד椚鍑ׅ׷։
    IUUQIUNMFYQFSUTKQTFSJFTXFCDPNQPOFOUT

    View Slide

  6. 8FC׾《׶䋆ֻ
    橆㞮ך鹌⻉

    View Slide

  7. طحزٙ٦ؙ
    ה
    ع٦سؐؑ،

    View Slide

  8. ع٦سؐؑ،ךألحؙ䱿獳
    J1IPOF
    J1IPOF4
    "QQMF"
    ()[
    "QQMF"
    ()[
    .FNPSZ
    (#
    .FNPSZ
    .#

    View Slide

  9. ػا؝ٝ׮ׁ׷ֿהזָ׵
    ٌغ؎ٕ׮ع؎ألحؙ⻉ָ
    滠㹋ח鹌׿דֹגְ׷

    View Slide

  10. ٌغ؎ٕر٦ة㔐简ךⵃ欽罏
    劢⢪欽

    -5&

    (

    (

    ˟筨⹡満չ䎂䧭䎃晛䞔㜠鸐⥋涯剅*$5ךⵃ欽橆㞮ך㢌⻉պ

    View Slide

  11. ( -5&
    ך兛⿹ָ鹌׬׮ךך
    (כה劢׌ח㢳ְ
    كأزؒؿؓ٦ز׌׃˘

    View Slide

  12. رغ؎أה㛇㖑㽷הך騃ꨄ
    ꟦ח֮׷黪誊暟䒉暟٥瑞孡
    ٖ؎ذٝء٦ך銲㔓
    "
    # $

    View Slide

  13. طحزٙ٦ؙכ
    ع٦سؐؑ،קו
    㸜㹀׃גְזְ
    %
    &

    View Slide

  14. 頾蚚׾ַֽ׷ץֹכ
    طحزٙ٦ؙדכזֻ
    ع٦سؐؑ،

    View Slide

  15. ٌغ؎ٕرغ؎أך兛⿹װ
    8FC䪮遭ך鹌⻉הⰟח
    ػؿؓ٦وٝأָ㉏׻׸׷

    View Slide

  16. )JHI1FSGPSNBODF8FC'SPOUFOE
    IUUQTTQFBLFSEFDLDPNBIPNVIJHIQFSGPSNBODFXFCGSPOUFOE

    View Slide

  17. )JHI1FSGPSNBODF#SPXTFS/FUXPSLJOH
    IUUQDIJNFSBMBCTPSFJMMZDPNCPPLT

    View Slide

  18. 馄㣐✲կד׮ծ
    ؔؿٓ؎ٝך儗ח歗꬗ָ
    溪׏涯זֿהכ劢鍑寸˘կ

    View Slide

  19. ؔؿٓ؎ٝؿ؋٦أزהכ
    ؔؿٓ؎ٝ8FC׾㹋植ׅ׷䪮遭
    4FSWJDF8PSLFSJTDPNJOH

    View Slide

  20. ΦϑϥΠϯϑΝʔετͱ͸

    View Slide

  21. ؔؿٓ؎ٝ׾⵸䲿ח
    8FC،فٔ׾⡲׷ֿה

    View Slide

  22. 0JOF'JSTU
    ˊ"CFUUFS)5.-6TFS&YQFSJFODF
    IUUQCMPHKPFMBNCFSUDPVLPJOFSTUBCFUUFSIUNMVTFSFYQFSJFODF

    View Slide

  23. ؔؿٓ؎ٝ8FCךًٔحز
    ؔؿٓ؎ٝד׮،ؙإأדֹ׷
    琎噰涸חٍؗحءُ׾⿫撑ׅ׷ךד넝鸞
    طحزٙ٦ؙ䌒㚖׮眍秈〳腉

    View Slide

  24. ؔؿٓ؎ٝ׾꣇ּ׌ֽדכזְ
    㸣Ⰻזؔؿٓ؎ٝ׌ֽדכזֻ
    鴟㞮ך㖑װ㖑♴ꉟך״ֲז籬ָ׶ꨇְ
    橆㞮ח㼎׃ג׮؟ه٦زדֹ׷

    View Slide

  25. ط؎ذ؍ـך䮶׷莸ְח鵚בֻ
    ؎ٝأز٦ٕ儗ח䲽歗ٔا٦أ׾然⥂
    ؔؿٓ؎ٝ儗ח׮歗꬗ָ溪׏涯חז׵זְ
    鸐⥋דֹזַ׏׋ֿה׾䠐陎ׇׁזְ鏣鎘

    View Slide

  26. ؔؿٓ؎ٝכ堣腉ךמהא
    ٔ،ٕة؎ي䚍׾銲実ׁ׸׷،فٔחכ♶ぢֹ
    铣׫⚥䗰٥⽯儗䚍ָ♶銲ז箟꧊ד֮׸ל˘
    ،فٔ؛٦ءّٝך堣腉ךמהאח麓ֺזְ

    View Slide

  27. ؔؿٓ؎ٝ⻉ָ姻纏דכזְ

    View Slide

  28. ד׮ծ嗚鎢כ⳿勻׷

    View Slide

  29. ؔؿٓ؎ٝ8FC׾㹋植ׅ׷䪮遭

    View Slide

  30. ꟼ鸬ׅ׷ـٓؐؠ"1*
    OBWJHBUPSPO-JOF
    'JMF4ZTUFN
    8FC4UPSBHF
    JOEFYFE%#
    "QQMJDBUJPO$BDIF

    View Slide

  31. OBWJHBUPSPO-JOF
    ؔٝٓ؎ַٝוֲַ׾《䖤
    POMJOFPJOF؎كٝز
    ـٓؐؠ؟ه٦ز׮קר㸣✪

    View Slide

  32. 'JMF4ZTUFN
    㣐ֹז؟؎ؤךؿ؋؎ٕך⥂㶷ぢֽ
    ꬊず劍㘗"1*
    زٓٝؠؙءّٝꬊ㼎䘔

    View Slide

  33. 'JMF4ZTUFN
    ' ( ) * +
    #
    , &
    &
    &
    -
    - &
    &


    &

    View Slide

  34. 8FC4UPSBHF
    ,FZ7BMVF䕎䒭דر٦ة׾⥂㶷_.#
    ず劍㘗ךءٝفٕז"1*
    㼰ꆀךر٦ة׾⵸䲿ה׃גְ׷

    View Slide

  35. var value = localStorage['key'];
    var json = JSON.parse(value);
    localStorage['key'] = JSON.stringify(json);

    View Slide

  36. 8FC4UPSBHF
    ' ( ) * +
    #
    , -
    -
    -
    -
    -
    - -
    -


    View Slide

  37. JOEFYFE%#
    ,FZ7BMVF䕎䒭דر٦ة׾⥂㶷_.#
    ꬊず劍㘗ךװװ醱꧟ז"1*
    ؎ٝرحؙأ׾⢪׏׋넝鸞ז،ؙإأ
    غ٦آّصؚٝהزٓٝؠؙءّٝ

    View Slide

  38. var db;
    var objectStore;
    var req = window.indexedDB.open('dbname', 3);
    req.onsuccess = function(event) {
    db = event.target.result;
    };
    req.onupgradeneeded = function(event) {
    db = event.target.result;
    objectStore = db.createObjectStore('name', {
    keyPath: 'key'
    });
    };

    View Slide

  39. JOEFYFE%#
    ' ( ) * +
    #
    , -
    -
    -
    -
    -
    - -
    -


    View Slide

  40. "QQMJDBUJPO$BDIF
    وصؿؑأزؿ؋؎ٕחٍؗحءُ׾㹀纏

    View Slide

  41. CACHE MANIFEST
    # Resource to cache
    CACHE:
    index.html
    stylesheet.css
    image.png
    script.js
    # Resource to bypass
    NETWORK:
    login.php
    /api/data
    # Fallback URLs
    FALLBACK:
    / /offline.html

    View Slide

  42. ⽃秪ח鋅ִג醱꧟ז
    "QQMJDBUJPO$BDIF㉏겗

    View Slide

  43. "QQMJDBUJPO$BDIFךꨇ׃ׁ
    㹀纏⯋ך)5.-ل٦آ׾ٍؗحءُ
    ٍؗحءُ׾稢װַח؝ٝزٗ٦ٕ♶〳
    +BWB4DSJQUַ׵ٍؗحءُך乼⡲♶〳
    长ղך➬圫♳ծ鏣鎘ָ䓼ⵖׁ׸׷

    View Slide

  44. POMJOF"1*4UPSBHF"1*

    View Slide

  45. if (navigator.onLine) {
    $.ajax({
    url: '/api/data',
    method: 'get'
    }).done(function (data) {
    render(data);
    });
    } else {
    var cacheData = localStorage.getItem('key');
    render(JSON.parse(cacheData));
    }

    View Slide

  46. "QQMJDBUJPO$BDIFד갹䓸׷

    View Slide

  47. ꟼ鸬ׅ׷ـٓؐؠ"1*
    OBWJHBUPSPO-JOF
    'JMF4ZTUFN
    8FC4UPSBHF
    JOEFYFE%#
    "QQMJDBUJPO$BDIF
    4FSWJDF8PSLFS̒/FX

    View Slide

  48. 4FSWJDF8PSLFSJTDPNJOH

    View Slide

  49. 넝堣腉זٗ٦ٕؕفٗؗء
    4FSWJDF8PSLFSכ+BWB4DSJQUד㹋鄲ׅ׷
    ٗ٦ٕؕفٗؗءך״ֲז׮ך

    View Slide

  50. 4FSWJDF8PSLFS
    +BWB4DSJQU8PSLFSךמהא
    )551ؙٔؒأزך嗚濼ה何甑
    'FUDI"1*׾⢪׏׋ٔا٦أך《䖤
    $BDIF"1*׾⢪׏׋ٍؗحءُך盖椚
    غحؙؚٓؐٝسず劍#BDLHSPVOE4ZOD
    ؟٦غ٦فحءُך「⥋8FC1VTI"1*

    View Slide

  51. +BWB4DSJQU8PSLFSךמהא

    View Slide

  52. ـٓؐؠ
    4FSWJDF8PSLFS
    4FSWJDF8PSLFSך涫ꐮ
    4FSWJDF8PSLFS׾涫ꐮ

    View Slide

  53. var sw = navigator.serviceWorker;
    sw.register('sw.js').then(function (res) {
    console.log('sw.js is installed!');
    }, function (error) {
    console.log('sw.js is not installed...');
    });
    JO#SPXTFS

    View Slide

  54. )551ؙٔؒأزך嗚濼ה何甑

    View Slide

  55. ـٓؐؠ
    4FSWJDF8PSLFS
    ؙٔؒأز嗚濼
    ؟٦غ٦
    )551ؙٔؒأز涪欰
    չֶծؙٔؒأز׌պ
    GFUDI؎كٝز涪欰

    View Slide

  56. ـٓؐؠ
    4FSWJDF8PSLFS
    ؙٔؒأز何甑
    ؟٦غ٦
    )551ؙٔؒأز涪欰
    չ⹧䩛חٖأهٝأպ

    View Slide

  57. self.addEventListener('fetch', function (e) {
    console.log('Request in Browser');
    e.respondWith(
    new Response('Not Found', {
    status: 404
    })
    );
    });
    JO4FSWJDF8PSLFS

    View Slide

  58. 'FUDI"1*׾⢪׏׋
    ٔا٦أך《䖤

    View Slide

  59. 'FUDI"1*הכ
    ٔا٦أ《䖤ך倜׋ז"1*
    1SPNJTFك٦أך"1*鏣鎘
    9)3״׶⡚ٖكٕ
    ➙ךהֿ׹4FSWJDF8PSLFS؝ٝذؗأز㼔欽

    View Slide

  60. 4FSWJDF8PSLFS
    'FUDI"1*ךⵃ欽
    ؟٦غ٦
    'FUDI"1*ד
    ٔا٦أ׾《䖤

    View Slide

  61. fetch('/url/json').then(function (res) {
    return res.json();
    }).then(function (json) {
    console.log(json);
    });
    JO4FSWJDF8PSLFS

    View Slide

  62. 'FUDI"1*鍑铡ծת׋כ
    8FCחְֶג'FUDIׅ׷הכ⡦ַ
    IUUQKYDLIBUFOBCMPHDPNFOUSZXIBUXHGFUDI

    View Slide

  63. $BDIF"1*׾⢪׏׋
    ٍؗحءُך盖椚

    View Slide

  64. $BDIF"1*הכ
    ٔا٦أך宕竲涸ٍؗحءُ׾ׅ׷"1*
    1SPNJTFك٦أך"1*鏣鎘
    ➙ךהֿ׹4FSWJDF8PSLFS؝ٝذؗأز㼔欽

    View Slide

  65. 4FSWJDF8PSLFS
    $BDIF"1*ךⵃ欽
    $BDIF"1*
    $BDIF"1*׾⢪׏ג
    ٔا٦أ׾涫ꐮ٥⿫撑

    View Slide

  66. caches.open('cache-key').then(function(cache) {
    return cache.addAll([
    'js/app.js',
    'css/app.css',
    'img/image.png'
    ]);
    });
    caches.match(e.request).then(function (res) {
    return res;
    });
    JO4FSWJDF8PSLFS

    View Slide

  67. 4FSWJDF8PSLFSDBDIFQPMZMM
    IUUQHJUIVCDPNDPPOTUBDBDIFQPMZMM

    View Slide

  68. غحؙؚٓؐٝسず劍
    #BDLHSPVOE4ZOD

    View Slide

  69. ـٓؐؠ
    4FSWJDF8PSLFS
    涫ꐮ儗ח♧㹀ךワ劍ד
    TZOD؎كٝز涪抟鏣㹀
    TZOD؎كٝزך㹀劍涸ז涪抟
    TZOD؎كٝز涪欰

    View Slide

  70. var sw = navigator.serviceWorker;
    sw.ready.then(function(reg) {
    reg.syncManager.register({
    id: "periodicSync",
    minDelay: 60 * 60 * 1000,
    minPeriod: 12 * 60 * 60 * 1000,
    allowOnBattery: true
    idleRequired: false
    }).then(function() {
    // Success
    });
    });
    JO#SPXTFS

    View Slide

  71. ؟٦غ٦فحءُך「⥋
    8FC1VTI"1*

    View Slide

  72. 4FSWJDF8PSLFS
    1VTIر٦ة「⥋
    1VTI؟٦غ٦
    QVTI؎كٝز涪欰
    )551הַד
    ؟٦غ٦1VTI

    View Slide

  73. var sw = navigator.serviceWorker;
    sw.ready.then(function(reg) {
    reg.pushManager.subscribe().then(
    function(subscription) {
    // Success
    console.log(subscription.subscriptionId);
    console.log(subscription.endpoint);
    }
    });
    });
    JO#SPXTFS

    View Slide

  74. 4FSWJDF8PSLFSה)551ָⴖ׶Ꟛֻ
    倜׃ְ8FC1VTIך⚅歲ר׍ר׍傈鎸
    IUUQEIBUFOBOFKQKPWJ

    View Slide

  75. 넝堣腉ײִ)5514ָ䗳갭
    鸐⥋鷿⚥ד何甑ׁ׸זְ״ֲחկ
    Ꟛ涪כٗ٦ٕؕمأزדծꂁ⥋כ44-⵸䲿կ

    View Slide

  76. ؔؿٓ؎ٝ8FCך׋׭׌ֽ
    דכזְկ4FSWJDF8PSLFSך⯋ד
    8FC1VTIװغحؙؚٓؐٝسず劍׾㹋植ׅ׷

    View Slide

  77. 4FSWJDF8PSLFSך㹋鄲朐屣
    ' ( ) * +
    #
    ,
    -
    -
    -


    &
    &
    &
    -

    View Slide

  78. 4FSWJDF8PSLFS׾⢪׏׋
    ٔا٦أٍؗحءُך؎ً٦آ

    View Slide

  79. ـٓؐؠ
    ؟٦غ٦
    鸐䌢ٕ٦ز
    ؙٔؒأز׃ג
    ٖأهٝأ׾׮׵ֲ

    View Slide

  80. ـٓؐؠ
    ؟٦غ٦
    4FSWJDF8PSLFS
    $BDIF"1*
    4FSWJDF8PSLFS
    ד劢ٍؗحءُ
    $BDIF"1*׾⢪׏ג
    ٔا٦أ׾⥂㶷

    View Slide

  81. ـٓؐؠ
    ؟٦غ٦
    4FSWJDF8PSLFS
    $BDIF"1*
    $BDIF"1*ַ׵⿫撑׃
    ٔا٦أ׾鵤⽱
    4FSWJDF8PSLFS
    דٍؗحءُ幥

    View Slide

  82. e.respondWith(
    caches.open(CACHE_KEY).then(function (cache) {
    return cache.match(e.request)
    .then(function (response) {
    if (response) {
    return response;
    } else {
    return fetch(e.request.clone())
    .then(function (res) {
    cache.put(e.request, res.clone());
    return res;
    });
    }
    });
    })
    );
    JO4FSWJDF8PSLFS

    View Slide

  83. IUUQTDIHJUIVCJPUPEP

    View Slide

  84. ؔؿٓ؎ٝהְֲ倜׋ז
    ػٓت؎ي׾「ֽⰅ׸״ֲ

    View Slide

  85. 5IBOLZPV
    !DI
    .
    !
    DI
    / DIOFU

    View Slide