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]( 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]( 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!

We use cookies to give you the best experience possible. By continuing, we'll assume you're cool with our cookie policy.

Install Love2Dev for quick, easy access from your homescreen or start menu.

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel