Building the Frontend of a Progressive Web App Using React
Tags: webdev, react, tutorial, opensource
Published: 2022-12-02 05:16:12

Keeping up the pace of continuous progression and development, I sought out for more challenging issues to fix after Hacktoberfest.

[Seneca-CDOT](https://github.com/Seneca-CDOT) has many amazing open-source projects to which students are actively contributing - [telescope](https://github.com/Seneca-CDOT/telescope), [my-photohub](https://github.com/humphd/my-photohub), [vscode-extension](https://github.com/Seneca-CDOT/vscode-seneca-college), and so on - and from those options, I chose to work on My Photohub as I found the idea of storing a picture on a GitHub repo very innovative. It was also a new project and I wanted to be among the first time contributors. 

Here is a small description of the project taken from the README.md

>**My Photohub** is a web app that makes it easy to share your photos on the web. **My Photohub** takes your images and optimizes them for the web, creates a beautiful HTML page to show them, and hosts everything in a new [GitHub Repository](https://docs.github.com/en/repositories) owned by you! Your photo web page is made available to the world via [GitHub Pages](https://pages.github.com/). Best of all, everything is free, and **you** are in control of the end product.


## The Issue 

I tackled the issue -  [Create a PWA UI for accessing the service](https://github.com/humphd/my-photohub/issues/4) and raised [PR here](https://github.com/humphd/my-photohub/pull/10). To get started, I first had to understand what is a Progressive Web App. 

## What is a Progressive Web App (PWA)? 

As stated in the[ mdn web docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps): 

>**Progressive Web Apps** (PWAs) are web apps that use [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), [manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest), and other web-platform features in combination with [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) to give users an experience on par with native apps.

Some examples of PWAs are Spotify, Uber, AliExpress, Starbucks, and many more! 
PWAs have faster load times, are more cost-effective to develop, and with the aid of service workers can even be used offline. 


## Offline First 🤔

As stated in the [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps): 

>The "offline first" — or "cache first" — pattern is the most popular strategy for serving content to the user. If a resource is cached and available offline, return it first before trying to download it from the server. If it isn't in the cache already, download it and cache it for future usage.

This was an interesting concept to me as I had never thought of or built anything keeping offline first in mind. So, I dug a little deeper and researched more about it.

Here is an [awesome resource ](https://rxdb.info/offline-first.html) to learn about offline-first. 


## The PWA React App 

To get started I first did: 

```bash
npx create-react-app my-app --template cra-template-pwa
```

After running the command, this is what gets generated. 

![a](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piinfl9ytqdr1o5s5nim.png)


Notice, how we have something called service workers here. This was pretty foreign to me.

## What are Service Workers?

>Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). ( source: [mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API))

Service workers are scripts that a browser executes, without any direct connection with the DOM. The entire offline experience is possible because of service workers, allowing features such as background synchronizations and push notifications. It provides content and the ability to cache assets in a web browser. Due to this caching mechanism, the app can work offline. 


## The Process in Brief

To create a PWA we need: 

-   **HTTPS** — The app should be served over a secure network
-   **Service Worker** — A script handling network calls and asset caching
-   **A manifest.json file** — A JSON file containing design details

Then, I had to start working on the core frontend components of the site. 

1) Navigation bar 
2) A photo-uploading interface 
3) An authentication dialog box 



## Reflection

I learned a lot of new things through working on this project. The concept of PWAs, Service Workers, and GitHub APIs was a lot to work on within one project.