Typescript Development with ServiceWorker and ES6 Modules

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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