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.

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!

• SimpleEdit: Simple Image editing and collage making app!

  • Github: https://github.com/jgw96/simple-edit-2
  • Web: https://gray-pond-01ccec410.azurestaticapps.net/
  • Microsoft Store: https://www.microsoft.com/store/productId/9P53Q9BF3MV6
  • Google Play: https://play.google.com/store/apps/details?id=net.azurestaticapps.thankful_tree_07da4921e.twa&hl=en&gl=US

• Mail GO: Full featured email client. This app aims to show the power of the web by integrating many of the advanced APIs now avilable to PWAs, such as receiving content shared from another app, a custom titlebar, sycing data in the background and more!

  • Github: https://github.com/jgw96/graph-app
  • Web: https://www.memosapp.app
  • Microsoft Store: https://www.microsoft.com/store/productId/9NQW566N4866

More Resources

• The pwa-starter wiki

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)