Crowdbotics
Published in

Crowdbotics

Learn to Build a Simple Progressive Web App (PWA) with Angular and Lighthouse — Hacker News Clone

How to build a simple Hacker News clone PWA with Angular and Lighthouse , step-by-step.

Quickly: Progressive Web Apps vs Native Apps

A Progressive Web App can have similar capabilities of a native mobile application. Mobile devices that run Android already have a powerful web browser, Google Chrome, pre-installed. A PWA app can provide a similar experience to that of a native application through the browser alone. Nowadays, some PWAs such as Twitter Lite or Facebook Lite even appear in the app stores.

Requirements

To follow along with this tutorial, you are going to need two things.

  • Lighthouse Chrome Extension

Installing Lighthouse

Lighthouse is an open-source tool created by Google which is used to audit websites and applications alike for accessibility performance, PWA features, and SEO. There are various ways to run this tool, such as from command line or as a browser extension. Lighthouse runs a series of audits against the URL of your application and, on completion, generates a report on how well the page performed.

On the top-right corner in Chrome Extension

Installing Angular CLI

In this section, I am going to show you how to install Angular CLI and then generate a project. Open your terminal.

Creating The Application

In the previous section, we generated our project directory, so now let’s run the default boilerplate application that comes with @angular/cli. Run the below command from your terminal.

Setup an HTTPClient

Now let us set up our Angular app to make it work first before I show you how to audit it with Lighthouse.

Creating an API Service

Let’s now create a service that fetches the data from a third party API we are going to use in our Angular app. To create a new service from command line please type the below in your console or terminal.

Consuming the API Service

Open the file app.component.ts and import the ApiService as below.

Building the UI

The purpose of this tutorial is to teach the concepts that lead to building a PWA using Angular. Since this is only a demo, I am going to keep it the UI simple. I am not going to use any third party UI library. However, you can make it look as awesome as you want or use a third-party library if you want to.

Building the PWA

After building the web application when you start to convert it to a Progressive Web App, you will have to build for production. Most PWA features are not compatible in development mode. You cannot trigger the execution of service workers, caching, use HTTPS etc. To build our current Angular application for production we have to run the following command from the terminal.

You can find the complete code for this PWA demo at the Github repository below 👇

Building A Web Or Mobile App?

Crowdbotics is the fastest way to build, launch and scale an application.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aman Mittal

👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 2M+ views at Medium| My weekly dev newsletter 👉 https://www.getrevue.co/profile/amanhimself