SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Implementing web workers / service workers in Angular
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.
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.
Steps
ng Eject
Create a worker Loader
PolyFill Angular Bootstrap as
platformWorkerAppDynamic
“entry”, “HTMLWebPackPlugin” excludes, “Common
chunks” set inline explicit,
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.
Not Available
The window object
The document object
The parent object
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.
Inline workers ?
Blog Object
window.URL.createURLfromObject
let status = new Example(“Show Example”).then(() =>
{ console.log(“Show Code”)}).catch(() => {“Don’t
Panic”})
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
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.
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.