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

Progressive Web Apps in 10 minutes - Google for India

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. Paul Kinlan
    Developer Advocate

    View Slide

  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

    View Slide

  3. Installable Performant Engaging

    View Slide

  4. Add to home screen
    Installable

    View Slide

  5. Splash screen and theme color
    Installable

    View Slide

  6. 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

    View Slide

  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

    View Slide

  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

    View Slide

  9. Offline and resilient
    You are in control
    Client-side proxy
    Manage every request
    Service
    Worker
    Web

    Server
    Local

    Cache
    Installable

    View Slide

  10. Fast even on 2G and cost effective
    Service
    Worker
    Local

    Cache
    Web

    Server
    Performant

    View Slide

  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

    View Slide

  12. Automatically fast
    ModPagespeedInheritVHostConfig on

    ModPagespeedRewriteLevel OptimizeForBandwidth


    ServerName prioritize_above_the_fold.example.com

    ModPagespeedEnableFilters
    inline_javascript,prioritize_critical_css,inline_preview_images



    ServerName preserve_css_urls_off.example.com

    ModPagespeedCssPreserveURLs off



    ServerName core.example.com

    ModPagespeedRewriteLevel CoreFilters


    Performant

    View Slide

  13. Push notifications
    Works when browser closed
    Lightweight (save’s battery by using GCM)
    Native notifications
    Service Worker Push Service (GCM) Web Server
    Engaging

    View Slide

  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

    View Slide

  15. 350M
    Push notifications delivered every day
    Engaging

    View Slide

  16. Bluetooth
    Permissions
    Network 

    Information
    Microphone
    Camera
    And there is more
    Native Sharing
    Location
    Engaging

    View Slide

  17. Progressive Web Apps
    Discoverable by all
    Loads quickly, even on 2G
    Works offline
    Fast and smooth
    Progressively installed
    Easy to re-engage with

    View Slide

  18. The web is 

    critical to your mobile strategy

    View Slide

  19. Thank You

    View Slide

  20. New Billion Users
    IDG Ventures
    Culturealley Google
    Nishant
    Patni
    Sudhir
    Sethi
    Jay
    Kota
    Snapdeal
    Anand
    Chandrasekaran

    View Slide

  21. Thank You

    View Slide