Progressive Web Apps in 10 minutes - Google for India

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