Progressive Web Apps - BrestJS 2016-10

Embed Size (px)

Text of Progressive Web Apps - BrestJS 2016-10

  • @LostInBrittany@BrestJS #PWA

    Progressive Web Appswith Polymer

    Horacio Gonzalez @LostInBrittany

  • @LostInBrittany@BrestJS #PWA

    Horacio Gonzalez

    @LostInBrittany

    Cityzen Datahttp://cityzendata.com

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

  • @LostInBrittany@BrestJS #PWA

    Apps vs Web mobile

    Yet again...

  • @LostInBrittany@BrestJS #PWA

    How did the Web beat native applications on the desktop?

    Distribution Is The Hardest Problem In Software

  • @LostInBrittany@BrestJS #PWA

    The Mobile Internet came when it brought the Web

    You had the whole desktop internet in your hands

    Everywhere !

  • @LostInBrittany@BrestJS #PWA

    Applications?

  • @LostInBrittany@BrestJS #PWA

    Applications vs Web

    Users spend way more time on apps than on browser

  • @LostInBrittany@BrestJS #PWA

    So apps are winning aren't it?

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

  • @LostInBrittany@BrestJS #PWA

    Apps drive engagement

    But web drives visitors...

  • @LostInBrittany@BrestJS #PWA

    Are you winning the app lottery?

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

  • @LostInBrittany@BrestJS #PWA

    The best of two worlds?

    Web audience and app engagement...

  • @LostInBrittany@BrestJS #PWA

    What if the Web evolved?

    Just as it did with Ajax!

    Image: Nintendo

  • @LostInBrittany@BrestJS #PWA

    Progressive Web Apps

    The missing link

  • @LostInBrittany@BrestJS #PWA

    What's Missing?

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

  • @LostInBrittany@BrestJS #PWA

    PWA

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

  • @LostInBrittany@BrestJS #PWA

    Some core technologies

    Service workers

    App Shell

    Installability and App Manifest

    Notifications and Push APIs

  • @LostInBrittany@BrestJS #PWA

    Service Workers

    JavaScript Worker acting as a proxy

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

    https://serviceworke.rs/

  • @LostInBrittany@BrestJS #PWA

    Service Workers

  • @LostInBrittany@BrestJS #PWA

    AppShell

    Minimal HTML, CSS, JS

    load fast

    cached

    dynamically display content

  • @LostInBrittany@BrestJS #PWA

    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.

  • @LostInBrittany@BrestJS #PWA

    Testing the manifest

    On Chrome Dev Tools

  • @LostInBrittany@BrestJS #PWA

    Installability and manifest

  • @LostInBrittany@BrestJS #PWA

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

    ]

    }

  • @LostInBrittany@BrestJS #PWA

    Notifications and Push APIs

  • @LostInBrittany@BrestJS #PWA

    Progressiveness

    What does it mean?

  • @LostInBrittany@BrestJS #PWA

    Progressive means everybody

    Progressive enhancement as a core tenant

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

  • @LostInBrittany@BrestJS #PWA

    But not everything for everybody

    Core features for all, enhanced features for some

  • @LostInBrittany@BrestJS #PWA

    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/

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

  • @LostInBrittany@BrestJS #PWA

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

  • @LostInBrittany@BrestJS #PWA

    Example of progressiveness

    Offline mode

  • @LostInBrittany@BrestJS #PWA

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

    }

    });

  • @LostInBrittany@BrestJS #PWA

    Offline mode

    Service Worker and Cache API

    Great and easy to usebut support isn't universal yet

  • @LostInBrittany@BrestJS #PWA

    Offline mode

    But if I need offline everywhere?

    Universal alternatives...

    IndexedDB PouchDB

    LocalForage Dexie.js

  • @LostInBrittany@BrestJS #PWA

    Offline mode

    Online or offline?

    A property

    window.navigator.onLine

    Two events

    online and offline

  • @LostInBrittany@BrestJS #PWA

    Offline mode

    Or simply back to the progressive idea

    Safari users get no offline mode

  • @LostInBrittany@BrestJS #PWA

    Offline mode

    But the others do

    And Safari still gets a faster app!

  • @LostInBrittany@BrestJS #PWA

    How to measure progressiveness?

    Lighthouse

  • @LostInBrittany@BrestJS #PWA

    Lighthouse

  • @LostInBrittany@BrestJS #PWA

    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

  • @LostInBrittany@BrestJS #PWA

    I want to know more

    Give me more information

  • @LostInBrittany@BrestJS #PWA

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

  • @LostInBrittany@BrestJS #PWA

    Conclusion

    That's all folks!

  • @LostInBrittany@BrestJS #PWA

    Thank you!