How to build PWAs (Progressive Web Apps) using Angular, Ionic Framework and Firebase Hosting.

Easy #4 steps to build Production ready PWA and Host it over Firebase.
PWAs are best to build mobile friendly web-apps. PWAs can install on your device, It receives push notifications and even many more..

What is PWA?

PWA: Progressive Web Application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.

Let’s start by creating a new Ionic app: PWA capabilities will be added later.
Run this command in your terminal/command-prompt:

sudo ionic start pwaChitChat sidemenu --type=angular

(put sudo to execute this command as administrator - for Mac/Linux users and for Windows users→ search Command Prompt → right click and then click 'Run as administrator' |sudo is not required for Windows users)

This command will generate a new directory of app by name: ‘pwaChitChat’

#1 Run: Ionic blank app in a local dev server.

• Go to our newly created project: cd ./pwaChitChat
• Run ionic serve within the app directory to see our app (this will serve our app in localhost on port 8100)

Once installed, we will test how a blank Ionic app scores in our PWA checklist. To perform this audits we are going to use Google suggested tool, Lighthouse.

So we are going to install and use the Lighthouse command line utility. Open your terminal and Install lighthouse

sudo npm install -g lighthouse

(-g stands for global) (lighthouse is the name of the package) and (npm is the Node Package Manager install third-party libraries like lighthouse)

This command will install lighthouse which allow us to perform the audits for an Ionic app. It’s really simple to use, just run...

lighthouse URL-TO-TEST --view

(Note that we run Lighthouse with the --view parameter to immediately open the HTML report in your browser)

Perform the audits with Lighthouse by running:

lighthouse http://localhost:8100/home --view

(make sure your ionic serve is running on port 8100)

