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 implement today #PWA features to our Application.
Google describes PWA as reliable, fast, and engaging.
Reliable - in meaning load instantly when it is offline, or on low-quality networks.
Fast - it means to respond quickly to user interactions with smooth animations.
Engaging - it feels like a native app on the device, with immersive user experience.
Technologies support PWA are: Web app manifest, Service Workers, “Add to Home Screen” banner, and Push notification. I’m going to implement two of them.
The web app manifest provides information about an application in a JSON text file. The manifest enables your web app to be more native-like. To implement an App manifest, I have to set the following mandatory parameters.
A service worker is a script that runs in the background, separate from your web page. It responds to events, including network requests made from pages it serves. It wakes up when it gets an event and runs only as long as it needs to process it.
#progressive web app #web app #pwa
