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.
Click “Run audits” and wait a few seconds to see how well Alligator.io 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:
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!
Let’s take a little bit of a deeper look to see what just happened. Some important changes that occurred:
angular.jsonwas modified to include the
serviceWorker: trueproperty to the build configuration, as well as specifying
src/manifest.webmanifestbe included as a build asset.
manifest.webmanifestis 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
- 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
AppModulewas 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. Take a look below to learn more.