Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,890 views

Published on

ServiceWorkerとES6 Modulesを利用してTypescript開発をどう変えていけるか考えてみた

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Typescript Development with ServiceWorker and ES6 Modules
  2. 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
  3. 3. What is ServiceWorker? ServiceWorker Web http javascript https://developers.google.com/web/fundamentals/getting-started/ primers/service-workers?hl=ja
  4. 4. Intercept http request ServiceWorker http ES6 Modules Typescript
  5. 5. ES6 Modules babel Safari Chrome Canaray ES6 Modules Typescript
  6. 6. Typescript Compiler CompilerHost ts.transpileModule 1 https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function
  7. 7. Strategy •  ServiceWorker install skipWating •  ServiceWorker activate claim •  navigator.serviceWorker.register Promise active •  active typescript script type="module" •  ServiceWorker fetch
  8. 8. tsconfig.json tsconfig.json •  postMessage tsconfig •  tsconfig ServiceWorker postMessage •  typescript
  9. 9. Strategy ServiceWorker install waiting active fetch install active
  10. 10. Strategy self.skipWaiting() activate claim() controllerchange active postMesseage tsconfig.json install active skipWaiting controllerchange Main postMessage
  11. 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. 12. Demo https://brn.github.io/swts/
  13. 13. Problem ES6 Modules Module npm Module Module
  14. 14. GitHub npm module https://github.com/brn/swts.git
  15. 15. Summary ServiceWorker babel typescript ES6 Modules commonjs commonjs => ES6 modules amd Systemjs ES6 Modules tranpile
  16. 16. Summary

×