Introducing the JavaScript Calculator Progressive Web App (PWA)

Today I am pleased to announce my latest progressive web app (PWA), the JavaScript Calculator PWA.javascript-pwa-calculator-add-to-home-screen

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

javascript-pwa-calculatorThat 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.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel