pwa-app-instructions.md

PWA Polymer App instructions to Use with Firebase

console.firebase.google.com

Create Firebase Project

Call it pwa-App

Add Permissions

Goto Database and Users and Paste in Code

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Add the Firebase Code just under the Script Tag in the head

Goto the Purple Button Add firebase to your Web App

Copy All the Code and Paste it in

Install the current LTS version (4.x) of Node.js or newer

Install Firebase CLI

npm install -g firebase-tools

Install the latest version of Bower.

npm install -g bower

Install Polymer CLI.

npm install -g polymer-cli

Make a Directory

mkdir pwa-app

cd pwa-app

Start Polymer

polymer init

Choose Starter Kit

Press Return for All Other Options

polymer serve --open

Open Code Editor

Create Deployed App

polymer build

Initiate Firebase

firebase init

Press Return to the Selection of Hosting and Database

Choose the pwa-app

Select Return on database.rules.json

Choosing public directory that the Polymer Build puts in the Files ready for production

build/bundled

Choose the defaults for the rest of the options by pressing Enter

Serve the Web App

firebase serve

Deploy the App to the Server

firebase deploy

Goto your Mobile and use the Chrome Mobile Browser Put in the URL and Experience What a Web App looks like

Use the Lighthouse Extension to Check the PWA

If we Have time Show How Firebase Database Works

bower i --save hi9here/mix-color-game

Add the HTML Import in the View1 file in src folder under in line 12

<link rel="import" href="/bower_components/mix-color-game/mix-color-game.html">

Add the tag to View 1 in line 28

<mix-color-game></mix-color-game>

link