These days there is a lot of hype around creating progressive web apps (PWA) and how the adaption of the PWA technologies can make apps behave like native apps, all with just using the browser API.
First things first: what is a PWA?
A PWA is an app that progresses the traditional web boundaries by eg, enabling the user to use the app even if offline, interact with hardware directly from the browser, push notifications and native-like user experience and performance. The reason there is so much hype about this term is because this is a game changer for web apps, making them able to replace apps that previously only could work natively, only using the browser! We might see heavy desktop apps like Photoshop running as a web app in the future, especially as web assembly becomes more mature.
The foundational building blocks of a PWA
PWA has certain foundational building blocks you should be aware of.
The manifest.json file
The manifest file specifies information about the app, which is used for installing the app to the home screen, without getting it from an app store. This file specifies the app name, start URL, colors and icons among other. For a full list of options check the documentation.
This should give you an overview of what service workers are. We don’t need to actually implement service workers ourselves in this guide, because Angular has some neat tooling to do this for us on a higher abstraction level.
How to implement a PWA with Angular
Angular CLI and the @angular/pwa library makes the process of setting up a PWA really easy. What installing the @angular/pwa library would do is making the app offline accessible by caching all app files using service workers. This is done easily because Angular creates a ngsw
-config.json file, which acts as an abstraction of service worker scripts. The configuration of this file will be compiled to a service worker script.
Step 1: Create a new Angular CLI project
First, we are gonna create a new Angular project using.
Make sure to update Angular Cli first:
npm i -g @angular/cli
And then create a new Angular project:
ng new pwa-demo
This will create a new project called pwa-demo.
Step 2: Install the @angular/pwa library
Now we are gonna add the @angular/pwa library to the project with:
npm i @angular/[email protected]
Note: at the time of writing this is fairly new and I’m using the next version here for having the most developed version as none of the current version are considered stable.
Installing this library you may notice it added a bunch of other stuff to your project:
- Added two new files:
ngsw-config.json.ngsw-config.json in the root of project and manifest.json in assets
- The ngsw-config file is setup to cache all our files and make them offline available. This is where you configure service worker scripts.
- Fetches manifest.json from
index.htmlusing link tag as well as adds a theme-color meta tag.
- Adds app icons to the assets folder in different sizes, used when installing the app on phones
Step 3: Run your offline available app
For running the app you can first build the app with:
npm run build
For serving the app you can use
http-serverwhich can be installed with:
npm i -g http-server
Then open the terminal in the build location and run the app with:
You should now see the default Angular app but if you open dev tools and you make the app offline and refresh you will see, that the app is offline available. By going to the network tab you can see that the files are getting fetched from service worker:
Step 4: Add an install button
For installing the app locally you can add an install button like this:
Build the app again and serve it with http-server.
Now find your computer IP and browse the site by going to *computer ip*:port on your phone.
You should now see an install button and be able to install the app on your phone.
In this post we discussed the usage of PWAs and saw how to create a PWA with Angular. The @angular/pwa library easily made the app offline available and we added further PWA features such as native installation button.
Pingback: Creating Framework Agnostic Apps with Angular Elements – Christian Lüdemann IT()
Pingback: How to Cache HTTP Requests in an Angular App (PWA) – Christian Lüdemann IT()
Pingback: The Complete Guide to Angular Performance Tuning – Christian Lüdemann IT()
Pingback: How To Fix the Most Common Angular Performance Problems Like a Doc – Christian Lüdemann()
Pingback: The Complete Guide To Angular Load Time Optimization – Christian Lüdemann()