progressive web apps - brestjs 2016-10

@LostInBrittany@BrestJS #PWA

Progressive Web Appswith Polymer

Horacio Gonzalez @LostInBrittany


Horacio Gonzalez

@LostInBrittany

Cityzen Datahttp://cityzendata.com

Spaniard lost in Brittany, developer, dreamer and all-around geek


Apps vs Web mobile

Yet again...


How did the Web beat native applications on the desktop?

Distribution Is The Hardest Problem In Software


The Mobile Internet came when it brought the Web

You had the whole desktop internet in your hands

Everywhere !


Applications?


Applications vs Web

Users spend way more time on apps than on browser


So apps are winning aren't it?

Mobile audience growth driven by mobile web which is actually bigger and growing faster than apps


Apps drive engagement

But web drives visitors...


Are you winning the app lottery?

If you're not in the top 10, you don't exist...


The best of two worlds?

Web audience and app engagement...


What if the Web evolved?

Just as it did with Ajax!

Image: © Nintendo


Progressive Web Apps

The missing link


What's Missing?

1. Homescreen Access2. Push Notifications3. Offline4. Access to terminal capabilities


PWA

Mix of new and not so new technologies to make webapp evolve


Some core technologies

● Service workers

● App Shell

● Installability and App Manifest

● Notifications and Push APIs


Service Workers

JavaScript Worker acting as a proxy

Fully programmable: https://serviceworke.rs/ ● Cache● Notifications HTTPS only

https://serviceworke.rs/


Service Workers


AppShell

Minimal HTML, CSS, JS

● load fast

● cached

● dynamically display content


Installability and manifestBrowsers display install banner if app has:

● A web app manifest file with:○ a short_name (used on the home screen)○ a name (used in the banner)○ a 144x144 png icon (the icon declarations

must include a mime type of image/png)○ a start_url that loads

● Has a service worker registered● Is served over HTTPS ● Is visited at least twice, with at least

five minutes between visits.


Testing the manifest

On Chrome Dev Tools


Installability and manifest


Notifications and Push APIs

● Based on Service Workers○ In background

serviceWorkerRegistration.

showNotification(title, options);

{

"body": "Did you make a $1,000,000 purchase at Dr. Evil...",

"icon": "images/ccard.png",

"vibrate": [200, 100, 200, 100, 200, 100, 400],

"tag": "request",

"actions": [

{ "action": "yes", "title": "Yes", "icon": "images/yes.png" },

{ "action": "no", "title": "No", "icon": "images/no.png" }

]

}


Notifications and Push APIs


Progressiveness

What does it mean?


Progressive means everybody

Progressive enhancement as a core tenant

No matter the browser choice, our web app works for all


But not everything for everybody

Core features for all, enhanced features for some


But iOS doesn't support PWA...

Safari's… hmm… delay in adding modern features...

isn't a problem if you're considering Progressive Web Apps

https://cloudfour.com/thinks/ios-doesnt-support-progressive-web-apps-so-what/




But iOS doesn't support PWA...● Progressive Web Apps still work on iOS● Progressive Web Apps perform better on iOS


Example of progressiveness

Offline mode


Offline mode

Background sync APIUsing Service Workers

// Register your service worker:

navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:

navigator.serviceWorker.ready.then(function(swRegistration) {

return swRegistration.sync.register('myFirstSync');

});

// in /sw.js

self.addEventListener('sync', function(event) {

if (event.tag == 'myFirstSync') {

event.waitUntil(doSomeStuff());

}

});


Offline mode

Service Worker and Cache API

Great and easy to use…but support isn't universal yet


Offline mode

But if I need offline everywhere?

Universal alternatives...

IndexedDB PouchDB

LocalForage Dexie.js


Offline mode

Online or offline?

A property

window.navigator.onLine

Two events

online and offline


Offline mode

Or simply back to the progressive idea

Safari users get no offline mode


Offline mode

But the others do

And Safari still gets a faster app!


How to measure progressiveness?

Lighthouse


Lighthouse


Lighthouse1. Install Lighthouse extension (Chrome)

2. Visit website, click on the Lighthouse icon

3. Check the results

4. Target 90% or higher

https://github.com/GoogleChrome/lighthouse


I want to know more

Give me more information


PWA showcasehttps://developers.google.com/web/showcase/


Conclusion

That's all folks!


Thank you!

progressive web apps - brestjs 2016-10

Technology