Progressive web apps tutorial using Angular 13 | Service worker | Push Notifications

Progressive web apps tutorial - We see how to convert Angular 13 app to Progressive web app. Service workers play the most critical role in the PWA of caching the resources and API data. The angular services SwUpdate and SwPush are available in the ServiceWorkerModule. SwUpdate service provides regular updates about the app in the server. SwPush service can be used for subscribing to Push messages from the server using both Push API and Notification API. App Shell provides a way of loading a minimal screen to make the PWA fast in the initial loading.

00:00 - Introduction
02:43 - Convert angular app to PWA
13:53 - Install PWA
14:53 - Cache Storage
17:43 - Cache APIs
19:29 - SwUpdate - subscribe to server updates
25:29 - SwUpdate - Poll for server updates
28:23 - SwPush - Push notifications
37:07 - Notifications payload
41:25 - App Shell
47:15 - Uninstall PWA

[innovativelife]

These are different levels of videos available on YouTube. So grateful to have them sir

[MuhammadHamza-xqbi]

when i disconnect the internet and reload the angular pwa app, it shows internet not connected. How can i fix that

[nobitanoby]

All we can say for your efforts is Thank You ♥️♥️♥️

[vigneshprabhu]

@JS Fameworks - In local I can install the PWA app but in production I can't get the install feature. I'm getting no matching service worker detected. How to resolve. Please let me know

[rasit]

Is there any way to make Angular App as Installable and should work only in Online mode?

I want to disable offline mode

[bhavnamulani]

Hi, after clicking on offline now I am always seeing Err_internet_disconneted issue, can you please help

[aryakjayan]

Hi sir, i was working with service worker. While running in local using http server, i was able to load the data from cache while the browser was offline. But when i deployed the app, the sw was making calls and i could see 2 network calls simultaneously in the network tab. Also when i am offline, i am getting page not found error. The service worker seems to be registered and active in the browser. One thing is that, in the dev tools->application -> check the 'update on reload' checkbox and then when i try to make offline and then reload, its loading from the cache.. but in normal case, i am not able to load when offline. How can i enable it in my code? I used the cli to generate all files

[bharatkumarprajapati]

❤️❤️🤗🤗
Can you make a video for best practices in Angular for application better performance?

[handyhanddk]

Hi - i have a question: When i run the app shell, i dont see the server side rendered html in the source code - only what the app shell has rendered - does that mean that the ssr is not working anymore when the appshell is running?

[basthatisureshbabu]

Thank You soo much valuable information.

[bhavnamulani]

I am able to convert a website to PWA but I can't see data, is PWA by any chance blocking APIs?

[bhavnamulani]

Hi, can we create a single PWA for websites having a different pages

[jjuliefrance]

I got : Invalid rule result: Instance of class Promise.
Nothing to do and I do not know what to do after 2hours trying to find out from France.
Many thanks in advance if you can help... 🙃

[javidg]

Nice one sir.. but tat push notifications was abit confusing ..will long into the video again ..