Keeping up the pace of continuous progression and development, I sought out for more challenging issues to fix after Hacktoberfest.
Seneca-CDOT has many amazing open-source projects to which students are actively contributing - telescope, my-photohub, vscode-extension, 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 owned by you! Your photo web page is made available to the world via GitHub Pages. 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 and raised PR here. 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:
Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with 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:
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 to learn about offline-first.
The PWA React App
To get started I first did:
npx create-react-app my-app --template cra-template-pwa
After running the command, this is what gets generated.
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)
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.
Top comments (0)