Intro to Progressive Web Apps (PWAs) in Angular

Intro to Progressive Web Apps (PWAs) in Angular

A Progressive Web Application or PWA is a web application that is install-able on a (supported) mobile device via it’s web browser (Chrome or Safari)

A Progressive Web Application or PWA is a web application that is install-able on a (supported) mobile device via it’s web browser (Chrome or Safari)

More than just a buzzword, a Progressive Web App, or PWA, is a set of guidelines to utilize modern browser features in a way that creates a more app-like user experience. We won’t go into all the details that make an application a PWA, because it all sort of depends on who you ask. Some common concepts include:

  • Responsive - it should look good on any form-factor
  • Progressive - utilizes latest browser features, but still usable on older browsers
  • Offline usability - deliver a working experience, regardless of network connectivity
  • Discoverability - a manifest “registers” the application, allowing search engines to index them as such
  • Installability - the web app can be “installed” on a device, giving users a similar experience to using a native app

In short, 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.

These all sound like great things - and they are - but how can we know how well our application adheres to the principles of a PWA?

If you are reading this, I will assume you are a web developer. And if you are a web developer, I will assume you also have Google Chrome installed. If you don’t have Chrome installed, go get it now, and come back to this article in Chrome.

Auditing your Application via Lighthouse

While you are on this page in Chrome, open Developer Tools (F12 on the keyboard). Flip over to the “Audits” tab. Depending on the version of Chrome (73.0.3683.103 at the time of writing), you’ll see a few different features to run audits against. Choose “Desktop” for the device, and select only “Progressive Web App” from the “Audits” list.

Chrome Lighthouse Audits in Developer Tools

Click “Run audits” and wait a few seconds to see how well does as a PWA!

You can run the Lighthouse audit tool on any page to see how well they implement the aspects of a Progressive Web App.

Make Your Angular Application a PWA

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

From a terminal, with the Angular CLI installed globally, run the following command:

$ ng new pwa-example

This just sets up a default, out-of-the-box, “Hello World” Angular application. Alternatively, generate a new project with any properties you like, or run the next command in an existing Angular project.

Change directories to your new project folder, and run this command:

$ ng add @angular/pwa && ng build --prod

…and just like that, your Angular application is a production-ready PWA!

Further Detail

Let’s take a little bit of a deeper look to see what just happened. Some important changes that occurred:

  • angular.json was modified to include the serviceWorker: true property to the build configuration, as well as specifying src/manifest.webmanifest be included as a build asset.
  • manifest.webmanifest is the Web Manifest file associated with the app, which defines things like theme colors and app icons.
  • A couple of new packages were added to your package.json.
  • index.html was updated to include references to the Web Manifest, set a default theme color, and specify a simple operative message to display if the user’s browser can’t run JavaScript.
  • Several default icons of varying resolutions were added to the project. These are the familiar Angular shield logo - be sure to replace these with your actual website’s icon design before going to production.
  • Your bootstrapped AppModule was modified to import the ServiceWorkerModule, which registers the Service Worker that does all the heavy lifting to make the app a PWA.
  • You got a new file at the root of the project called ngsw-config.json, which, as it’s name indicates, is a configuration file for the Angular service worker. This configuration file allows you to define things like what static assets and data URLs (for example, the response from an API call) you’d like to be cached, and how.

    Things to note

If you try to run your application locally via ng serve, you won’t notice any PWA features. Angular Service Workers are enabled only on production builds, so in order to test these changes locally, you’ll need another strategy to serve your build. One option is to use something like the npm package http-server, and point it to the dist/ folder. When it’s running, you should see a fully-functional PWA.

However - if you were to open up a port to your new local web server, and try to visit it from another computer, the Service Worker would no longer work for you. This is because Service Workers will only work over the HTTPS protocol, or on localhost, for development purposes.

One great benefit of a PWA-enabled application is it’s ability to check for and install updates in the background, thanks to the Web Manifest file. However, the updates can’t be applied until the application tab is refreshed, or the user closes all tabs the application is running in, and reopens an application tab. It may be prudent to include an instructional message to the user when a new update has been applied.

We’ve only just scratched the surface of what PWAs are and what Service Workers can do for your Angular app.

web-development angular pwa

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Best Web and App Development Company in Ahmedabad

Contact DataPierce for any questions or queries you have about website development, designing, marketing projects or any small or enterprise software development.

Important reasons for developers to adopt Angular JS development

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

Build Progressive Web App (PWA) with Angular 9/8

In this tutorial, we will use the most recent version of Angular 9/8 to build a Progressive Web Application (PWA) that works on mobile or any platform that uses a standard-compliant browser. What is a PWA? Progress Web Application or PWA is a set of guidelines to use modern browser features in a way that creates a more native app-like user experience.