PWAs are a hot topic right now, in case you’ve been hiding under a rock PWAs stand for Progressive Web Apps. They allow us to make our web experiences feel more like native applications on our phone. They achieve this through a few different techniques:
- Application Manifest — A manifest json file that describes the application, its icons, splash screen, etc.
- Fast load times via service workers — By using service workers we can improve load time of our application by caching all our assets and even api requests.
- App Shells — A plain HTML view of our application that can load instantly without javascript to create a faster load time.
To achieve all this, you need lots of tooling. Thankfully for Angular there is a lot of tooling that can improve this experience. At ngconf in 2016, Jeff Cross and Alex Rickabaugh introduced Angular Mobile. Since then the project has been somewhat on the back burner but this year a new project was created by Alex Rickabaugh and demo’ed at Google IO. Whether you're new to PWAs or have built some before, this is definitely a must watch.
Alex introduced a set of tools called ng-pwa-tools. Its pretty new so the documentation is a bit lacking but Alex goes over everything you need to know in the Youtube video above. NG PWA tools build on a project called @angular/service-worker which was first introduced by Jeff and Alex back in 2016. The Angular CLI has some abstractions around these new ng-pwa-tools that allow us to make this experience even better.
Service Workers
First make sure you are on the latest CLI, then we can add a new flag to our angular-cli.json called serviceWorker.
{ "apps": [ { "serviceWorker": true }
]}
This flag falls right under your apps property in the config file. We need to install the service worker project, simply do npm i @angular/service-worker --S and we are ready to test it out.
Next let’s run ng build --prod to build our files. For this demonstration, I’m using the Angular Material documentation site for this demonstration. Let’s take a look what the build produced now.
In our dist folder, we have 3 new files:
ngsw-manifest.json— A manifest file automatically generated that contains all our resources.sw-register— A service worker registration script.worker-basic— The worker script that helps facilitate all the registration/etc.
When we ran our build, it also updated our index.html to call add the service worker registration.
So with one flag, we were able to automatically build all our assets and setup web worker registration and caching. The CLI automatically crawled all our configuration and generated all this for us! Sometimes you have files such as external fonts you also want to cache that the CLI can’t find. If you create a ngsw-manifest in the root of your project you can provide some extra configuration. In the index.html you can see the material docs use a few external assets that weren’t able to be resolved by the CLI. Lets create our ngsw-manifest.json and put add references to those files.
When we re-run the build, the CLI will automatically merge these custom options with its auto generated assets code and presto!
Manifests
Now that we’ve created our service workers, we need to add a application manifest to describe our application. To do this, simply add a manifest.json file in the src folder of our application.
The Angular material one looks something like this:
In this file, I’m doing a few things:
- Describing the application via Name and Short Name.
- Describing the orientation and display modes
- Describing all the different sizes and types of icons to use. Tip: You can use http://realfavicongenerator.net/ to automatically generate all these for you.
Now we need to tell the application where this file is by adding a new tag to our index.html <link rel="mannifest" href="manifest.json" />. We also need to tell the CLI to pick up this file when we do the build by adding it to the assets property in our angular-cli.json file.
Wrapping up
In this article we talked about using application manifest to describe your application for mobile devices and using service workers for app caching for instant load times all via the Angular CLI! In an upcoming article, I’ll be discussing taking this a step further with App Shells so stay tuned!
I hope you enjoyed the post, if you liked it follow me on Twitter and Github for more JavaScript tips/opinions/projects/articles/etc!
