Hi! Let’s create today a Progressive Web Application in 3 easy steps.
- Create an Application Shell
- Create the main Functionality using #JavaScript
- Implement Progressive Web features
In this series, we will create an app titled “The conscious timer.” A simple and straightforward approach to stay focused. Hit the button to start the timer. The bell rings every 5 minutes remembering to keep your focus.
Let’s create today the main JavaScript functionality. To make the ring bells, I need to load a “wave” file and run it using the #HTML5 Audio component.
To make it stop, I need to pause the sound and reset the timer because the HTML5 Audio container doesn’t have a “stop” function.
To make the ring bells every 5 minutes, I’m going to use “setInterval” methods. I don’t need to re-create an audio container to fire a “play” function every 5 minutes, because it’s a persistent object. But I need to store a reference to an “interval” to remove it when a user wants to stop this action.
Take into account that the JavaScript timer is not precise and doesn’t guarantee to run every five minutes. It just guarantees to fire not earlier than you set. When the tab with the app is not active, the browser will trigger our actions on idle time. That means that the bell will ring in some random time, but not earlier than every five minutes.
#progressive web app #web app #pwa
