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 full-size 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 full-size slide

  3. Installable Performant Engaging

    View full-size slide

  4. Add to home screen
    Installable

    View full-size slide

  5. Splash screen and theme color
    Installable

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    Server
    Local

    Cache
    Installable

    View full-size slide

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

    Cache
    Web

    Server
    Performant

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  15. 350M
    Push notifications delivered every day
    Engaging

    View full-size slide

  16. Bluetooth
    Permissions
    Network 

    Information
    Microphone
    Camera
    And there is more
    Native Sharing
    Location
    Engaging

    View full-size 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 full-size slide

  18. The web is 

    critical to your mobile strategy

    View full-size slide

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

    View full-size slide