roastlechon/pwa-2016-readme.md

## pwa-2016-readme.md

      
    Raw
  

              pwa-2016-readme.md
            
          
    PWA 2016 @ Mozilla

Schedule


9:00am - 10:00am - Registration & Breakfast
10:00am - 10:30am - Introduction to PWA and Workshop Setup
10:30am - 11:30am - Deep dive into Service Workers and going Offline First
11:30am - 12:30pm - App Shell Architecture and using Service Worker Toolbox
12:30pm - 01:00pm - Developing Cross Browser PWA and solving for SEO
1:00pm - 02:00pm - Lunch Break
2:00pm - 3:00pm - Making your Web App Appy (Add-to-Homescreen and Splash Screen)
3:00pm - 4:00pm - Sending Push Notifications

Introduction to PWA

Challenges of FlipKart


Mobile is where revenue comes from (in India)
75% transaction on mobile
Mobile site at the time was not helping
FlipKart shut mobile site down
Conversions almost as good as native app

Google Comments


Top 1000 have 2.5x more unique active users
Strong presence on web has more outreach

Deep dive into Service Workers and going Offline First

Link: https://docs.google.com/document/d/1Qa0OdcuGuOuzLVX-4uEWQPvqg3-yhwGBZSt9m2D1hvg/edit?usp=sharing
Registering a Service Worker
Registering a Service Worker requires both a Service Worker script (preferably in the root of your project) and a corresponding call to navigator.serviceWorker.register()
To do this, ensure that you:
Add an empty file for your Service Worker
%> cd step2
%> touch service-worker.js
Add the following to the bottom of your scripts/app.js file:
if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('./service-worker.js')
           .then(() => console.log('Service Worker Registered'));
}

Verify that this has worked by visiting Chrome Devtools (right-click > Inspect Element)
In Chrome 48 and above, visit the Resources panel and look for “Service Workers” in the left-hand panel
In older versions of Chrome, visit chrome://serviceworker-internals to understand the current state of the system
In both cases, visit the index of your step2 project and observe that you now have a Service Worker in the “Active” state
To verify this in Firefox Dev Tools, use Firefox Developer Edition
Open a new tab and visit about:debugging#workers and ensure that a worker appears for your URL
If it isn’t there, it may have been killed so try refreshing the source document
Jake archibold wiki demo offline
App Shell Architecture and using Service Worker Toolbox


Alot of users on 2g connections


Users see lots of white screen


Reduce time to first paint


Actual architecture
** Loading state
** loaded state


Generate all static shells during build time


One app shell over 30 million unique products


| Conventional SSR | App Shell
Improve first paint | Y |  Y
build time rendering | N | Y
client side cache | N | Y
reuse across urls | N | Y
SEO | Y | ?
navigator.onLine // tells you when you are onLine
https://jakearchibald.com/2014/offline-cookbook/
https://github.com/GoogleChrome/sw-toolbox
Developing Cross Browser PWA and solving for SEO

Making your Web App Appy

Add manifest

Statistics for homepage usage
12-14% coming from homepage traffic (organic)

chrome://inspect/devices#devices
chrome://flags/
customize color to manifest
Sending Push Notifications

Service worker is programmable client side proxy
event driven
like fetch requests
background worker that responds to events
`

site ask for permission to send notification
if user hits okay
call function subscribe
connection between device and google cloud messaging
sends back url
request to endpoint will wake up device and fire service worker

promise inspector debugging

deny requests that have header meant for service workers, that are not service workers
google bot runs scripts

gpu raster on
maximum-scale=1, minimum-scale=1
about tracing tool