Welcome to the plain JavaScript edition of the PWABuilder pwa-starter! Are you a beginner to web development and looking to build a new Progressive Web App? This is what you are looking for! The pwa-starter-vanilla includes everything you need to start building your first PWA.
You will need the following things properly installed on your computer.
We recommend the following tools for your dev setup:
- Editor: VSCode
- Terminal: Windows Terminal or hyper
- VSCode extension: PWABuilder VSCode extension
Run npm install and then run npm run dev, the starter should open in your default browser. From here you can start developing, your changes will be rebuilt and reloaded in the browser as you develop.
Once your PWA is ready to deploy we recommend Azure static site hosting for deploying your PWA.
Many app stores, including the Microsoft Store and the Google Play Store support PWAs. To package your PWA for deployment to these app stores head back to https://pwabuilder.com/, put in your URL and hit Build My PWA.
pwa-starter-vanilla
│ README.md (docs)
| pwabuilder-sw.js (Service Worker https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
| package.json (https://docs.npmjs.com/creating-a-package-json-file)
| package-lock.json (https://docs.npmjs.com/files/package-lock.json)
| manifest.json (web manifest https://developer.mozilla.org/en-US/docs/Web/Manifest)
| index.prod.html (index.html file used for production builds)
| index.html (index.html for dev builds)
| *note*: The index.prod.html registers a service worker which caches assets, so index.html is used for dev builds
| .gitignore (git config file https://git-scm.com/docs/gitignore)
│
└───src (most of your development will happen here)
│ │ global.css (used for global CSS styles and CSS variables)
│ │
│ └───script
│ │
│ |
| └───components
| | header.ts (header component)
| |
| |
| └───pages
| | app-index.ts (app-index component)
| | app-home.ts (app-home component)
| | app-about.ts (app-about component)