Angular Offline Capability: Service Worker And PWA

Nowadays offline capability is a new big thing in the market. More and more developers are working on the applications to provide offline capability to users. With the Angular Service Worker and the Angular CLI built-in PWA support, it’s now simpler than ever to make our web application downloadable and installable, just like a native mobile application

What is PWA

Progressive Web Application (PWA) is a type of application software delivered through the web, built using HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.

Internally, a PWA uses service worker browser API to provide access to some native features. Also, it gives you an app-like feel. Cache storage is a really great feature that helps drastically improve page load time

What is Service Worker

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Today, they already include features like push notifications and background sync. The core feature is the ability to intercept and handle network requests, including programmatically managing a cache of responses.

Prerequisites

To make use of all the features of the Angular service worker, use the latest versions of Angular and the Angular CLI.

In order for service workers to be registered, the application must be accessed over HTTPS, not HTTP. Browsers ignore service workers on pages that are served over an insecure connection. The reason is that service workers are quite powerful, so extra care needs to be taken to ensure the service worker script has not been tampered with.

There is one exception to this rule: to make local development easier, browsers do not require a secure connection when accessing an application on localhost.

Let's Start implementing Service worker and PWA in our angular application.

STEP 1: Create an Angular application

you can skip this step if implementing on an existing angular application. we will be using the Angular CLI.

ng new angular-pwa

The above command will create a scaffold angular application inside the angular-pwa folder. Let us navigate to the angular-pwa folder

STEP 2: Add PWA package

The command triggers schematics that add and modify several files. It takes care of configuring your application to use service workers by adding the service-worker package along with setting up the necessary support files

ng add @angular/pwa

The above command completes the following actions:

1. Adds the @angular/service-worker package to your project.
2. Enables service workers build support in the CLI.
3. Imports and registers the service worker in the application module.
4. Installs icon files to support the installed Progressive Web App (PWA).
5. Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.
6. Updates the index.html file:

• Includes a link to add the manifest.webmanifest file.
• Adds meta tags for theme-color.

STEP 3: Create Build

This will take a moment, but after a while, we will have our application build available inside the dist folder.

ng build --prod

Let’s have a look to see what we have in our build folder, here are the most all the files generated:

STEP 4: Run angular PWA application

Because ng serve does not work with service workers, you must use a separate HTTP server to run PWA capability on your project locally. You can use any HTTP server. The example below uses the http-server package from npm.

Install http-server globally (Link)

npm install -g http-server

To serve the directory containing your web files with http-server, run the following command:

http-server -p 8080 -c-1 dist/angular-pwa

The -c-1 option will disable server caching, and a server will run on port 8080, serving the production version of the application. if port 8080is busy then you can change to any port number.

STEP 5: Test angular PWA application

With the server running, you can point your browser at http://localhost:8080/. Your application should load normally.

Tip: When testing Angular service workers, it’s a good idea to use an incognito or private window in your browser to ensure the service worker doesn’t end up reading from a previous leftover state, which can cause unexpected behavior.

Now, your browser dev tool should have service worker installed

change network setting to offline

Now refresh the application, the application will load again without network connectivity

Network logs in offline mode

Conclusion

Now we have learned to build offline capabilities and PWA capability on any angular application. Thanks for reading :)

If you like this article press 👏 the clap button 1000 times or as many times as you want. Feel free to ask a question if you have any. Thanks a lot for reading!

Before You Go

Thanks for reading! If you want to get in touch with me, feel free to reach me at gauravrathee0@gmail.com or my LinkedIn Profile. Also, feel free to explore my profile and read different articles.