More Related Content

Slideshows for you(20)

Similar to ServiceWorkerとES6 Modules時代のTypescript開発考察(20)


ServiceWorkerとES6 Modules時代のTypescript開発考察

  1. Typescript Development with ServiceWorker and ES6 Modules
  2. : @brn ( a.k.a ) : iOS : Cyberagent RightSegment AI Messenger : Twitter: GitHub:
  3. What is ServiceWorker? ServiceWorker Web http javascript primers/service-workers?hl=ja
  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
  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
  12. Demo
  13. Problem ES6 Modules Module npm Module Module
  14. GitHub npm module
  15. Summary ServiceWorker babel typescript ES6 Modules commonjs commonjs => ES6 modules amd Systemjs ES6 Modules tranpile
  16. Summary