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