This very basic PWA sample contains the main characteristics a Progressive Web App should have. Into this code you will find:
- manifest.json
- Service Worker
- Cache Storage
- Use of localstorage
- Offline-First support
- Mobile-First support
This very simple task register application integrates JQuery to solve the basic animations that you can see on DIVs, and also animations for many other HTML tags. Materialize CSS framework is also integrated, just to solve the UI. Finally, UpUp JS simplifies the Service Worker and the Offline Support.
You can test it in your mobile phone going to the following URL: My personal website. You will see at the bottom of PWA screen the default message: ADD TO HOME SCREEN. Tap on that and... Let the magic begin!
After a few seconds, you'll find the PWA icon on the smartphone's Application Sandbox. Tap the icon to start Task-it! PWA. If you wanna test its full offline support, go to the Airplane mode before opening Task-it! PWA.
This PWA works fine in most of Web Browsers and also the Operating Systems. I tested it on MacOS, Windows, Android and iPadOS, and in all of them I can use it w/o problem and also install it and run it in Airplane Mode.
A few screenshots of Task-it! PWA and how is its behavior according to the type of screen where you are running it.