Progressive Web App Template
New version is on the way...
FAST Progressive Web Apps Solution
- FAST - Using PRPL performance pattern.
- EASY - Based on Web Standards with motto #UseThePlatform.
- STABLE - Open core tested by community.
What is a Progressive Web App?
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
Check out this pages
- 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
Install the latest version of Bower
sudo npm install -g bower
sudo npm install -g polymer-cli
sudo npm install -g generator-polymer-init-startpolymer
Initialize project from template
mkdir my-app && cd my-app polymer init startpolymer
Choose from menu
Progressive Web App Template
Updating from previous version
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'
Start the development server
This command serves the app at
http://localhost:8080 and provides basic URL
routing for the app:
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
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
generated using fragment bundling, suitable for serving from non
H2/push-compatible servers or to clients that do not support H2/Push.
Test the 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
Google App Engine is free static hosting supporting HTTP/2 Push & QUIC protocol with powerful configuration on custom domain.
Deploy to development environment
Deploy to staging environment
Deploy to production environment
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
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
- 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