$30 off During Our Annual Pro Sale. View Details »

Getting started with Progressive Web Apps

Vitor Alencar
February 24, 2017

Getting started with Progressive Web Apps

Getting started with Progressive Web Apps

Vitor Alencar

February 24, 2017
Tweet

More Decks by Vitor Alencar

Other Decks in Technology

Transcript

  1. Photo goes here Vitor Alencar Desenvolvedor com foco em tecnologias

    novas e escaláveis, graduando em sistemas de informação,Co fundador do DEV I/O FOR , Google developer groups organizer e Organizado do Front-in Fortaleza @vitormalencar GURU-CE
  2. 80% OF TIME SPENT IS IN USERS’ TOP 3 APPS

    Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
  3. ZERO NUMBER OF APPS AVERAGE USER INSTALLS PER MONTH Source:

    comScore Mobile Metrix, U.S., Age 18+, June 2015
  4. are a new level of caring about the quality of

    your user experience Progressive Web Apps
  5. Trust Is this site who they claim to be? Data

    integrity Has anyone tampered with this page? User privacy Can anyone see my browsing behavior? Keeping Users Safe
  6. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  7. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  8. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  9. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  10. Life Cycle of a Service Worker Installing the Service Worker

    2nd Page Load activated check for update
  11. Life Cycle of a Service Worker Updating a Service Worker

    Load Page with Service Worker activated check for update
  12. Life Cycle of a Service Worker Updating a Service Worker

    Load Page with Service Worker activated check for update install idle
  13. Life Cycle of a Service Worker Updating a Service Worker

    Load Page with Service Worker activated check for update install idle
  14. Add To Home Screen Was Broken Required user interaction Buried

    deep in menus Where would it start? Dependent on bookmark
  15. Add To Home Screen Was Broken Required user interaction Buried

    deep in menus Where would it start? Dependent on bookmark Would it work offline? Users didn't expect offline
  16. <link rel="manifest" href="/manifest.json"> { "name": "The Washington Post", "short_name": "Wash

    Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  17. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  18. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  19. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  20. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  21. `

  22. Anatomy of a notification I feel I need it and

    it matters right now. when: it's timely
  23. Anatomy of a notification I feel I need it and

    it matters right now. when: it's timely
  24. Anatomy of a notification when: it's timely what: it's precise

    It has specific info that’s good to know or act upon.
  25. Anatomy of a notification when: it's timely what: it's precise

    what & who: it's relevant It’s from people or sources that matter to me, which makes it personal.
  26. Built on Service Workers /* ServiceWorker.js */ onfetch = function(e)

    { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /content.json HTTP/1.1 HOST example.com GET /content.json HTTP/1.1 HOST example.com GET /app.html HTTP/1.1 HOST example.com
  27. Built on Service Workers /* ServiceWorker.js */ onpush = function(event)

    { var data = event.data.json(); var t = data.title; var opt = { body: data.body, icon: data.icon, tag: data.tag }; self.registration .showNotification(t, opt); }; End Point example.co m
  28. `

  29. are a new level of caring about the quality of

    your user experience Progressive Web Apps
  30. ` 98% 1430.2ms First meaningful paint 94% 2069.4ms Time To

    Interactive 96% 1591 Perceptual Speed Index vitormalencar.com
  31. ` 100% 630.9ms First meaningful paint 99% 1210.8ms Time To

    Interactive 99% 1005 Perceptual Speed Index vitormalencar.com