Starting point for building Progressive Web Apps PWA based on Polymer with motto #UseThePlatform.
Switch branches/tags
Nothing to show
Clone or download
Latest commit bfe5ff3 May 26, 2017

README.md

Progressive Web App Template

New version is on the way...

Lighthouse 90 PageSpeed 97 Resizer Responsive UI BrowserStack bitHound Score G+ StartPolymer Slack josef@polymer

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

Features

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

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Make your changes
  4. Run the tests, adding new ones for your own code if necessary
  5. Commit your changes (git commit -am 'Added some feature')
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request

Resources

GitHub repositories