Progressive Web Apps Done Right

felipe sousa front end developer gdg fortaleza organizer

progressive web apps @felipz_sousa done right.

progressive web apps done right. @felipz_sousa

* responsivity

* mobile ﬁrst * responsivity

* mobile ﬁrst * mobile friendly * responsivity

why experience is important?!

is ugly

isn’t intuitive is ugly

Experience

progressive web apps

Fast Engaging Reliable *

Fast 1.

Load instantly even in uncertain network conditions.

Reliable 2.

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

Engaging 3.

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

•Instalable

•Icons/Splashscreen •Instalable

•Icons/Splashscreen •Instalable •Lightweight

•Icons/Splashscreen •Instalable •Push Notiﬁcations •Lightweight

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

Engaging Reliable Fast

Web Manifest Engaging Reliable Fast Service Worker

Service Workers

ofﬂine

Application Cache

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

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.

* HTTPS is a requirement.

Background Sync / Push API

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

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

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

event: fetch

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

Caching strategies

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

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

Web Manifest

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">

The web application manifest is a JSON ﬁle 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.

<!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>

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

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

• 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

Fast Engaging Reliable *

•Accessibility •Performance •HTML Semantic •Responsivity •Push Notiﬁcations

Progressive Web Apps are extensible!

/felipesousa

@felipz_sousa /felipesousa

@felipz_sousa /felipesousa felipesousa.me

thank’s! @felipz_sousa /felipesousa felipesousa.me

Progressive Web Apps Done Right

Progressive Web Apps Done Right

More Decks by Felipe Sousa

Other Decks in Programming

Featured

Transcript