New version is on the way...
This template is a starting point for building Progressive Web Apps based on Polymer & Material Design with motto #UseThePlatform.
- FAST - Using PRPL performance pattern.
- EASY - Based on Web Standards with motto #UseThePlatform.
- STABLE - Open core tested by community.
Progressive Web Apps are:
- Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
- Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
- Instant Loading - Service Workers allow your apps to load nearly instantly and reliably, no matter what kind of network connection your user is on.
- Fast - Smooth animations, scrolling, and navigations keep the experience silky smooth.
- Accessible - Accessible design allows users of all abilities to navigate, understand, and use your UI successfully.
- Connectivity independent - Enhanced with Service Workers to work offline or on low quality networks.
- App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the App Shell model with full screen mode.
- Fresh - Always up-to-date thanks to the Service Worker update process.
- Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
- Discoverable - Are identifiable as “applications” thanks to W3C Web App Manifest and Service Worker registration scope allowing search engines to find them.
- Re-engageable - Make re-engagement easy through features like Push Notifications.
- Installable - Allow users to “keep” apps they find most useful on their Home Screen without the hassle of an app store.
- Linkable - Easily share via URL and not require complex installation.
- Building for Billions - Deliver the best performance across a range of connections, data plans, and devices.
See latest build from master branch at https://pwa-demo.appspot.com
- /sign-in - use
sign@up.pwaorsign@in.pwa - /sign-in/sign-in-with-email
- /sign-up
- /404
- Based on PRPL performance pattern
- Push components required for the initial route using HTTP/2 Push
- Render initial route ASAP
- Pre-cache components for remaining routes using Service Worker
- Lazy-load and progressively upgrade next routes on-demand
- Lazy-loading App Shell and all pages with dependencies included icons, locales
- App Shell architecture
- Connectivity independent using Service Worker
- Locales per page for internationalize application
- Always Material Design for Mobile First
- Material Design Color
- Material Design Icons
- Material Design Layout
- Material Design Typography
- Always Accessible Design inspired by this lessons:
- Accessibility is My Favorite Part of the Platform - Google I/O 2016
- Accessibility - Chrome Dev Summit 2015
- SUIT CSS naming conventions
- Load ES6, Intl polyfills using service Polyfill.io only on older browsers (FF < 40, CH < 46)
- Google Analytics for real-time collect performance events and error tracking
- Detect older browsers (IE < 11, OP < 15) with redirect to site Browser-Update.org
- Support for more themes for A/B testing
- Sign-in Flow using Credential Management API inspired by this lessons:
- Who are you, really: Safer and more convenient sign-in on the web - Google I/O 2016
- Best practices for a great sign-in experience - Google I/O 2016
- CSS styles sorted using CSScomb formatter
- Sign-in Flow using Credential Management API
- Lite version without content using custom branch
- Generator for Polymer CLI
- Analyzer for push_manifest.json
- Auth element for REST API on Google App Engine
- Auth element for Firebase Auth
- Auth element for Auth0
- Static page
update-browser.htmlinstead of https://browser-update.org/update.html - Responsive images using DPR + WebP + Service Workers
- Detect low quality networks
- Enabling Push Notifications Flow
- Report unhandled promise rejections
- Add support for Gulp tasks
- Add support for Cordova framework
- Install Git
- Install the current LTS version (4.x) of Node.js or newer
sudo npm install -g bower
Install Polymer CLI:
sudo npm install -g polymer-cli
sudo npm install -g generator-polymer-init-startpolymer
mkdir my-app && cd my-app
polymer init startpolymer
Choose from menu Progressive Web App Template
If you've previously downloaded a copy of the full PWA Template and would like to update to the latest version, here's a git workflow for doing so:
git init
git checkout -b master
git add .
git commit -m 'Check-in 1.0.1'
git remote add upstream https://github.com/StartPolymer/progressive-web-app-template.git
git fetch upstream
git merge upstream/master # OR git merge upstream/lite
# resolve the merge conflicts in your editor
git add . -u
git commit -m 'Updated to 1.0.2'This command serves the app at http://localhost:8080 and provides basic URL
routing for the app:
polymer serve
This command performs HTML, CSS, and JS minification on the application
dependencies, and generates a service-worker.js file with code to pre-cache the
dependencies based on the entrypoint and fragments specified in polymer.json.
The minified files are output to the build/unbundled folder, and are suitable
for serving from a HTTP/2+Push compatible server.
In addition the command also creates a fallback build/bundled folder,
generated using fragment bundling, suitable for serving from non
H2/push-compatible servers or to clients that do not support H2/Push.
polymer build
This command serves the minified version of the app in an unbundled state, as it would be served by a push-compatible server:
polymer serve build/unbundled
This command serves the minified version of the app generated using fragment bundling:
polymer serve build/bundled
Google App Engine is free static hosting supporting HTTP/2 Push & QUIC protocol with powerful configuration on custom domain.
./deploy-gae.sh dev
./deploy-gae.sh stage
./deploy-gae.sh prod
You can extend the app by adding more elements that will be demand-loaded
e.g. based on the route, or to progressively render non-critical sections
of the application. Each new demand-loaded fragment should be added to the
list of fragments in the included polymer.json file. This will ensure
those components and their dependencies are added to the list of pre-cached
components (and will have bundles created in the fallback bundled build).
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Make your changes
- Run the tests, adding new ones for your own code if necessary
- Commit your changes (
git commit -am 'Added some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
- Progressive Web App Dev Summit 2016
- Getting Started with Progressive Web Apps
- Your First Progressive Web App
- StartPolymer YouTube Playlists
- PWA Dev Summit 2016 Codelabs
- Web Codelabs
- Web Development Courses
- Google’s Polymer Project with Rob Dodson
- https://github.com/Polymer/app-drawer-template
- https://github.com/Polymer/shop
- https://github.com/PolymerElements/polymer-starter-kit
- https://github.com/PolymerLabs/note-app
- https://github.com/GoogleChrome/ioweb2016
- https://github.com/GoogleChrome/credential-management-sample
- https://github.com/mbleigh/pwas-on-firebase
- https://github.com/StartPolymer/polymer-starter-kit-plus