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

Progressive Web Apps Done Right

9deaa23e028758d7bcbc64c4141da328?s=47 Felipe Sousa
December 15, 2017

Progressive Web Apps Done Right

9deaa23e028758d7bcbc64c4141da328?s=128

Felipe Sousa

December 15, 2017
Tweet

More Decks by Felipe Sousa

Other Decks in Programming

Transcript

  1. None
  2. felipe sousa front end developer gdg fortaleza organizer

  3. progressive web apps @felipz_sousa done right.

  4. progressive web apps done right. @felipz_sousa

  5. None
  6. None
  7. None
  8. None
  9. None
  10. * responsivity

  11. * mobile first * responsivity

  12. * mobile first * mobile friendly * responsivity

  13. why experience is important?!

  14. None
  15. is ugly

  16. isn’t intuitive is ugly

  17. Experience

  18. progressive web apps

  19. Fast Engaging Reliable *

  20. Fast 1.

  21. Load instantly even in uncertain network conditions.

  22. None
  23. Reliable 2.

  24. Respond quickly to user interactions with silky smooth animations and

    no slow scrolling.
  25. Engaging 3.

  26. Feel like a natural app on the device, with an

    immersive user experience.
  27. •Instalable

  28. •Icons/Splashscreen •Instalable

  29. •Icons/Splashscreen •Instalable •Lightweight

  30. •Icons/Splashscreen •Instalable •Push Notifications •Lightweight

  31. None
  32. None
  33. None
  34. None
  35. None
  36. PROGRESSIVE WEB APPS IS ABOUT PROVIDE A BETTER EXPERIENCE TO

    YOUR USER.
  37. Engaging Reliable Fast

  38. Web Manifest Engaging Reliable Fast Service Worker

  39. Service Workers

  40. offline

  41. Application Cache

  42. None
  43. <html manifest="example.appcache"> ... </html>

  44. CACHE MANIFEST # files index.html cache.html style.css image1.png # Use

    from network if available NETWORK: network.html # Fallback content FALLBACK: fallback.html
  45. A service worker is a script that your browser runs

    in the background, separate from the web page, enabling features that do not require a web page or user interaction.
  46. * HTTPS is a requirement.

  47. None
  48. None
  49. Background Sync / Push API

  50. •Install •Register •Cache Control/Strategies •Update Cache •Listen Fetch Events

  51. if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register(‘/sw.js') .then(function(registration)

    {}) .catch(function(err) {}); }); }
  52. var CACHE_NAME = ‘CACHE_NAME_1’; var urlsToCache = [ '/', ‘/style.css’,

    ‘/script.js’, ‘/imagem.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); });
  53. None
  54. None
  55. None
  56. None
  57. event: fetch

  58. self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(response => { if(response)

    return response; return fetch(event.request); }) ) });
  59. var CACHE_NAME = ‘CACHE_NAME_1’; var urlsToCache = [ '/', ‘/style.css’,

    ‘/script.js’, ‘/imagem.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(function(response) => { if(response) return response; return fetch(event.request); }) ) });
  60. None
  61. None
  62. None
  63. Caching strategies

  64. •Cache and Update •Cache Only •Cache, update and refresh •Embedded

    fallback •Network or cache
  65. None
  66. •Cache and Update •Cache Only •Cache, update and refresh •Embedded

    fallback •Network or cache
  67. self.addEventListener('fetch', function(evt) { evt.respondWith(fromCache(evt.request)); evt.waitUntil( update(evt.request) .then(refresh) ); }); function

    refresh(response) { return self.clients.matchAll().then(function (clients) { clients.forEach(function (client) { var message = { type: 'refresh', url: response.url, eTag: response.headers.get('ETag') }; client.postMessage(JSON.stringify(message)); }); }); }
  68. Web Manifest

  69. index.html <meta name="apple−mobile−web−app−capable" content="yes"> <meta name="apple−mobile−web−app−title" content="Name App"> <link rel="apple−touch−icon−precomposed"

    href="path/name.png">
  70. The web application manifest is a JSON file that lets

    you control how the web application or website is displayed to the user in areas that are typically expected to see native applications.
  71. None
  72. None
  73. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF−8"> <title>My Page</title> <!−−

    manifest −−> <link rel="manifest" src="/manifest.json"> </head> <body> </body> </html>
  74. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  75. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  76. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  77. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  78. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  79. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  80. None
  81. None
  82. None
  83. None
  84. • Have a registered worker service on your site. •

    Have a manifest file with the basics configurations. • Be displayed by HTTPS. • Be visited at least twice, with at least five minutes between visits. Banner - Add to Home Screen
  85. None
  86. None
  87. Fast Engaging Reliable *

  88. Fast Engaging Reliable *

  89. •Accessibility •Performance •HTML Semantic •Responsivity •Push Notifications

  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. Progressive Web Apps are extensible!

  99. None
  100. None
  101. None
  102. /felipesousa

  103. @felipz_sousa /felipesousa

  104. @felipz_sousa /felipesousa felipesousa.me

  105. thank’s! @felipz_sousa /felipesousa felipesousa.me