A super simple progressive SPA using IndexedDB and Cache API that anyone can build in a few hours
Over the past several months, I’ve had the fortune to develop Apps for Google Chromestore and one app that has more than half a million users (here’s my story, and be selected for Udacity’s Grow with Google.
As a part of this scholarship I got the chance to work on open source group projects. I also developed an app that reflected my own history (as a former immigrant, and now a proud US citizen) and was a small attempt towards helping aspiring immigrants.
There are 100 civics questions on the naturalization test. During the naturalization interview, applicants are asked up to 10 questions from the list of 100 questions in English. You must answer correctly six (6) of the 10 questions to pass the civics test in English. This can be very hard for many immigrants. Some may know the answers but just getting up to speed on English. Others may want an interface that is more helpful than just the booklet.
So I used some of the code I had been developing earlier (you can see an early version here under citizenship test and completely revamped it.
The questions are shown, but not the answers, at least not until you click “show answer” . Some questions are dependent on location and for those you need to select a state. For instance the screenshot here shows the Senator for the state of California.
You can check out the live demo here and the github repo here under the development branch. And here is the wiki. The UI is inspired by the wonderful design work of Alexandra Hoefinger.
With all the learning from my PWA course, the scores were almost a perfect 100% on Lighthouse! Still trying to figure out the last bit to get to 100% on PWA.
Here are my main noob takeaways:
Although indexedDB is complicated, it is really worth the effort and Jake Archibald’s IndexedDB Promised library makes it easier
Caching of static assets improves performance dramatically
Rather than develop stand alone functions for indexedDB it is far better to encapsulate all the functions within a variable
Write methods to get and set data (in my case I don’t have update and delete but you may want to use those too). See link in Github. This makes it much easier to do all the work you need to do with your data.
Check to see if an object store exists before doing writing data (see code for details)
If you are making API calls, within the fetch statement, access the method you need from your idb variable and do stuff with your data
I hope this write up including the code for the IndexedDB code and the Cache API code is helpful for someone else! If you need any help regarding use of IndexedDB, drop me a line but don’t forget to clap first :-)
