"Jump Rope Tracker" - created using svelte PWA w/indexedDB. It's a exercise tracker app specially for jump rope exercise and provides stats, timer for tracking.
What's the motivation behind it?! I wanted something useful for myself to keep track of the progress I've made so far in my jump-rope journey and want it to be flexible according to my needs. So tada, why not create one instead!
- contains bar chart and line graph for displaying stats.
- pagination
Svelte features:
- Custom stores: inspired by a redux -like store in Svelte by a fireship and went with that state management solution since it is a CRUD operation. And localstorage custom store to deal with primitives which needs reactive changes across the application.
The end user is myself for personal use. I really didn't want to store and manage user data at all. looking at the options: we have LocalStorage, IndexedDB.. And Web SQL is deprecated.
- an object oriented database which has a key-value store in which we are able to perform CRUD operations which live in your browser. Provides set of API to
- used to store the object which stores the streak data like max PR count, and other computational data. To avoid recalculating every time the user opens the application. Introduced an object property called hash which stores the hash of the IndexedDB rows. If the data in IndexedDB is tampered or if the user added a new log then, it will be recalculated. If not, then it will get from localstorage.
The service worker is used to handle notifications in the background when the app is not visible.
There are two types of notifications on the web.
- Push
- Local
- are sent from the remote server. For example: If Amazon offers any sale like independence day sale, it will be pushed from the server to the user.
- don't need a server to show notification, and will be handled by the app itself. Local Notifications works the best for my use case where I am able to show notification when the web page is not visible and the timer is running.
One setback when working with notifications, Once the notifications are sent out to the user we have no control over it (ie) cannot be able to manipulate/update the content of the notification after it is sent out to the user. I wanted to display a running timer on the notification bar, as it runs for every second. Imagine the nightmare to show and delete notifications for every second, it will overload the browser resources and the worst user experience. So I went with,
If the timer is running and the app is not running on foreground on focus, it will display notifications like pause/stop.
If pause is pressed then close and show a new notification which contains play/stop instead.
Notifications can either be triggered from the main thread or service worker in the background. Since we don't have access to the main thread while the app is not visible, service worker notifications make much more sense.
- tried moving the timer logic to the service worker to see if I could get away with closing the app entirely and just have a notification that the timer is running. But browsers kill the service worker if it detects abnormal operations.
Uses vite-pwa-plugin for PWA configuration and caches.
