Introduction to Service Worker

  • Published on
    18-Jul-2015

  • View
    310

  • Download
    0

Embed Size (px)

Transcript

  • *OUSPEVDUJPOUP4FSWJDF8PSLFS

    'SPOUSFOE$POGFSFODF

  • !DI!

  • 4FOTVJ4IPHP

    &OHJOFFSBU$ZCFS"HFOU*OD

    'SPOUFOE

    /PEFKT&4

  • 8%#13&448FC

  • 8FC$PNQPOFOUT

    IUUQIUNMFYQFSUTKQTFSJFTXFCDPNQPOFOUT

  • 8FC

  • J1IPOFJ1IPOF4

    "QQMF"()[

    "QQMF"()[

    .FNPSZ(#

    .FNPSZ.#

  • -5&

    (

    (

    *$5

  • &5-((

  • "# $

  • &%

  • CF8

  • )JHI1FSGPSNBODF8FC'SPOUFOEIUUQTTQFBLFSEFDLDPNBIPNVIJHIQFSGPSNBODFXFCGSPOUFOE

  • )JHI1FSGPSNBODF#SPXTFS/FUXPSLJOHIUUQDIJNFSBMBCTPSFJMMZDPNCPPLT

  • 8FC4FSWJDF8PSLFSJTDPNJOH

  • 8FC

  • 0JOF'JSTU"CFUUFS)5.-6TFS&YQFSJFODF

    IUUQCMPHKPFMBNCFSUDPVLPJOFSTUBCFUUFSIUNMVTFSFYQFSJFODF

  • CF8

  • 8FC

  • "1*OBWJHBUPSPO-JOF

    'JMF4ZTUFN

    8FC4UPSBHF

    JOEFYFE%#

    "QQMJDBUJPO$BDIF

  • OBWJHBUPSPO-JOF

    POMJOFPJOF

  • 'JMF4ZTUFN

    "1*

  • 'JMF4ZTUFN

    ' ( ) * +

    #

    , &

    &&

    -

    - &

    &

    &

  • 8FC4UPSBHF,FZ7BMVF_.#

    "1*

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

  • 8FC4UPSBHF

    ' ( ) * +

    #

    , -

    --

    --

    - -

    -

  • JOEFYFE%#,FZ7BMVF_.#

    "1*

  • 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' }); };

  • JOEFYFE%#

    ' ( ) * +

    #

    , -

    --

    --

    - -

    -

  • "QQMJDBUJPO$BDIF

  • 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

  • "QQMJDBUJPO$BDIF

  • "QQMJDBUJPO$BDIF)5.-

    +BWB4DSJQU

  • POMJOF"1*4UPSBHF"1*

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

  • "QQMJDBUJPO$BDIF

  • "1*OBWJHBUPSPO-JOF

    'JMF4ZTUFN

    8FC4UPSBHF

    JOEFYFE%#

    "QQMJDBUJPO$BDIF

    4FSWJDF8PSLFS/FX

  • 4FSWJDF8PSLFSJTDPNJOH

  • 4FSWJDF8PSLFS+BWB4DSJQU

  • 4FSWJDF8PSLFS+BWB4DSJQU8PSLFS

    )551

    'FUDI"1*

    $BDIF"1*

    #BDLHSPVOE4ZOD

    8FC1VTI"1*

  • +BWB4DSJQU8PSLFS

  • 4FSWJDF8PSLFS

    4FSWJDF8PSLFS

    4FSWJDF8PSLFS

  • 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

  • )551

  • 4FSWJDF8PSLFS

    )551

    GFUDI

  • 4FSWJDF8PSLFS

    )551

  • self.addEventListener('fetch', function (e) { console.log('Request in Browser');

    e.respondWith( new Response('Not Found', { status: 404 }) ); });

    JO4FSWJDF8PSLFS

  • 'FUDI"1*

  • 'FUDI"1*"1*

    1SPNJTF"1*

    9)3

    4FSWJDF8PSLFS

  • 4FSWJDF8PSLFS

    'FUDI"1*

    'FUDI"1*

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

    JO4FSWJDF8PSLFS

  • 'FUDI"1*8FC'FUDI

    IUUQKYDLIBUFOBCMPHDPNFOUSZXIBUXHGFUDI

  • $BDIF"1*

  • $BDIF"1*"1*

    1SPNJTF"1*

    4FSWJDF8PSLFS

  • 4FSWJDF8PSLFS

    $BDIF"1*

    $BDIF"1*

    $BDIF"1*

  • 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

  • 4FSWJDF8PSLFSDBDIFQPMZMMIUUQHJUIVCDPNDPPOTUBDBDIFQPMZMM

  • #BDLHSPVOE4ZOD

  • 4FSWJDF8PSLFS

    TZOD

    TZOD

    TZOD

  • 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

  • 8FC1VTI"1*

  • 4FSWJDF8PSLFS

    1VTI

    1VTI

    QVTI

    )5511VTI

  • 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

  • 4FSWJDF8PSLFS)5518FC1VTI

    IUUQEIBUFOBOFKQKPWJ

  • )551444-

  • 8FC4FSWJDF8PSLFS8FC1VTI

  • 4FSWJDF8PSLFS

    ' ( ) * +

    #

    ,-

    -

    -

    &&

    &

    -

  • 4FSWJDF8PSLFS

  • 4FSWJDF8PSLFS$BDIF"1*

    4FSWJDF8PSLFS

    $BDIF"1*

  • 4FSWJDF8PSLFS$BDIF"1*

    $BDIF"1*

    4FSWJDF8PSLFS

  • 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

  • IUUQTDIHJUIVCJPUPEP

  • 5IBOLZPV!DI

    .

    !DI

    / DIOFU