Slide 1

Slide 1 text

Typescript Development with ServiceWorker and ES6 Modules

Slide 2

Slide 2 text

せ⵸: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn

Slide 3

Slide 3 text

What is ServiceWorker? ServiceWorkerהכWebل٦آ׾غحؙؚٓؐٝسד؝ٝزٗ٦ٕ׃ծ httpؙٔؒأزך؎ٝة٦إفز瘝➙תדjavascriptדכדֹזַ׏׋ֿה ׾㹋植ׅ׷堣腉דׅկ https://developers.google.com/web/fundamentals/getting-started/ primers/service-workers?hl=ja

Slide 4

Slide 4 text

Intercept http request ׉ֿד➙㔐כServiceWorkerךhttpؙٔؒأز؎ٝة٦إفز堣腉הծ ES6 Modules׾ⵃ欽׃גTypescriptך如⚅➿Ꟛ涪橆㞮׾圓眠׃ג׫ת׃׋կ

Slide 5

Slide 5 text

ES6 Modules ׮ֲ兛鸐ח⢪׻׸גְתׅ״י 涺ׁ׿㛇劤涸חכbabelדزٓٝأػ؎ٕ׃גְ׷ה䙼ְתׅկ ـٓؐؠדכ植㖈SafariהChrome Canarayד؟ه٦زׁ׸גְתׅկ ➙㔐כֿךES6 Modules׾ⵃ欽׃גծ Typescriptךٌآُ٦ٕ׾ٗ٦س׃תׅկ

Slide 6

Slide 6 text

Typescript Compiler ـٓؐؠד׮⹛ֹתׅկ ׋׌׃ծCompilerHost׾鏣㹀ׅ׷װ׶倯כ㢳ⴓئזךדծ ts.transpileModule׾ⵃ欽׃ג1ٌآُ٦ٕ嫣ח؝ٝػ؎ٕ׃תׅկ https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function

Slide 7

Slide 7 text

Strategy ؝ٝػ؎ٕך崧׸דָׅծ •  ServiceWorkerךinstall؎كٝز׾skipWatingדׅ׏굲לׅ •  ServiceWorkerךactivate؎كٝز׾claimד㸣✪ׅ׷կ •  ً؎ٝ⩎כnavigator.serviceWorker.registerך䨱׶⦼ךPromiseⰻדactiveف ٗػذ؍׾湊鋔 •  activeחז׏׋׵typescript׾script type="module"דٗ٦سׅ׷կ •  ServiceWorkerךfetch؎كٝزⰻד؝ٝػ؎ٕ׃ג鵤ׅկ הְֲ䠬ׄדװ׏ג׫ת׃׋կ

Slide 8

Slide 8 text

tsconfig.json ׁ׵ח؝ٝػ؎ٕך鏣㹀׾tsconfig.jsonַ׵《׶⳿׃׋ֻז׏׋ךדծ •  剑ⴱחً؎ٝأٖحس⩎ַ׵postMessageדtsconfigך《䖤׾䭷爙կ •  tsconfigךٗ٦سָ㸣✪׃׋׵ServiceWorker⩎ַ׵postMessageד鸐濼 •  typescriptךٗ٦س ה׃ת׃׋կ

Slide 9

Slide 9 text

Strategy ServiceWorkerכⴱ㔐ח؎ٝأز٦ׁٕ׸׷הծinstall؎كٝزָ涪抟׃ծ waiting朐䡾חז׶תׅկ׉׃גٔٗ٦سׅ׷הactive朐䡾ח獳遤׃ծ ✳䏝湡ך鏝㉏⟃꣬ծfetch؎كٝز׾ٍؗحثׅ׷ֿהָ〳腉חז׶תׅկ install active ⴱ㔐 ✳㔐湡⟃꣬

Slide 10

Slide 10 text

Strategy ׃ַ׃ծ➙㔐כⴱ㔐ַ׵ل٦آ׾؝ٝزٗ٦ٕ׃׋ְկ זךדծself.skipWaiting()׾ㄎן⳿׃גactivate׃ծclaim()׾ㄎן⳿׃גծ ل٦آ׾؝ٝزٗ٦ٕ朐䡾ח׃תׅկ ل٦آך؝ٝزٗ٦ٕ朐䡾ָ㢌⻉ׅ׷הծcontrollerchange؎كٝزָً ؎ٝل٦آדㄎן⳿ׁ׸תׅկ ׉ך؎كٝز׾ٔحأٝ׃גֶֹծactive朐䡾׾嗚濼׃׋postMesseage דtsconfig.jsonך《䖤׾遤ְתׅկ install ⴱ㔐 active ⴱ㔐 skipWaiting controllerchange Main postMessage

Slide 11

Slide 11 text

Strategy register() controllerchange postMessage(load tsconfig) postMessage(load succeeded) load typescript via script tag ... ServiceWorker Main install active skipWaiting() claim() wait fetch event load typescript via ES6 import transpileModule transpileModule Transpiled code

Slide 12

Slide 12 text

Demo رٌ https://brn.github.io/swts/

Slide 13

Slide 13 text

Problem 植㖈ךהֿ׹ES6 Modulesח㼎䘔׃גְזְModuleכ⹛⡲׃תׇ׿կ את׶㣐⼱ךnpmךModuleכ⹛ַזְ׏גֿהדׅկ ׋׌׃✲⵸חⵃ欽ׅ׷Module׾؝ٝػ؎ٕ׃גֶֽלז׿הַכז ׷ַ׮׃׸תׇ׿կ

Slide 14

Slide 14 text

GitHub ֿֿתדך㹋鄲׾npm moduleה׃גⰕꟚ׃גֶֹת׃׋կ https://github.com/brn/swts.git

Slide 15

Slide 15 text

Summary ServiceWorkerדbabel٥typescriptכַז׶꬗⦜זֿהָ㢳ְկ 暴חES6 Modulesָ⢪ִג׮ծ commonjs䕎䒭ךٌآُ٦ָٕٗ٦سדֹזַ׏׋׶הծ鼋欵ך㉏겗ָ֮׷կ commonjs => ES6 modules׾ׅ׷ַծamd٥Systemjsהְֲ鼋欵ח걾׷ַկ ES6 Modules׾ⵃ欽׃׋tranpileחꟼ׃גכת׌ת׌װ׷ֿהָ㢳׉ֲկ

Slide 16

Slide 16 text

Summary ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