Best way to convert Angular webapp into PWA

Progressive web applications, in-short PWAs, are a type of mobile app delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. They are intended to work on any platform that uses a standards-compliant browser.

When you open this app, you will be able to browse the content even when you do not have internet. PWAs deliver user experiences through progressive enhancement.

A PWA lets you install the application from the browser window itself, is available on your phone like a native app, and works offline, just like a native app. It's a set of best practices to make a web application function similar to a desktop or mobile application.

So, PWAs are a nice way to make regular web applications act like native apps.

Let's check out the best ways to convert Angular web apps into PWAs.

Use Angular CLI

To make your app a PWA, you have to start with Angular CLI. Angular CLI allows adding PWA capabilities to an existing Angular app. To do that, simply open a terminal on the root of the project and type the command - ng add @angular/pwa

Adding necessary packages

It adds serviceWorker: true in the production configuration. It creates two files at the root of the project: manifest.json and ngsw-config.json. It adds the manifest.json that was just created in the registered assets of the project. It adds two lines in the index.html: A <meta name=”theme-color”> tag (you’ll want to change its value) and a <link> tag pointing to the manifest.json file.

Note: if you already had these tags in your index, it will not replace them. You’ll have to do it yourself.

It imports the ServiceWorkerModule in your app (only in production). This is the service responsible for the automatic creation and use of a service worker. It adds icons in your assets folder. You will, of course, need to change them if you don’t want your app to sport Angular logos as icons.

In the package.json file, dependencies have been added to the necessary bundles. In the angular.json file, a notification, including service workers, has been added to the section related to configuration.

Service Workers

Service workers expand the web workers mechanism, which allows us to start scripts in the background and in the thread separated from the browser’s main thread. Service workers are used as a “proxy” between the client-side and server-side application. This could be used for implementing PWA features such as offline support and Push notifications etc. To pass these audits we simply need to register a service worker and use it to cache files locally.

Progressive Enhancement

The next is related to Progressive Enhancement which is an essential aspect of a PWA and It simply refers to the capability of PWAs to run on different browsers but provide advanced features if they’re available. One simple example of PE is the use of the <noscript> HTML tag that informs users of the need to enable JavaScript to run the application in case It’s not enabled.

Web App Manifest

Web App Manifest is a file in JSON format that provides the name, description, icons and other information required by a PWA. It lets users install the web app on the home screen just like native apps without going through an app store. You need to provide a web app manifest and reference it from the index.html file using a <link> tag with rel property set to manifest.

Configuring The Service Worker

Angular provides the file to configure service workers rather than coding it on your own. The ngsw-config.json file has all the defined configuration for the service worker and it is used to configure the different caching strategies.

Run local server

Run a local server to preview your app. Now you can see that the service worker is active and working. Check the offline option and reload the browser. By opening the Network tab you can see that the files are being cached correctly.

 

You now have seen how to add PWA features to your Angular application. PWA applications allow you to expand your web page app to a whole new market and in doing so, to obtain more users. We hope you’re able to move on a step forward in the development of your first PWA with Angular.