Progressive Web App Template

This template is a starting point for building Progressive Web Apps based on Polymer & Material Design with motto #UseThePlatform.

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.

Demo

See latest build from master branch at https://pwa-demo.appspot.com

Check out this pages

/sign-in - use [email protected] or [email protected]
/sign-in/sign-in-with-email
/sign-up
/404

Features

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

TODO

Setup

Prerequisites

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

Install Polymer CLI:

sudo npm install -g polymer-cli

Install generator

⚠️ Generator is not working now

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:

polymer serve

Build

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

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

Deploy

Google App Engine

Google App Engine is free static hosting supporting HTTP/2 Push & QUIC protocol with powerful configuration on custom domain.

Install Google Cloud SDK

Deploy to development environment

./deploy-gae.sh dev

Deploy to staging environment

./deploy-gae.sh stage

Deploy to production environment

./deploy-gae.sh prod

Extend

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).

Contributing

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

alexxnica / progressive-web-app-template Goto Github PK