Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps in 10 minutes - Google for...

Paul Kinlan
December 17, 2015

Progressive Web Apps in 10 minutes - Google for India

Paul Kinlan

December 17, 2015
Tweet

More Decks by Paul Kinlan

Other Decks in Programming

Transcript

  1. A Progressive Web App is Discoverable by all Loads quickly,

    even on 2G Works offline Fast and smooth Progressively installed Easy to re-engage with
  2. <link rel=“manifest" href="manifest.json"> HTML { "short_name": "Flipkart Lite", "start_url": "/",

    "display": "standalone", "background_color": "#2196F3", "theme_color": "#2196F3", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }], "orientation": "portrait" } JSON Manifest Installable
  3. Activated Error Idle Active Terminated Load Service Worker Adds app-like

    lifecycle to a page Wakes up only when the OS says Only responds to system events Installable
  4. Install required assets Activated You manage what is “installed” and

    how it is cached. Install Get files /index.html /styles/main.css /scripts/app.js Installable
  5. Offline and resilient You are in control Client-side proxy Manage

    every request Service Worker Web
 Server Local
 Cache Installable
  6. DPR: 
 Screen Density Viewport-Width: 
 Mobile width Save-data: 


    User wants to save data downlinkMax: 
 Network speed Make intelligent decisions on sever No image No videos Low res image downlinkMax 
 < 50kp Save-data = 1 DPR = 0.5 Web Server Performant
  7. Automatically fast ModPagespeedInheritVHostConfig on
 ModPagespeedRewriteLevel OptimizeForBandwidth
 <VirtualHost *:80>
 ServerName prioritize_above_the_fold.example.com


    ModPagespeedEnableFilters inline_javascript,prioritize_critical_css,inline_preview_images
 </VirtualHost>
 <VirtualHost *:80>
 ServerName preserve_css_urls_off.example.com
 ModPagespeedCssPreserveURLs off
 </Directory>
 <VirtualHost *:80>
 ServerName core.example.com
 ModPagespeedRewriteLevel CoreFilters
 </Directory> Performant
  8. Push notifications Works when browser closed Lightweight (save’s battery by

    using GCM) Native notifications Service Worker Push Service (GCM) Web Server Engaging
  9. Power of push notifications increase in time spent for users

    visiting via push notifications 72% increase in average spend per visit by users arriving via a push notification 26% Engaging
  10. Progressive Web Apps Discoverable by all Loads quickly, even on

    2G Works offline Fast and smooth Progressively installed Easy to re-engage with