What did I learn by built Rajkot AQI PWA?

Recently, I have interviewed and they gave me advice; “You have good technical skills, but you need to share your learning experience”, and I agree with their advice.

What are my strategies to start a new project?

After Diwali was gone, the Next day I have seen the AQI website of Rajkot (http://117.206.156.227:8090/public/stations/1) while I was read the newspaper. So I have determined to create today’s generation PWA.

What are the challenges?

The challenges I have felt:

• Where do I get all data?
• What are the features?
• Which front-end technologies should I use?
• Which backend technologies should I use?
• How do I minimize the time of development?

The Answers to Challenges

Here are my ways to overcome the challenges, Every site I have visited I like to do backend engineering (Analyse the endpoints, Microservices) by tools such as curl, DevTools. So I have found the endpoint where data come from. Next, Features I have decided users can explore rich statistics + near station AQI. Next, I have decided to use the React library to build the frontend. Next, I have decided to use Express + Typescript to build the backend. Mostly I don't use any CSS framework or library to build the web. But I want to minimize development time so I’ve two choices either go with Tailwind CSS or Chakra-UI. In the Chakra-UI docs section, I have seen a comparison, I liked about Chakra-UI provides built-in React Components(Layout, Forms, Feedback, etc.) while Tailwind provides atomic CSS classes to help you style components, Another is learning curve is the same for me (Both).

But In feature still, something was missing. That day I’ve installed zomato, Next day when I have seen my mobile notification, I have seen an AQI notification (sent by Zomato). Now I have decided users can also subscribe for scheduled notifications.

What did I learn?

WorkBox

I know Create React App already provides the facility of the register service worker. But I want to learn Workbox.

What is WorkBox?

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps.

Workbox provides APIs for Precaching, Runtime caching, Background sync, Register Routing, more.

How do I use the WorkBox to React?

There are many ways but I like workbox-cli.

1. Install workbox-cli
2. Initialize workbox using workbox wizard
3. [Optional] Edit workbox-config.js if need.
4. Register Service worker in public/index.html
5. [Optional] created and written sw-additional.js
6. Update build command in package.json

WebPush Notifications

What is WebPush Notification?

Web push notifications allow users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, relevant content.

The Push API and Notification API open a whole new set of possibilities for you to re-engage with your users.

Service workers active in the background to use Push API.

How push works you can read more about https://developers.google.com/web/fundamentals/push-notifications/how-push-works

Client-side

Microservice [NodeJS API]

You can use any database to store subscriptions.

Screenshots of Rajkot AQI PWA.

First seen

Near station AQI based on Location.

When the user presses the bell icon.

Visit https://aqi.rmtsbus.in/?from=Medium and Thank you )