Overview: What's in the box?
This documentation is a work in progress. It describes prerelease software, and is subject to change.
pwa-starter-kit is a set of templates you can use as a starting point for building PWAs. Out of the box, the default template gives you the following features:
- All the PWA goodness (manifest, service worker).
- A responsive layout.
- Application theming.
- Example of using Redux for state management.
- Offline UI.
- Simple routing solution.
- Fast time-to-interactive and first-paint using the PRPL pattern.
- Easy deployment to prpl-server or static hosting.
- Unit and integration testing starting points.
- Documentation about other advanced patterns.
If you already know what you’re doing and want a different template to start from, we’ve created several separate templates, with different sets of features:
template-typescript (code, demo)
This template is the same as the
master template, but implemented using
template-minimal-ui (code, demo)
This template uses Redux for state management like the
master template, but doesn’t use any of the
app-layout elements (
app-drawer) for the responsive UI.
template-no-redux (code, demo)
This template has the same UI elements as the
master one (
app-layout elements, theming, etc), but does not use Redux for state management. Instead, it does a properties-down-events-up unidirectional data flow approach, where the data source of truth is mutable, and individual elements (specifically, each view) own parts of the entire application state.
template-responsive-drawer-layout (code, demo)
This template is very similar to the
master template, in the sense that it keeps both Redux for state management, and all of the UI elements. The main difference is that the wide screen layout displays a persistent
app-drawer, inline with the content.
A lot of the reusable functionality of
pwa-starter-kit has already been pulled out as helper methods, into a separate repo. The
pwa-helpers repo contains:
router.js: A very basic router that calls a callback any time the location changes.
network.js: Calls a callback whenever the network connectivity of the app changes.
metadata.js: Utility method that sets the Twitter card/open graph metadata for a specific page.
media-query.js: Calls a callback whenever a media-query matches in response to the viewport size changing.
connect-mixin.js: Small mixin that you can add to a Custom Element base class to automatically connect to a Redux store.
Each of these helpers is very small, and can be implemented in many different, bespoke ways. However, they each represent a feature that is often needed across many different applications, so unless you already have a solution planned for your app, you could use one of these.