/progressive-web-app-template

Starting point for building Progressive Web Apps PWA based on Polymer with motto #UseThePlatform.

Primary LanguageHTML

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