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.

Implementing web workers / service workers in Angular

210 views

Published on

Angular Meetup, Web workers, Service workers

Published in: Technology
  • Be the first to comment

Implementing web workers / service workers in Angular

  1. 1. Workers in Angular Bipin Paul Bedi https://www.linkedin.com/in/bipinpaulbedi/
  2. 2. Question Does any one know about web workers / service workers ? Used one before ? Used in Angular ? Seen some one using it ?
  3. 3. DEMO PROBLEM ? Every line of frontend javascript code ever written has (momentarily) stopped your page from working.
  4. 4. Even XMLHTTP REQUEST Show Demo & fetch() & setTimeout, setImmediate, RxJs [Schedulers - immediateScheduler, currentThreadScheduler, timeoutScheduler]
  5. 5. Stages of Improvement
  6. 6. CONCEPT WEB WORKERS : PARALLELISM SERVICE WORKERS : OFFLINE [Stateless]
  7. 7. Can I Use ? Browser support…
  8. 8. Web Workers
  9. 9. Demo Angular Modules in action using web workers let status = new Worker(“Show Demo”).then(() => { console.log(“Show Code”)}).catch(() => {“Don’t Panic”})
  10. 10. Code Breakdown Main App -> main.ts : App module -> AppComponent Dynamic Web Workers Loader [Web Workers, Web Workers multithreaded] WorkerLoader workerLoader.ts -> worker.module.ts -> Background Worker Components ServiceWorker -> serviceWorker.ts Service -> GraphInfo, Fibonacci, GraphInfoMB
  11. 11. Steps ng Eject Create a worker Loader PolyFill Angular Bootstrap as platformWorkerAppDynamic “entry”, “HTMLWebPackPlugin” excludes, “Common chunks” set inline explicit,
  12. 12. Message passing Is there a better way of passing message ? MessageBus, ServiceMessageBrokerFactory, ClientMessageBrokerFactory https://angular.io/docs/ts/latest/api/platform- webworker/index/MessageBus-class.html let status = new MessagePassingDemo(“Show Demo”).then(() => { console.log(“Show Code”)}).catch(() => {“Don’t Panic”})
  13. 13. Not Available The window object The document object The parent object
  14. 14. Available Features The navigator object The location object (read-only) XMLHttpRequest [for service worker use fetch] setTimeout()/clearTimeout() and setInterval()/clearInterval() The Application Cache Importing external scripts using the importScripts() method Spawning other web workers
  15. 15. Inline workers ? Blog Object window.URL.createURLfromObject let status = new Example(“Show Example”).then(() => { console.log(“Show Code”)}).catch(() => {“Don’t Panic”})
  16. 16. Where to use ? Prefetching and/or caching data for later use Code syntax highlighting or other real-time text formatting Spell checker Analyzing video or audio data Background I/O or polling of webservices Processing large arrays or humungous JSON responses Behavioural monitoring Updating many rows of a local web database
  17. 17. Vs Service Worker
  18. 18. How ? navigator.serviceWorker.register(‘/sw.js') Use MessageChannel & PORTS1, PORT2 Angular Message Classes let status = new DemoTime(“Show Demo”).then(() => { console.log(“Show Code”)}).catch(() => {“Don’t Panic”})
  19. 19. Limitations You are not running your application through HTTPS. The path to your service worker file is not written correctly The service worker being pointed to is on a different origin to that of your app. This is also not allowed.
  20. 20. Question ?
  21. 21. Thank You

×