In this post I will talk a bit about how I developed my own PWA to create a better version of my schools app. I will go over the backend in a later post.
Introduction
So right now I'm in 11th Grade and my school has their own app that shows you whenever a class is dropped for the day, which is much better than having nothing but the app was slow, not really user friendly and overall just felt really blowted. So I obviously did what everyone that codes in their free time would to, at least that's what I think, and decided to create my own and improved version.
Stage 1: Planing
I started this of by thinking about all the features I wanted to include in it and obviously what platform I wanted to use for this.
The features were pretty easy to figure out, I just needed it to:
- load all the classes, like the original app
- have some way to filter them
- save some mobile data, remember it is mostly used in school
The platform was also pretty straight forward, because I don't have an android or apple developer account, the standard app stores were not an option and since I already did a bunch of webdev I decided to build it as a PWA.
Stage 2: The Internal Structure
Because I wanted to make it as fast and responsive as possible, I decided to write it in plain HTML, CSS and JS (later switched to Typescript).
I also decided to do, basically, all the fetching and processing on Data in the Service Worker, as to not put to much pressure on the Main Thread.
The service worker loads the data from my own back-end as this gives me more ways to reduce the amount of data-usage and also gives me only one point where they need to be loaded from the "official" servers.
So I needed a way to easily communicate with the service worker, for this I created a simple file that contains all the functions to make it easier in the long run. The communication itself is basically just based on passing JSON-Objects to each other that contain specific attributes like, the category and command, which can then be used to identify what needs to be done.
I also tried my best to split all the other aspects, like settings and managing different languages into their own files. This really helped me to keep things modular and easy to modify.
Also when I later on decided to switch to typescript, it really proved to be useful as I already had everything split into their own categories and this just helped me speed the transition up.
Stage 3: Putting everything together
Now that I had a working backend, which I will talk about in the next Post, and all the logic, I needed for my front-end to work and have all the features I needed, it was only a matter of putting it all together with a fitting Design.
For the Design I obviously decided on a very simplistic, dark theme oriented one. The main page only consists of the Title, a list of the classes and 3 buttons and I also did my best to make it scale well on different devices.
Future Plans
Like I already said, I recently switched from directly using Javascript to using Typescript and I will continue to improve my code in Typescript as to add more tests and in general try to reduce my technical debt to a minimum.
I'm also looking into maybe moving over to something like Vue.js as a front-end framework to make it all a bit easier, but I will have to investigate this more and decide if the extra stuff to load (keep in mind even Vue.js would add about 30% more data on the first load, but would then be cached) is worth the effort it saves me in terms of managing my UI.
Conclusion
This project is probably my most fun one and has already taught me a lot, from how a PWA works to using Typescript and integrating everything with a bunch of CI and CD stuff, yes I do in fact have CD as every new push to master will, after the Pipelines pass, be deployed.
I hope this showed a bit about how I went over creating a rather nice PWA and I would love to hear what other people think about how I did it and also about possible Improvements.
Top comments (0)