Service Worker 201 (한국어)

  • Published on
    08-Jan-2017

  • View
    811

  • Download
    2

Embed Size (px)

Transcript

  • 201@cwdoh, GDE for Web

    1

    https://twitter.com/cwdoh

  • Remind 101 .

    2

    http://www.slideshare.net/cwdoh/service-worker-101

  • UI .

    ,

    ,

    () .

    3

  • (Shared)

    .

    , SharedWorker .

    4

    https://developer.mozilla.org/en-US/docs/Web/API/SharedWorkerhttp://w3c.github.io/html/browsers.html#sec-browsing-contexts

  • DOM

    window

    5

  • , .

    6

    https://www.w3.org/TR/service-workers/

  • ,

    , ,

    7

  • (Dedicated)/

    8

  • : , ,

    9

  • : , ,

    , (Daemon)

    ,

    10

    file:///Volumes/Working/private/talk-materials/html5/serviceworker/201/file:///Volumes/Working/private/talk-materials/html5/serviceworker/201/

  • !

    , .

    11

  • Service Worker HTTPS

    (maninthemiddleattack) ,127.0.0.1 , localhost SSL .

    12

  • Dive into 201Warmup

    13

  • 14

  • ? . :)

    .postMessage()

    .onmessage

    15

    https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessagehttps://developer.mozilla.org/en-US/docs/Web/Events/message

  • index.html

    navigator.serviceWorker.controller.postMessage('hello,worker!');

    sw.js

    //.self.addEventListener('message',e=>{console.log('Workergot:'+e.data);});

    16

  • navigator.serviceWorker.addEventListener('message',e=>{console.log('pagegot:'+e.data);});

    sw.js

    self.addEventListener('message',e=>{//postMessagetosourcecliente.source.postMessage('hello,page!');});

    17

  • serviceWorker.register()

    18

    https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/registerhttps://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration

  • navigator.serviceWorker.register('/sw.js')//promise!!.then(function(registration){//.});

    19

  • scope

    url

    varoptions={scope:'./statics'};

    navigator.serviceWorker.register('/sw.js',options).then(function(registration){//gettingregisterationinfo});

    20

  • importScripts()

    //loadingsinglescriptself.importScripts('perfmatters.js');

    //importscriptforarithmeticoperation:)importScripts('add.js','minus.js','mult.js','divide.js');

    21

    https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts

  • .getRegistration()

    .getRegistrations()

    .ready

    .controller

    22

    https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/getRegistrationhttps://www.w3.org/TR/service-workers/#navigator-service-worker-getRegistrationshttps://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/readyhttps://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/controller

  • ! :p

    23

  • 1. Caches

    2. .waitUntil()

    3. fetch

    24

    https://w3c.github.io/ServiceWorker/#cache-objectshttps://w3c.github.io/ServiceWorker/#wait-until-methodhttps://w3c.github.io/ServiceWorker/#fetch-event-section

  • Cache Storage

    Cache . API Promise .

    .match()

    .has()

    .open()

    .delete()

    .keys()

    25

    https://developer.mozilla.org/en-US/docs/Web/API/CacheStoragehttps://developers.google.com/web/fundamentals/getting-started/primers/promises

  • Named

    CacheStoragesServiceWorker_Acache.1cache.2cache.3ServiceWorker_Bcache.1cache.2cache.3

    26

  • .waitUntil()

    _ _ .

    install installing

    activate activating

    27

    https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil

  • self.addEventListener('install',function(event){predownloadAssets().then(function(){ console.log('finisheddownloadingawesomeresoures.');});});

    28

  • : (activated)

    29

  • : !! :)

    self.addEventListener('install',function(event){//waitUntil()installevent.waitUntil(predownloadAssets().then(function(){ console.log('finisheddownloadingawesomeresoures.');}));});

    30

  • .waitUntil() Promise .

    31

  • .onfetch

    fetch .

    32

    https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onfetch

  • FetchEvent

    .onfetch

    .respondWith()

    33

    https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent

  • .respondWith()

    () .

    self.addEventListener('fetch',function(event){//customresponsewithresponsegeneratingcodeevent.respondWith(//responseliketypicalfetchresponsemodelfetch(event.request).then(function(res){returnres;}).catch(function(error){throwerror;}));});

    34

    https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/respondWith

  • install prefetch

    fetct

    35

    https://goo.gl/H1R0mU

  • AndroidManifest.xml .plist >

    36

    https://developer.mozilla.org/ko/docs/Web/Apps/Developing/Manifest/Manifest

  • JSON _ , , , , _ .

    37

    https://www.w3.org/TR/appmanifest/

  • JSON

    38

  • 1. short_name, name, icons

    {"short_name":"Mysuperapp",...}

    2.

    39

  • (Add to homescreen)

    .

    40

  • ,

    41

  • URL

    42

  • manifest.json

    {"name":"","short_name":"HelloWorld","start_url":".","display":"standalone","icons":[{"src":"images/touch/homescreen48.png","sizes":"48x48","type":"image/png"},//...}

    43

  • index.html

    .........

    44

  • . .

    {//,UI"browser""display":"standalone",//"orientation":"landscape",//UI()"theme_color":"#2196F3"}

    45

    https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/?hl=en#set_the_launch_style

  • 46

    https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/images/add-to-home-screen.gif

  • 47

    https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/images/add-to-home-screen.gif

  • short_name

    name

    144x144 png icon (mime type: image/png)

    start_url

    HTTPS

    , 5

    48

  • chrome://flags

    #bypassappbannerengagementchecks

    #enableaddtoshelf

    49

  • : manifest.json

    {"name":"MysuperpoweredWebApp","short_name":"HelloWorld","start_url":".","display":"standalone","icons":[{"src":"images/touch/homescreen48.png","sizes":"48x48","type":"image/png"},//...awesomedatatodefineyourwebapp],"related_applications":[{"platform":"web"},{"platform":"play","url":"https://play.goo../details?id=com.android.chrome"}]}

    50

  • A long time ago in a galaxy far, far away...there are spams

    51

  • 1. Pushmanager

    2. Pushsubscription

    3. Pushevent

    4. Pushmessagedata

    52

    https://www.w3.org/TR/push-api/#pushmanager-interfacehttps://www.w3.org/TR/push-api/#pushsubscription-interfacehttps://www.w3.org/TR/push-api/#pushmessagedata-interfacehttps://www.w3.org/TR/push-api/#pushmessagedata-interface

  • 1. :

    2. :

    3. :

    4. :

    5. :

    6. :

    53

    https://www.w3.org/TR/push-api/sequence_diagram.png

  • source: Web Fundamentals54

    https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications

  • Push manager

    subscribe(options):

    getSubscription():

    permissionState(options):

    55

  • Push subscription

    URL ,

    56

  • Push event

    onpush

    .data

    57

    https://developer.mozilla.org/en-US/docs/Web/API/PushEvent

  • .onpush

    //pusheventhandlerself.addEventListener('push',function(event){console.log('Pushmessagereceived',event);

    event.waitUntil(//shownotificationself.registration.showNotification(title,description));});

    58

    https://www.w3.org/TR/push-api/#the-push-event

  • //notificationclick.self.addEventListener('notificationclick',function(event){//event.notification.close();

    //event.waitUntil(doPushNotification(event));});

    59

  • !

    60

  • Special thanks to

    DEVIEW 2016 /

    61