A progressive Web application (PWA) is a kind of application software that is delivered through the Web. In this short tutorial, let’s go about converting an Angular application into a PWA.
A progressive Web app (PWA) is a way to use modern browser features to create an app-like user experience for websites. A PWA contains all the major features that native mobile applications do.
PWAs need to be:
Responsive: They should look fine on all devices with different resolutions.
Progressive: They should support all the latest browser features as well as old browsers.
Usable online: They should work without network connectivity.
Discoverable: They should get ‘registered’ so that they can be indexed by the browser.
Installable: One must be able to ‘install’ the Web app on a device, giving users an experience that is similar to using a native app.
The main goal of a PWA is to create a Web app with native app-like features such as a great UI, offline support, etc.
If you are reading this, you probably are a Web developer, in which case, I will assume that you also have Google Chrome installed.
Auditing your application using 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, 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 on ‘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 it implements the aspects of a PWA.
Make your Angular application a PWA
Let’s go ahead and create a sample Angular application. You can 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 adding any properties that you like, or run the next command in an existing Angular project.
Change directories to your new project folder, and run the following command:
$ ng add @angular/pwa && ng build --prod
…and just like that, your Angular application is production-ready.
Let’s look at some important changes that occurred:
- angular.json was modified to include the serviceWorker: true property to the build configuration, as well as specifying that 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 colours 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 colour 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 logos — be sure to replace them with your actual website’s icon design before going into 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 its 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.
If you try to run your application locally using 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 will 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 its 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. There’s a lot more that can be explored.
