ServiceWorkerとES6 Modules時代のTypescript開発考察
1 like2,920 views
This document discusses using TypeScript for ServiceWorker development with ES6 modules. It proposes a strategy of using the ServiceWorker lifecycle to install and activate a TypeScript script, and intercept fetch requests to transpile TypeScript modules to JavaScript on the fly. Key aspects include skipping the waiting lifecycle with self.skipWaiting(), activating with claim(), and using postMessage to communicate between the ServiceWorker and main scripts during transpilation.
ServiceWorkerとES6 Modules時代のTypescript開発考察
- 1. Typescript Development with ServiceWorker and ES6 Modules
- 2. : @brn ( a.k.a ) : iOS : Cyberagent RightSegment AI Messenger : http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
- 4. Intercept http request ServiceWorker http ES6 Modules Typescript
- 5. ES6 Modules babel Safari Chrome Canaray ES6 Modules Typescript
- 6. Typescript Compiler CompilerHost ts.transpileModule 1 https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function
- 7. Strategy • ServiceWorker install skipWating • ServiceWorker activate claim • navigator.serviceWorker.register Promise active • active typescript script type="module" • ServiceWorker fetch
- 8. tsconfig.json tsconfig.json • postMessage tsconfig • tsconfig ServiceWorker postMessage • typescript
- 9. Strategy ServiceWorker install waiting active fetch install active
- 10. Strategy self.skipWaiting() activate claim() controllerchange active postMesseage tsconfig.json install active skipWaiting controllerchange Main postMessage
- 11. 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
- 13. Problem ES6 Modules Module npm Module Module
- 15. Summary ServiceWorker babel typescript ES6 Modules commonjs commonjs => ES6 modules amd Systemjs ES6 Modules tranpile
- 16. Summary