Progressive Web Apps in 10 minutes - Google for India

Transcript

1. 1.

   Paul Kinlan Developer Advocate

2. 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. 3.

   Installable Performant Engaging

4. 4.

   Add to home screen Installable

5. 5.

   Splash screen and theme color Installable

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

   Offline and resilient You are in control Client-side proxy Manage

   every request Service Worker Web
 Server Local
 Cache Installable
10. 10.

    Fast even on 2G and cost effective Service Worker Local


    Cache Web
 Server Performant
11. 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. 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>
 <VirtualHost *:80>
 ServerName preserve_css_urls_off.example.com
 ModPagespeedCssPreserveURLs off
 </Directory>
 <VirtualHost *:80>
 ServerName core.example.com
 ModPagespeedRewriteLevel CoreFilters
 </Directory> Performant
13. 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. 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. 15.

    350M Push notifications delivered every day Engaging

16. 16.

    Bluetooth Permissions Network 
 Information Microphone Camera And there is

    more Native Sharing Location Engaging
17. 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. 18.

    The web is 
 critical to your mobile strategy

19. 19.

    Thank You

20. 20.

    New Billion Users IDG Ventures Culturealley Google Nishant Patni Sudhir

    Sethi Jay Kota Snapdeal Anand Chandrasekaran
21. 21.

    Thank You