[feat]: Adding Offline Support for Interactive Web Demo

[Neilblaze]

Description 🤔

This update aims to provide 100% offline support for the Interactive Web Demo (ATM Playground) that demonstrates touchless interactions using the MediaPipe Machine Learning Library.

Advantages 🚀

If precaching is enabled, the app will work offline after the first load. 🎉

Caching assets with a service worker can speed up repeat visits and provide offline support. Workbox makes this easy and is included in React App by default. Feel free to explore this guide to know more!

📌 For security purposes (especially to avoid cache-poisoning), the support has been limited to active session only, and cache expiration of 30 days has been set with stale-while-revalidate strategy for achieving best performance.

Additionally, a few other optimizations include updates to Kernel, minor UI bug fixing & adding LICENSE header to index.html.

🔸 Parent Repo → @Neilblaze/GSOC-23
🔸 Live Demo → Here

cc: @jenperson

Testing

To test the changes, open the live demo on your browser. If you're accessing it for the first time, it might take some time to load the model & assets on your local (depending on your internet speed). Once it's loaded, feel free to explore and interact with the demo. Disconnect the internet and then perform a refresh (or press F5); it should still load and work even in offline mode!

To extend it further, open DevTools by pressing Control+Shift+J or Command+Option+J (Mac). The Console panel opens. Then click on the Network tab, which will open the Network panel. Click on No Throttling & uncheck the Disable Cache to make sure the cached data is accessible & then perform a normal refresh to make it run while offline. If you want to compare different trials, you can use the profiler to capture the waterfall. The mean result of these trials can be found above.

Please note that if you terminate the current browser session, you will need to perform the initial load using an internet connection.

• Performance Boost → 6.1s from 16.8s, i.e. 275% (after 1st load) 📈
• Browser : Google Chrome — Version 116.0.5845.97 (Official Build) (64-bit)

---

Checklist

Please ensure the following items are complete before submitting a pull request:

• My code follows the code style of the project.
• I have updated the documentation (if applicable).

Type of Change

Please check the relevant option below:

• Bug fix (non-breaking change which fixes an issue)
• Documentation update (non-breaking change which updates documentation)
• New feature (non-breaking change which adds functionality)

[jenperson]

Thanks for this! Super impressive as always 😄