/pwa-starter

Welcome to the PWABuilder pwa-starter! Looking to build a new Progressive Web App and not sure where to get started? This is what you are looking for!

Primary LanguageTypeScriptOtherNOASSERTION

pwa-starter

Please use our main repository for any issues/bugs/features suggestion.

Documentation

The PWABuilder pwa-starter is our opinionated, best practices, production tested starter that we use to build all of our PWAs, including PWABuilder itself! The pwa-starter is a starter codebase, just like create-react-app or the Angular CLI can generate, that uses the PWABuilder team's preferred front-end tech stack.

Get started with the pwa-starter!

With it you get an app that:

  • Has no build system to set up and no boilerplate code to add. Everything is included out of the box.
  • Has a Service Worker system using Workbox
  • Scores close to 100 on Lighthouse out of the box
  • Using the fluent Web Components, you can build native looking PWAs on Windows
  • Has everything needed to be installable in the browser
  • Is ready to be package for the app stores using PWABuilder

and all with just a few button clicks 😊.

Get Started!

Sample PWAs built with the starter!

More Resources

Folder Structure

pwa-starter
β”‚   README.md (docs)
β”‚   rollup.config.js (bundler config https://rollupjs.org/)
|   tsconfig.json (TypeScript config https://www.typescriptlang.org/)
|   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)