If you don’t know what Progressive Web Apps (PWA) are I hope this tutorial will give you an introduction to PWAs and also make you understand how they work and why it’s such a good idea to develop PWA applications.
I will be using the latest version of Angular for the purpose of this tutorial.
What is PWA?
A PWA is a web app that uses modern web development technologies to deliver app-like experience to users when they view your website on a mobile device.
Why build a Progressive Web App?
A PWA app gives your website user features that were only available to native apps in the past. Here are some features that are available in a PWA application:
*Home screen icon
*Offline mode
*Web push notification
*and many more
Here is a link to a website that gives you a list of features that are currently available for PWA applications.
I hope this gives you a short and simple overview of PWA and why we should start looking at it. So let’s create our first PWA.
First let’s install Angular.
npm install -g @angular/cli
Once this is complete, we can make our new project
ng new my-first-pwa --skip-tests --style scss
If you are new to Angular CLI, here is the documentation link. I recommend taking a look at it, since there is so much you can do now with the Angular CLI. Either way, here is a brief explanation of the commands used:
*ng new Creates a new Angular application
*my-first-pwa This is the application name, so feel free to change to whatever you want
*--skip-tests This command will skip the spec files
*--style scss This will make the style files extension to be scss.
You now have your Angular application. In order, to preview your application you need to run ng serve -o This will build your application and open it in a browser.
Here is what it should look like:
Now let’s make our application a PWA. Luckily for us Angular has made it easy to convert an Angular application into a PWA. All we need to do is install a package called @angular/pwa and this will add all the files and setup your application to be a PWA. So let’s do it!
ng add @angular/pwa
This should take only a few seconds. We can now test our application to see what changed.
First, we need to build our project
ng build --prod
Unfortunately ng server does not work with service workers, we will need to setup a HTTP server to test our service worker.
Run the following command to install http-server.
npm install -g http-server
Once completed, change the directory to your dist folder cd dist/my-first-pwa and run http-server -p 8080
Go to the following URL http://127.0.0.1:8080 on your browser. You should see the default Angular application.
But how can I check to see if my PWA is working correctly? To do this, open your browser developer tool, click on network and check Offline.
Now refresh your browser. Notice that on the network tab all the files are being loaded from ServiceWorker, and your website loads with all the content and image. This means that all the resources are being loaded from the service worker’s cache. This is just one of the many benefits of PWAs.
That is it! As you can see, Angular makes it really easy to create a new application and set it up to be a PWA. In the next tutorial I will show you how to configure Firebase so you can host your application, make changes to the application, notify the users of application updates and also update the service workers so that the correct files are loaded when the application is run next.
Here is a link to my github repository with the tutorial files.
Top comments (0)