What is a Progressive Web App (PWA)?
Progressive web apps are a new way to deliver your content to the user. PWAs are built on top of the web platform and are designed to be installed on either mobile devices or desktop computers. There is actually a growing trend for PWAs for business applications because it allows the user to basically have a direct link to the service on their desktop that isn't just a browser-level bookmark. PWAs are designed to be fast, responsive, and secure. You can use PWAs to deliver your content to the user in a way that is optimized for their devices.
PWAs give you the ability to provide the best experience for your users on mobile devices if you do not have the resources to build a native app. A PWA offers a huge advantage when it comes to searchability. Mobile apps are not indexable on major search engines, while PWAs are indexed making them searchable by users.
With a PWA you are not required to have an app store submission. We can deliver the PWA via a simple URL avoiding delays and effort to submit to the app store. This is significant for smaller teams or individual developers because a lot of apps (specifically for the Apple store) have to give up a substantial amount of profits in exchange for being included in the app store. In Apple's case, for any app that makes over $1M, Apple gets 30% of that.
How do I create a Progressive Web App (PWA)?
Let us start with a new Angular CLI project with default settings. Like many other features in the Angular ecosystem, we can utilize ng add to turn our basic Angular application into a PWA. Running the following command will achieve our desired results:
The above command handles configuring the project to use service worker and adds the necessary support files to make your application a PWA. The command completed the following actions for you:
- Created a service worker configuration file ngsw-config.json in the root of your project. This file specifies the files and data URLs cached by the service worker as well as the strategies for caching.
- Created a manifest.webmanifest file in the root of your project src folder. This file specifies the name of the application and the icons for the application.
- Added the @angular/service-worker package to your project. This is the main package, which provides the service worker functionality.
- Enabled the service worker to build in your project.
- Imported and registered the service worker in the application module.
- Added icon files in the assets folder to support an installable PWA.
- Updated the index.html file to include the <link rel="manifest" href="manifest.webmanifest"> tag. Also, adds the <meta name="theme-color" content="#1976d2"> tag to the <head> section of the index.html file. This is the color used to display the app’s icon.
Run PWA Locally
At this point, we have all we need to create a PWA. We can now build our application and test it locally. Unfortunately, we cannot serve our application using the typical Angular CLI commands. We need to use a separate HTTP server to serve the PWA. For example, we can use http-server.
To serve the PWA and test locally, we begin by building the application using the ng build command. You can utilize the --watch option on the build command. Although this will not provide a hot-reload of the application, it will automatically rebuild the application when changes are made. After building the application, We utilize the http-server to serve the PWA, using the following command:
This command runs the server on a dedicated port and disables caching to reduce conflicts and avoid serving stale content during testing. We can then open a browser and navigate to the http://localhost:8080/ URL to view the PWA.
Service Worker
For an Angular PWA, the service worker is a JavaScript file named ngsw-config.json that lives at the root of your project and it controls the behavior of the PWA. The Angular service worker is responsible for caching the PWA content and data, as well as installing and updating the PWA on the user’s mobile device.
The above ng add command creates a default configuration file for the service worker. This file specifies files and data URLs that are cached by the service worker as well as the strategies for caching. As your application grows you can add more files and data URLs to the cache. As your data caching needs change you can change the caching strategy.
Let us take a look at the default configuration file found in your ngsw-config.json:
If you would like more information about configuring the service worker, you can visit the Service Worker documentation.
Registering the Service Worker
Registering the service worker in the application module is the first step in creating a PWA. This is done by ng add command. The service worker is registered in the application module by adding the following code to the application module imports array:
Registration defines the default behavior for when the application will register the service worker with the website. These options allow you to adjust when the application registers the service worker:
- registerWhenStable:30000: Register the service worker as soon as the application is stabilized but not to exceed the specified time limit. This is the default behavior.
- registerImmediately: Registers the service worker immediately.
- registerWithDelay:5000: Register the service worker after the time specified in the delay.
Caching Data
One of the best features of PWA applications is the ability to run the application in an offline mode. This is achieved by using the service worker to cache the application assets and data. You can cache data by adding dataGroups to your service configuration. You can define policies for caching data requests such as API requests, database requests, and other data requests. Data requests are not versioned and are cached based on the data request URL. A simple example is shown below:
In the above example, we define a new dataGroup called app. One of the essential properties in defining a dataGroup is strategy. This property defines the caching strategy for the data group.
The following strategies are available:
- performance: This is the default strategy. This strategy emphasizes performance over fresh data and is recommended for data that does not change frequently. If the data exists in the cache it is served, otherwise, a network request is made.
- freshness: This strategy emphasizes fresh data over performance and is recommended for data that changes frequently. Only if the network request times out, will the cache be used if it exists.
Deciding on which API requests to cache and which strategy to use depends on your needs and needs to be evaluated carefully. Another consideration is the order of the URLs in your dataGroups. The dataGroup with the first matching URL will be processed.
Updating Application Icons
The ng add command generates a new directory under the assets folder called icons. This directory includes eight (8) icons and added them to the manifest. These icons are used to display the application icon in different sizes. This is the icon the user will use to launch your application. An example of a portion of the manifest file:
You can replace the icons generated by your own set of icons or you can utilize tools like pwa-asset-generator to help you generate the icons and splash screen for your application.
Conclusion
Progressive Web Apps (PWA) are a great tool to deliver maximum performance and user experience to your users, regardless if it is a desktop or a mobile device. With few modifications to the application, you can now launch your application on a mobile device without needing to submit it to an app store.
This is a great way to increase your application’s user engagement. In fact, if anyone has used Discord, that is a perfect example of a PWA that influenced how popular and successful PWA's has become. I am hoping that this article will help you to create a PWA and explore all the possibilities of PWA's.