How to create a PWA a scoring 90+ score in Google Lighthouse using Ionic 2
Install Ionic globally
To use the Ionic CLI we fist need to install Ionic globally.
$ sudo npm install -g ionic cordova
Create a new blank Ionic 2 project
After that we can make a new Ionic 2 project by executing the following command using the Ionic CLI.
$ ionic start MyPWA blank — v2
Serve the application
Execute the ionic serve command to serve the application in your browser. Serving the application in the browser automatically creates a web based build of your Ionic project.
$ ionic serve
Install Lighthouse for Google Chrome
Click here and install Lighthouse. After installation and icon will appear.
Run Lighthouse to generate a report
If you click on the Lighthouse icon it will do some tests and generate a report.
You need to close Chrome Developer tools to be able to run the test.
1. App can load on offline/flaky connections
Ensuring your web app can respond when the network connection is unavailable or flaky is critical to providing your users a good experience. This is achieved through the use of a Service Worker.
You can enable the Service Worker in Ionic by un-commenting the Service Worker part in the index.html
After enabling you automatically resolve the Service Worker fail under User can be prompted to Add to Homescreen
2. Site is progressively enhanced
Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.
<p>Please enable it to get the full experience.</p>
4. Page load performance is fast
Users notice if sites and apps don’t perform well and that will give them a bad experience. To pass this point in the report let’s make a production build using Ionic CLI’s build command and the — prod flag.
$ ionic build — prod
Create a secure hosting environment using Firebase 🔥
That’s it you’ve created your first Firebase project 🎉
As you’ve might have noticed Firebase includes a lot of features from analytics, to cloud messaging to hosting. We are going to use the last one to host our PWA in a secure environment.
We can deploy to Firebase by using the Firebase CLI login, init & deploy commands. First, you need to login into your Firebase account (a web browser will pop-up).
$ firebase login
After that traverse to the right directory and execute Firebase init, select hosting and select the project we’ve created above.
$ firebase init
Set the www folder as default
After initializing the project we can simply deploy the application to Firebase by executing.
$ firebase deploy
That’s it we’ve deployed our package 👍🏻
Run Lighthouse (again) to generate a report
Click on the lighthouse icon when in your Firebase environment, again it will do some tests and generate a report. This time, and most of the times it will generate a 90+ score.
100 out of 100?
If you want to get a perfect score you should need to optimize more. Due to the way Ionic was build the first meaningful paint, perceptual speed index, time to interactive are higher than recommended. In my opinion, this wouldn’t be an issue but there’s always room for improvement.
We can measure our application by applying the RAIL method. RAIL is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in different ways:
I’ve made a repository containing the code of myPWA https://github.com/0x1ad2/ionic2-starter-pwa/tree/master feel free to clone and use it, it’s released under MIT license. Also if you want to add something to the blog & starter, just add a pull request or send me a tweet.
Thank you for taking the time to reading this story! If you enjoyed reading this story, clap for me by clicking the 👏🏻 below so other people will see this here on Medium.
You can follow me on Twitter @0x1ad2 and feel free to tweet me anything!
Also, I work at Wehkamp.nl one of the biggest e-commerce companies of 🇳🇱
We do have a Tech blog, check it out and subscribe if you want to read more stories like this one. Or look at our job offers if you are looking for a great job!