From the ground up, assuming you already know JS and how to code regular web apps, the core of a PWA is offline first capability, so probably start with learning Workbox to create a service worker for gracefully handing ajax requests. Then, you'll need a way to store data locally, indexeddb is the best tool for that, I recommend a wrapper, either PouchDB or my favorite RxDB. The final, and easiest, part is the app manifest that contains the metadata about the app and it's resources. To start learning about PWA architecture I'd start here: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures then explore the above tools when actually building one. Answer from MindlessGuidence on reddit.com
Reddit
reddit.com โบ r/pwa โบ what is the best resource to use to create a pwa?
r/PWA on Reddit: What is the best resource to use to create a PWA?
January 19, 2021 -
I know of PWAs but I've not been able to find a good resource that can help guide me to build one from the ground up. I love to understand things from the base and not just jump right in to a framework-like environment.
Any idea on this?
Top answer 1 of 4
3
From the ground up, assuming you already know JS and how to code regular web apps, the core of a PWA is offline first capability, so probably start with learning Workbox to create a service worker for gracefully handing ajax requests. Then, you'll need a way to store data locally, indexeddb is the best tool for that, I recommend a wrapper, either PouchDB or my favorite RxDB. The final, and easiest, part is the app manifest that contains the metadata about the app and it's resources. To start learning about PWA architecture I'd start here: https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures then explore the above tools when actually building one.
2 of 4
3
Other answers sounds a lot like "This is what I did so you should do that too", ignore them. Build a mobile website first (HTML, CSS, JS) and then add a proper manifest (you'll need the pictures too). That's it. That's a PWA. Everything else is icing on the cake. Start with that, build on it over time based on your actual requirements like offline service workers, etc.
Mozilla
developer.mozilla.org โบ en-US โบ docs โบ Web โบ Progressive_web_apps โบ Tutorials
Tutorials - Progressive web apps | MDN
August 25, 2025 - This tutorial includes all the basics for creating a PWA, with additional features, including notifications, push, and app performance.
Videos
03:13:40
How to Create a Progressive Web App (PWA) - YouTube
Introduction to PWAs [1 of 17] | PWA for Beginners
20:19
PWA Tutorial for Beginners 1 - Getting Started with Progressive ...
10:11
How to make a Progressive Web App (PWA) - YouTube
12:51
PWA Demos [4 of 17] | PWA for Beginners - YouTube
11:47
PWA Demos [17 of 17] | PWA for Beginners - YouTube
PWABuilder
pwabuilder.com
PWABuilder
Publish your Progressive Web App (PWA) to app stores
Create React App
create-react-app.dev โบ docs โบ making-a-progressive-web-app
Making a Progressive Web App | Create React App
Starting with Create React App 4, you have full control over customizing the logic in this service worker, by creating your own src/service-worker.js file, or customizing the one added by the cra-template-pwa (or cra-template-pwa-typescript) ...
Google
developers.google.com โบ codelabs โบ pwa-training โบ pwa05--empowering-your-pwa
Progressive Web Apps: Empowering Your PWA | Google for Developers
You've learned how to manage system files and integrate your PWA with a system using the File System Access API and File Handling API, open windows across different screens with the Window Management API, and prevent a screen from falling asleep with the Screen Wake Lock API.
Pwabuilder
docs.pwabuilder.com
PWABuilder Suite Documentation - test
Documentation for building great progressive web apps with the PWABuilder tooling suite.
GeeksforGeeks
geeksforgeeks.org โบ javascript โบ making-a-simple-pwa-under-5-minutes
Making a simple PWA under 5 minutes - GeeksforGeeks
Step 6: Under the installability tab, it would show that no service worker is detected. We will need to create another file for the PWA, that is, serviceworker.js in the same directory.
Published ย June 1, 2021