From the beginning, my WordProgressor was meant to work as an app on my phone. Or desktop. Or wherever. And since I learned about PWA, I knew that combining this with angular would work. So I concentrated on creating my MVP first and then turned it into a PWA. In just one git commit.
Research
Most of what is needed to turn an angular application into a PWA is written in the “Step by step guide” from Angular University (Dec 2021). I had to make only few additions and the local http-server from the guide didn’t work out for me, but all in all this guide is golden.
Most of the magic happens using the line below to add PWA support to an existing project.
ng add @angular/pwa --project <name of project as in angular.json>Service Worker
A PWA or progressive web app is a web application (using html, css and js) that is created as a native app. What can be opened in a browser can be used as a PWA.
PWAs work because of service workers. This guide linked above does a great job in explaining all the details. In very short, the service workers are the components that sit between the application and the os, internet, apis and so on. It enables native functionalities or database requests.
Service Workers wont “work” when starting your angular app with ng serve. Make use of an http-server instead. As an alternative to the one mentioned in the guide, try the http-server-spa if you run into problems. You can check them using the chrome developer tools.
The actual coding
All changes to enable PWA support happened in one commit. I differed from the guid by the server mentioned above, as well as calling the new file manifest.webmanifest.
Also make sure to have a nice looking icon that will show up as page icon on your phone.
Besides, here are the things to do, that are found in the guide and my commit.
- add a ngsw-config.js
- add manifest.webmanifest
- use SwUpdate in your AppComponent to inform the user about available updates
- register the ServiceWorkerModule in AppModule
- show an “Install PWA” button wherever it feels appropriate (this will only be shown if the device supports PWAs)
- add metadata to the index.html
Chrome Analyzing Tools
Under “Application” > “Service Workers” the running service workers are listed.
And with the “Lighthouse” tab you can generate a report on how efficient your app performs. The internet is full of tips on how to better your score on all these categories.
PWA
Besides “because I can”, why would I want to make my web app a PWA?
- You get an app without the need of a store (app store or play store), who require registration, fee, royalties to the store and longe waiting for a new version to release.
- The PWA really shines at offline support, which is tricky implementing with cross platform languages but is handled by the service worker
- As with cross platform, one code base serves all operating systems. A finished web application may be added to your home screen with little effort.
Further goodies of PWAs are their support of versioning, notification and access to native functionalities. All thanks to the service workers. Some of them will be content of follow up blogposts.
If you ask me, seeing my webpages favicon as an app icon on my phone gives me joy.