Run: [ lighthouse http://localhost:8100/home --view ] in your terminal/command-prompt | and this is how it’s looks like after running Lighthouse

This execution will generate and open Lighthouse Report for our PWA.
Look below👇 the initial audit of PWA has bad results (0/100) due to the fact that we are serving the app from a development local server and also because the code is not built using performance enhancements (minification, etc).

PWA has bad results (0/100)

#2 Run: Ionic blank app in a local production server.

This time we will build our app with performance in mind. By running…

sudo ionic build --prod

We will be executing the build process with performance enhancements, and will get the outputs on our /www folder.

(Besides a production build, we will also run our app with a more suitable web server to use, instead of the development server that comes with the Ionic CLI. For this sake we are going to use the http-server package. This package enables us to create a local web server to serve the contents of any directory on your computer.)

To install http-server run:

sudo npm install -g http-server

After installation, using the http-server utility is really easy.

Inside/within the project folder start the http-server by running:

http-server ./www -p 8888

Run: [ http-server ./www -p 8888 ] in your terminal/command-prompt

(this will serve our app in localhost on port 8888 ) and then perform the audits with Lighthouse by simply running command in new-terminal/new-command-prompt:

lighthouse http://localhost:8888 --view

Run: [ lighthouse http://localhost:8888 --view ] in new terminal/command-prompt

Look below👇 the initial audit of PWA had bad results (0/100) although we improved performance from 0/100 to 72/100, there is still progress to be made. We haven’t even talked about any of the principles that constitute a PWA. We will cover that right away.

Improved performance from 0/100 to 72/100

#3 Run: Ionic blank app in a local production server — this time with PWA (@angular/pwa)

The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, I strongly suggest using the @angular/pwa package to automatically add a service worker and an app manifest to the app. To add this package to the app, simply run:

sudo ng add @angular/pwa

Run: [ sudo ng add @angular/pwa ] in your terminal/command-prompt

Click here to learn more about we have separate article to cover Angular in detail.

It’s time to see how the Ionic application performs with PWA capabilities. Build the app again (to include the new PWA features) just run:

sudo ionic build --prod

Then start the http-server by running:

http-server ./www -p 8888

Finally, perform the audits with Lighthouse by running:

lighthouse http://localhost:8888 --view

Look below in ‘Lighthouse Report’ page👇 the PWA icon is Activated — these checks validate the aspects of a Progressive Web App.

Here the ‘Progressive Web App’ icon is Activated!

We may also check the details about PWA by scrolling down the ‘Lighthouse Report’ page:

‘Lighthouse Report’ page shows the details about Progressive Web App

👏 We have done the job👨‍💻 to build a Progressive Web App (PWA) with Angular, Ionic 4/Ionic Framework.

#4 Run: Ionic blank app with PWA (@angular/pwa) deploying to Firebase Hosting.

Firebase Hosting is super easy to work with besides it’s free and provides many benefits for Progressive Web Apps, including fast response times (thanks to CDN’s), HTTPS enabled by default, and support for HTTP2 push.

Follow me while I’ll show you how to deploy our Ionic PWA to Firebase.

Before start..

We need to create and setup a Firebase project.
Click here👆 for Steps to setup Firebase (Create New Database in Firebase Firestore by web.)

Okay, I assume you have followed each step from above link↑ to setup a Firebase Project.

Deploying to Firebase becomes easy after correctly setting up a Firebase project.

We should always prepare production build before deploying to Firebase.
Let’s prepare production build to improve performance.
To do so follow the instruction👇👇

If you are building Angular App, simply run in your command-prompt/terminal:

ng build --prod

You may need to put ‘sudo’ at the beginning of this command to execute it as administrator. Or if you are a Windows user simply open up your command-prompt as administrator.

🎉 To test your Angular production-build locally:

1. Build your app: ng build --prod
2. Install http-server for serving the app: sudo npm i -g http-server
3. cd (change directory) into the the build location
   cd dist/my-project-name/
4. Run the app with: http-server
5. Open http-server url, should look something like this http://127.0.0.1:8080/

If you are building Ionic App, simply run in your command-prompt/terminal:

ionic build --prod

You may need to put ‘sudo’ at the beginning of this command to execute it as administrator. Or if you are a Windows user simply open up your command-prompt as administrator.

What does it do, exactly? — prod flag minimizes and optimizes your entire project to a single file depending on type. It also ignores plugins/imports which you have included but haven’t used.

Great job 👏👏
We are now ready to Deploy our project to Firebase 🚀

Simply deploy the app by running:

firebase deploy

You may need to put ‘sudo’ at the beginning of this command to execute it as administrator. Or if you are a Windows user simply open up your command-prompt as administrator.

Run: [ firebase deploy ] in your terminal/command-prompt

Once the app is deployed, perform the audits with Lighthouse by running:

lighthouse PATH-TO-YOUR-FIREBASE-HOSTING-URL --view

This was my firebase-hosting-path: (replace the below path with your own path)

lighthouse https://pwachitchat.firebaseapp.com --view

Run: [ lighthouse PATH-TO-YOUR-FIREBASE-HOSTING-URL --view ] in your terminal/command-prompt

🤩 Congratulations! Look below👇 the Lighthouse Report page shows we built a Progressive Web App with Ionic Framework with all the principles covere — Optionally you may scroll down this page and fix suggested issues so as to get the performance score up to 100%.

PWA Improved performance from 71/100 to 88/100

Open-up URL: https://pwachitchat.firebaseapp.com (Or YOUR-FIREBASE-HOSTING-URL) in your mobile chrome-browser.
This will ask you to add App on Home Screen → You can anytime change app-name, theme-color, background-color of your app splash screen from manifest.json file or manifest.webmanifest file inside your app /src directory.

Steps to add ‘App’ on ‘Home Screen’

Capabilities of PWAs on iOS

With the Web Platform on iOS you can access:

• Geolocation
• Sensors (Magnetometer, Accelerometer, Gyroscope)
• Camera
• Audio output
• Speech Synthesis (with headsets connected only)
• Apple Pay
• WebAssembly, WebRTC, WebGL as well as many other experimental features under a flag.

What PWAs can do on Android (not on iOS)

• On Android you can store more than 50 Mb
• Android doesn’t delete the files if you don’t use the app, but it can delete the files under storage pressure. Also, if installed or used a lot by the user the PWA can request Persistent Storage.
• Bluetooth access for BLE devices
• Web Share for accessing native share dialog
• Speech Recognition
• Background Sync and Web Push Notifications
• Web App Banner to invite the user to install the app
• You can customize (a little bit) the splash screen and the orientations you want
• With WebAPK and Chrome, users can’t install more than one instance of a PWA
• With WebAPK and Chrome, the PWAs appears under Settings and you can see data usage; on iOS everything appears under Safari.
• With WebAPK and Chrome, the PWA manages intents for its URL, so if you get a link to the PWA, it will be opened in standalone mode and not within the browser’s window.

Done! 🤩 It’s that simple to build PWA.

See you later👋👋

Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)

Stay connected for more articles:
https://medium.com/@AnkitMaheshwariIn

If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…

Next to add — Push Notifications to Progressive Web App (PWA) with Ionic4 and Firebase Hosting. Click here 👇👇

Adding Push Notifications to Progressive Web App (PWA) with Ionic 4 and Firebase Hosting.