Build your PWA with angular. Service workers.

Progressive web apps — cache assets for offline, Dynamic assets and URLs.

Let’s learn about pwa and how to configure pwa to cache assets and rest api for better performance.

What is PWA ?
Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (also known as a PWA). At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.

The ultimate goal behind a Progressive Web App is to deliver a fast, familiar, and optimized user experience, regardless of network connectivity, leveraging the latest browser features as they are available.

Make Your Angular Application a PWA

Let’s go ahead and see how easy it is to convert your existing Angular application to a PWA.

1. Adding service workers:

From a terminal Change directories to your angular project folder, with the Angular CLI installed globally, run the following command:

pwa included in your project

pwa added successfully

Points to remember

changes are highlighted in red color

The above screenshots shows the changes

Let’s take a little bit deeper look to see what changes are occurred,

1. angular.json:
   It includes the serviceWorker: true property to the build configuration, as well as specifying src/manifest.webmanifest be included as a build asset.
2. manifest.webmanifest:
   It is the Web Manifest file associated with the app, which defines things like theme colors and app icons.
3. Index.html :
   Manifest file is linked in index html.

Now, let’s launch our angular app production version resides inside dist folder. lets serve our angular app with http-server from npm. You can find more details regarding install and run the server on the below link. https://www.npmjs.com/package/http-server

http-server host angular application locally

Great!, we can see the production code of angular app in browser, by listening to the corresponding port number, (in my case port number was 8081). http://localhost:8081/

Cool, This is the beauty of pwa from angular, since we are offline mode, we still able to run application locally. Going forward, we will see how to cache the static and dynamic REST api using pwa.

2. Caching assets for offline use:

Let’s say i have linked google fonts which is downloaded over internet. But we could cache this fonts in offline mode.
To cache the static assets like fonts, images etc., we should dothe below changes in ‘ngsw-config.json’.

assetGroups is an array of objects and each object will have provision to add static assets path in the ‘urls’ property which is an array. Please refer the image below,

cache static assets in ngsw-config.json

After adding the property urls with asset path, rebuild again and launch the app in the browser. Now the request to ‘https://fonts.googleapis.com/css?family=Roboto&display=swap’ is cached and served locally in offline mode.

3. Caching dynamic assets and URLs:
We could add dataGroups where we can set our API url which needs to be cached. To demonstrate, I have my serverjs file where i have ‘GET’ method named ‘recipesData’ and we will see how we cache the API for offline mode without internet.

Next to assetGroups, just add the dataGroups as mentioned below in screenshot.

caching dynamic assets

The value of name property would be your choice. and the property ‘urls’ contains the path of REST Api(CRUD). And cacheConfig object has certain parameters to define the policy by which matching requests will be cached.

We will see detail about the other properties below,

maxSize: Maximum number of outgoing requests needs to be cached.

maxAge: To define how long the data needs to be cached.

timeout: Time to wait for the response and fallback to the cached data if response is not fetched.

strategy: freshness or performance. freshness is looking for the new response with timeout property. Performance brings the response as soon as possible and takes maxage property into the account.

Now you can reload your application and look for the cached API in the browser. The ‘receipesData’ GET method is fetched and cached through Service workers.

App is stable in offline and online. with pwa.

This is all about the Progressive web apps(PWA) in angular.

Conclusion: So far we have learnt that the steps to implement pwa/service workers, To cache static assets(fonts/images etc.,) and To cache the dynamic assets such as REST API methods.

Hope you have understood the concepts and how to implement PWA. Post your questions. if you have any,

Happy Coding :)