Successfully reported this slideshow.

Implementing web workers / service workers in Angular

1

Share

Upcoming SlideShare
What is Node.js? (ICON UK)
What is Node.js? (ICON UK)
Loading in …3
×
1 of 21
1 of 21

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×