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?

๐ŸŒ
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.
๐ŸŒ
web.dev
web.dev โ€บ learn โ€บ pwa
Learn PWA | web.dev
A course that breaks down every aspect of modern progressive web app development.
๐ŸŒ
GeeksforGeeks
geeksforgeeks.org โ€บ node.js โ€บ how-to-build-a-progressive-web-app-pwa-from-scratch
How to Build a Progressive Web App (PWA) from Scratch? - GeeksforGeeks
July 23, 2025 - Making a Progressive Web App consists of creating a responsive web design, including a web app manifest, and executing a service worker for offline potentials and caching. By proceeding these steps, you can make a PWA that gives a stable and ...
๐ŸŒ
freeCodeCamp
freecodecamp.org โ€บ news โ€บ what-are-progressive-web-apps-pwa-guide
What are Progressive Web Apps? PWA Guide for Beginners
January 18, 2024 - Progressive Web Apps (PWAs) are simply installable web applications โ€“ websites that you can install on your device, much like you would install an app from an app store. They bring together the best parts of using a website (easy to access, no need ...
๐ŸŒ
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) ...
Find elsewhere
๐ŸŒ
DZone
dzone.com โ€บ data engineering โ€บ data โ€บ tutorial: how to build a progressive web app (pwa)
Tutorial: How to Build a Progressive Web App (PWA)
September 9, 2020 - A Step-by-Step Tutorial for Developing a Progressive Web App With React.js. Use Angular to Build Your First PWA.
๐ŸŒ
DEV Community
dev.to โ€บ udoka033 โ€บ progressive-web-apps-pwa-a-comprehensive-guide-57ii
Progressive Web Apps (PWA): A Comprehensive Guide - DEV Community
July 6, 2024 - Whether you are building with Plain HTML, React, Vue, or any front-end framework, the steps of making your progressive web app installable are the same. This PWA tutorial will take you through the steps.
๐ŸŒ
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.
๐ŸŒ
Keenethics
keenethics.com โ€บ blog โ€บ how to build a progressive web app (pwa) with react
The React PWA Tutorial: How to Build a Progressive Web App (PWA) with React | Keenethics
August 25, 2025 - In this article, youโ€™ll find out how to make a PWA using React. We prepared a complete React PWA Tutorial consisting of 3 steps.
๐ŸŒ
Pwabuilder
docs.pwabuilder.com
PWABuilder Suite Documentation - test
Documentation for building great progressive web apps with the PWABuilder tooling suite.
๐ŸŒ
Heroku
heroku.com โ€บ engineering โ€บ pwa tutorial: turn your website into a progressive web app
PWA Tutorial: Turn Your Website Into a Progressive Web App
March 6, 2019 - In this post, we'll show you how to convert your existing website into a progressive web app. Itโ€™s fairly simple, only really requiring the following steps.
๐ŸŒ
Medium
medium.com โ€บ james-johnson โ€บ a-simple-progressive-web-app-tutorial-f9708e5f2605
A Simple Progressive Web App Tutorial | by James Johnson | Design Notes | Medium
August 27, 2018 - Create a directory for the app and add js, css, and images subdirectories. It should look like this when youโ€™re finished: /Hello-PWA # Project Folder /css # Stylesheets /js # Javascript /images # Image files.
๐ŸŒ
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
๐ŸŒ
YouTube
youtube.com โ€บ playlist
Progressive Web Apps (PWA) for Beginners - YouTube
Welcome to PWA for Beginners! Join Beth Pan and her team in this spunky 4-chapter, 17-video tutorial that walks you through building your own Progressive Web...
๐ŸŒ
web.dev
web.dev โ€บ explore โ€บ progressive-web-apps
Progressive Web Apps | web.dev
For a course that breaks down every aspect of modern progressive web app development, check out Learn PWA.