Introducing the JavaScript Calculator Progressive Web App (PWA)
Last Updated -
Today I am pleased to announce my latest progressive web app (PWA), the JavaScript Calculator PWA.
Just like yesterday's Hextris this is a fork of a GitHub repository. The original calculator application was written by Jue Jin. The text and comments are in Chinese, I think. The numbers are well numbers and that is the more important aspect for now.
This is a simple JavaScript based calculator that looks like the iOS native calculator. There are no 'advanced' math functions available, at least not yet. Maybe I will add more to the application later.
Like {Hextris](https://love2dev.com/blog/pwa-hextris/) the code is not up to my personal standards, but my first goal was to make it a progressive web app.
The application does use Zepto, a very lightweight jQuery like library. Thomas Fuchs, from nearby Philadelphia, is the creator.
The source code is available on [GitHub](https://github.com/docluv/sCalc). Feel free to clone or fork it as a reference or fun project. It should serve as a nice little starter PWA project.
The Progressive Web App Upgrade
If you have followed along, upgrading existing web sites and web apps to progressive web applications is relatively simple.
- Add a Valid Web Manifest File
- Register a Service Worker with at least a fetch event handler
- Serve via HTTPS
That is the bare minimum to be a 'PWA'. Of course there are many other checklist items you should meet to be a meet the full spirit of the progressive web application requirements.
I used the PWA Builder image generator again for the calculator. This time I unchecked the Windows * options because that creates images for the now dead Windows Phone platform. The calculator still has 77 icons.
I added the same service worker used in the Hextris application, but of course changed the files to be cached. The calculator uses far less code, which is a big plus.
Finally, HTTPS is free and easy to setup in AWS using CloudFront and the Certificate Manager services.
Wrapping It Up
This is the second in a series of simple progressive web apps I am publishing. My main goal is to demonstrate how easy it is to upgrade any web site to be a progressive web app.
If you want to learn more about developing PWAs you should sign up for my Progressive Web Apps: From Beginner to Expert Course for just $29! That is a $171 savings from the normal $200 price.
There are currently over 21 hours of video instruction plus other resources. I hope to push another 4+ hours in the near future as well.