Let´s use the most recent version of Angular (currently version 12) to build a Progressive Web Application (PWA) that works on mobile or any platform that uses a standard-compliant browser.

In simpler terms, PWA is a web app that gives users an experience similar to mobile or desktop app.

So, One of the main characteristics of a mobile or desktop app is that it gives something for users even it’s offline or having a poor network connection

PWA does not require to be deployed via app stores; instead, we take a slightly different approach and deploy it through the web servers through URLs. To make the same PWA as the native apps, we have to fulfil the following requirements :

• Responsive
• Auto-Updated (Service worker keeps it always updated)
• Secure (Content is considered to be safe due to serving through HTTPS.)
• Reliably Connected ( Service workers support to make it work offline and on sparse networks. )
• Progressive (Web app that employs modern web capabilities to produce an app-like experience for every user.)
• Searchable (Very much searchable via search engines due to web app manifest.)
• User Experience (Similar user experience by engaging the same interaction methodology as a native app has.)
• Installable (Fully installable on users’ mobile home screen, and the good thing is we do not have to visit the app store.)
• Regularly Communicate ( Keeps you up to date via push notifications and offers you the latest updates, promotion offers, etc.)

We can implement service workers to a native JavaScript app. But from Angular 5.0.0 version, they ship an implementation of service worker with Angular.

Adding PWA in Angular 

It is undoubtedly very easy to convert an existing angular application into a Progressive Web App (PWA). The “ng add angular pwa” command can make your dreams come true.

ng add @angular/pwa

Executing above command would add required dependencies and do some configurations to our code:

• The manifest.webmanifest file
• The ngsw-config.json service worker
• Varying sizes of icons inside the assets/icons directory

The “index.html” file has been updated and added the following meta tag and theme colour attribute

The “ng add angular pwa” command generated the ngsw-config.json file, It is solely responsible for service workers. Service workers are also automatically added to app.module.ts file.

Have a look at the ngsw-config.json file.

The “ng add angular pwa” command also registered the service-worker inside the package.json file:

One thing needs to keep in mind is that the service workers won’t work with ng serve command. They would only work in the production build. To do a production build run following command,

ng build --prod

Now, we have the production build ready at the dist/{project-name} folder. Next, we will serve the angular PWA using the http-server package.

To install http-server use following command,

npm install -g http-server

Then go to your project root directory and run following command (replace {project-name} with the actual project name),

http-server -p 8080 ./dist/{project-name} -c-1 -o

//or in some case, when there is no ordner {{project-name}}

http-server -p 8080 -c-1 dist -o

This would open a web browser with the Angular app on the following URL http://127.0.0.1:8080  and also give you the following URLs, you can check your app by entering one of the URL in the browser’s address bar.

Available on:
http://127.0.0.1:8080
http://192.168.0.102:8080

Then try checking the offline checkbox in dev tools and reload the webpage. It would load as normal even it’s offline.

You might wonder how this happens. Service worker cache content of the website for the first time it loads in the browser. Then if the site goes offline, service workers would serve the cached content.

When internet connection restored and if the user refreshes the website, Service workers would download any changes from the back-end and serve those changes on the next browser refresh.

Reference:

https://www.positronx.io/

https://tharakamd-12.medium.com/make-an-angular-app-available-in-offline-getting-started-with-service-workers-in-angular-9e169e43c013