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

DevFest Santiago 2019 - Progressive Web Apps Done Right

DevFest Santiago 2019 - Progressive Web Apps Done Right

Slides da minha apresentação em 05/10/2019 em Santiago - Chile, para a edição do GDG DevFest da cidade.

Mais detalhes aqui: https://devfestsantiago.com/speakers/felipe_cavalcante

Felipe Sousa

October 05, 2019
Tweet

More Decks by Felipe Sousa

Other Decks in Programming

Transcript

  1. A Front End Developer at Concrete
    Felipe Sousa

    Felipe Sousa

    View full-size slide

  2. progressive web apps
    @felipz_sousa
    done right.

    View full-size slide

  3. progressive web apps
    done right.
    @felipz_sousa

    View full-size slide

  4. * mobile first
    * mobile friendly
    * responsivity

    View full-size slide

  5. why experience is
    important?!

    View full-size slide

  6. progressive web apps

    View full-size slide

  7. Fast
    Engaging
    Interactive
    *

    View full-size slide

  8. Load instantly even in
    uncertain network
    conditions.

    View full-size slide

  9. Respond quickly to user
    interactions with silky smooth
    animations and no slow scrolling.

    View full-size slide

  10. Feel like a natural app on the
    device, with an immersive user
    experience.

    View full-size slide

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

    View full-size slide

  12. PROGRESSIVE WEB APPS
    IS ABOUT PROVIDE A
    BETTER EXPERIENCE TO
    YOUR USER.

    View full-size slide

  13. Web Manifest
    Engaging
    Interactive
    Fast
    Service Worker

    View full-size slide

  14. Service Workers

    View full-size slide

  15. Application Cache

    View full-size slide

  16. CACHE MANIFEST
    # files
    index.html
    cache.html
    style.css
    image1.png
    # Use from network if available
    NETWORK:
    network.html
    # Fallback content
    FALLBACK:
    fallback.html

    View full-size slide

  17. 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.

    View full-size slide

  18. * HTTPS is a requirement.

    View full-size slide

  19. Background Sync / Push API

    View full-size slide

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

    View full-size slide

  21. if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register(‘/sw.js')
    .then(function(registration) {})
    .catch(function(err) {});
    });
    }

    View full-size slide

  22. var CACHE_NAME = ‘CACHE_NAME_EXAMPLE_2’;
    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);
    })
    );
    });

    View full-size slide

  23. event: fetch

    View full-size slide

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

    View full-size slide

  25. var CACHE_NAME = ‘CACHE_NAME_EXAMPLE_2’;
    var urlsToCache = [
    '/',
    ‘/style.css’,
    ‘/script.js’,
    ‘/imagem.png'
    ];
    self.addEventListener('install', function(event) {
    event.waitUntil(
    caches.open(CACHE_NAME)
    .then(cache => 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);
    })
    )
    });

    View full-size slide

  26. Caching strategies

    View full-size slide

  27. •Cache and Update
    •Cache Only
    •Cache, update and refresh
    •Embedded fallback
    •Network or cache

    View full-size slide

  28. •Cache and Update
    •Cache Only
    •Cache, update and refresh
    •Embedded fallback
    •Network or cache

    View full-size slide

  29. 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));
    });
    });
    }

    View full-size slide

  30. Web Manifest

    View full-size slide

  31. 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.

    View full-size slide

  32. {
    "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"
    }

    View full-size slide

  33. {
    "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"
    }

    View full-size slide

  34. {
    "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"
    }

    View full-size slide

  35. {
    "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"
    }

    View full-size slide

  36. {
    "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"
    }

    View full-size slide

  37. {
    "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"
    }

    View full-size slide

  38. • Have a registered service worker on your site.
    • Have a manifest file with the basics properties.
    • Be displayed by HTTPS.
    • Be visited at least twice, with at least five minutes between visits.
    Banner - Add to Home Screen

    View full-size slide

  39. Fast
    Engaging
    Interactive
    *

    View full-size slide

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

    View full-size slide

  41. Progressive Web Apps
    are extensible!

    View full-size slide

  42. /felipesousa
    @felipz_sousa
    felipesousa.space

    View full-size slide

  43. Thank’s!
    Obrigado!
    Gracias!

    View full-size slide