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

Progressive Web Apps in 10 minutes - Google for India

B590f0fb3aba34aee093cfa1406eac0b?s=47 Paul Kinlan
December 17, 2015

Progressive Web Apps in 10 minutes - Google for India


Paul Kinlan

December 17, 2015

More Decks by Paul Kinlan

Other Decks in Programming


  1. Paul Kinlan Developer Advocate

  2. 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
  3. Installable Performant Engaging

  4. Add to home screen Installable

  5. Splash screen and theme color Installable

  6. <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
  7. 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
  8. 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
  9. Offline and resilient You are in control Client-side proxy Manage

    every request Service Worker Web
 Server Local
 Cache Installable
  10. Fast even on 2G and cost effective Service Worker Local

    Cache Web
 Server Performant
  11. 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
  12. 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 *:80>
 ServerName preserve_css_urls_off.example.com
 ModPagespeedCssPreserveURLs off
 <VirtualHost *:80>
 ServerName core.example.com
 ModPagespeedRewriteLevel CoreFilters
 </Directory> Performant
  13. Push notifications Works when browser closed Lightweight (save’s battery by

    using GCM) Native notifications Service Worker Push Service (GCM) Web Server Engaging
  14. 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
  15. 350M Push notifications delivered every day Engaging

  16. Bluetooth Permissions Network 
 Information Microphone Camera And there is

    more Native Sharing Location Engaging
  17. Progressive Web Apps Discoverable by all Loads quickly, even on

    2G Works offline Fast and smooth Progressively installed Easy to re-engage with
  18. The web is 
 critical to your mobile strategy

  19. Thank You

  20. New Billion Users IDG Ventures Culturealley Google Nishant Patni Sudhir

    Sethi Jay Kota Snapdeal Anand Chandrasekaran
  21. Thank You