PWA Examples
Some examples of PWAs as I build a few to learn.
See the pwa-examples from MDN Web Docs for some more mature examples.
My Examples
-
Hello-PWA: A simple Hello World app for my first PWA. Follow along with James Johnson on his tutorial, A Simple Progressive Web App Tutorial, to create your own PWA.
-
ToDo-PWA: A PWA based on the tutorial Building a Mobile App using HTML, CSS, and JavaScript. It is close to the original but I made a few changes to fit my way of doing things. The original code is available at github.com/wisdomekpotu/PWA-TodoApp.
-
Lonely Globe: Another PWA based on the tutorial Getting Started with Offline First using UpUp. See the TalAter/UpUp GitHub repo. Just go down into demo folder for the tutorial code under “getting-started-with-offline-first-demo”. The tutorial isn’t complete. Had to look at the code on GitHub. And the .min.js.map files weren’t complete so changed to using the non-minimized js files from the src folder in the root of the repo.
Planned Projects
- PWA Scaffold: Feel the need for a bit of scaffolding to build future PWAs. May not need to do this. See the links below.
- PWA Starter: Trying out this template. Made a fork of it so I would have a copy. Following these directions to give this thing a trial go of it.
- Simple PWA: Simple Progressive Web App (PWA) template. Will (also) be trying this one out in the future. I have also made a clone of this repo to have a copy of it. The documentation for this template is in the README file and on the website, which is also linked to in the repository.
-
Shopping List: Should be a quick and easy project. Thinking about using the ToDo-PWA as a blueprint.
-
Prayer-PWA: I can use help in my prayer life. Why not build an app to help? And I could share it.
- Sales-PWA: Personal sales app for tracking customers, sales, and expenses. Could come in handy come tax time. Inspired by my spouse’s Color Street sales business.
Build Your Own
PWA Builder: Everything you need to get started building your own PWAs. Great tools to create, convert, and publish your own PWA. Plus easy to read documentation to learn from.
-
PWA Builder Studio: Turn VS Code into your very own PWA developer platform.
-
PWA Starter: Template to get you started building PWAs. Included in the PWA Builder itself and in the PWA Builder Studio.
-
PWAbuilder Suite Documentation: Everything you need to know to get started with any of the above three tools.
-
PWABuilder Blog: Keep up to date with the latest updates about PWABuilder.
-
PWABuilder on Github: If you are into using github, this ia good jumping off point for evedrything PWABuilder.
Learn PWA at Web.dev: This course covers the fundamentals of Progressive Web App development in easy-to-understand pieces. The Google Developer Training PWA Training Lab link redirected to this site.
Get started with Progressive Web Apps: Learn to build PWAs from Microsoft Learn.
30 Days of PWA: Students and developers new to PWAs can learn to build their own Windows apps.
PWA Tutorials
More PWA Examples
- Appscope: A directory of Progressive Web Apps, showcasing the best PWA examples. All apps listed run entirely in the web browser and launch instantly without an app download. If you wish, they can be saved to your home screen just like any other app.