Progressive Web Apps

OSCAL 2017, Alban Xhaferllari

About me

B.Sc. & M.Sc. in Computer Science

Full Stack Dev, Italy

Full Stack Dev, Ireland

Senior Front End Dev, Dublin Ireland

Author of Real Uploader

ngular Developer

JS since 2005

Born in Corovodë

www.vlora-guide.com

www.saranda-guide.com

Let's turn back in 2000

The web of 00'

There is a rising threat of single-vendor solutions

Close source

We could have a web of

<script type="text/vbscript">
      msgbox "Vbscript"
</script>

HTML5 W3C Draft

Mozilla, Opera Join Forces For New W3C Proposal

http://www.internetnews.com/bus-news/article.php/3361141

Web apps evolution

2004

2005

2009

2010

2016

looks better at http://www.evolutionoftheweb.com

HTML5 rocks

Video, Audio
Ajax File Upload
Canvas 2D, 3D
Animations
WebGL
WebSockets
WebWorkers
Geolocation

<video controls>
  <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"'/>
  <source src="devstories.mp4"
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

var myWorker = new Worker('worker.js');

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

A new threat to the Web

"There's a new existential threat... It's not Flash and Silverlight – it's native apps, [which are] feeding off the web, and arguably killing the web." – Bruce Lawson (2016)

Native apps

Faster to load
Better UX
Notifications
Work offline
Performance
Background sync
Hardware access (bluetooth, USB, NFC...)

80% of time spent on 5 apps
94% of revenue from 1% of publishers
60% of app Play store never downloaded
Install friction
Hard to update
Store rules

Web apps

No installation
Cross platform
Easy to update
Easy to deploy
Linkable, Searchable
No space require on device
Single development language

Progressive Web Apps

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.

*from Google

40% of the users abandon a website that takes more than 3 seconds to load

Why?

Internet is fast

We have powerful devices

Unlimited space

We build the internet and it's based on rough consensus and running code

Service Workers

Browser developers are not better at building websites than web developers

Offline First

A Javascript file
Runs in background
No access to DOM

Service Workers

Cache management
Network management
Background Synchronisation
Push Notifications

Service Workers: Support

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/sw.js');
}

In your web page:

Support

Under development

Under consideration

Service Workers: Install

Service Workers: Fetch

self.addEventListener('fetch', function(){
    debugger;
});

self.addEventListener('fetch', event => {
    event.respondWith(
        new Response('Hello');
    );
});

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);
    if (url.pathname.endsWith('.jpg')) {
        event.respondWith(
            fetch('ncage.jpg');
        );
    }

});

Service Workers: Cache

Handling offline

//Put offline.html page into cache on the first load
self.addEventListener('install', function(event) {
    var offlineRequest = new Request('offline.html');
    event.waitUntil(
        fetch(offlineRequest).then(function(response) {
            return caches.open('offline').then(function(cache) {
                console.log('[oninstall] Cached offline page', response.url);
                return cache.put(offlineRequest, response);
            });
        })
    );
});

self.addEventListener('fetch', event => {
    var request = event.request;
    if (request.method === 'GET' && request.headers.get(‘accept’).includes('text/html')) {
        event.respondWith(
            fetch(request).catch(function(error) {
                console.error('[onfetch] Failed. Serving cached offline fallback ' + error);
                return caches.open('offline').then(function(cache) {
                    return cache.match('offline.html');
                });
           })
       );
    }
});

Service Workers: AppCache

Jake Archibald: Chrome Dev

Edge Dev

Service Workers: Background Sync

IndexedDB

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

Web App Manifest

App Manifest file

{
  "name": "Telegram",
  "description": "Telegram Web App.\nMore info & source code here: https://github.com/zhukov/webogram",
  "short_name": "Telegram",
  "display": "standalone",
  "theme_color": "#497495",
  "gcm_sender_id": "122867383838",
  "start_url": "./?utm_source=web_app_manifest",
  "scope": "/",
  "background_color": "#fff",
  "icons": [
    {
      "src": "img/icons/icon16.png",
      "type": "image/png",
      "sizes": "16x16"
    }//...
  ],
  "related_applications": [
    {
      "platform": "play",
      "id": "org.telegram.messenger",
      "url": "https://telegram.org/dl/android?ref=webmanifest"
    },
    {
      "platform": "itunes",
      "url": "https://telegram.org/dl/ios?ref=webmanifest"
    }
  ]
}

<link rel="manifest" href="/manifest.json">

Link in your HTML <head>

And more...

Push Notification

Use WebWorkers for processing

navigator.getBattery()

WebSockets

Fetch Api

Web is progressing

Browser support is progressing

You app is progressing

PWA: Real World

https://www.pwastats.com/

Telegram Web is a Progressive Web App

Let's see a demo

https://github.com/albanx/oscal-17-demo

SW 8.41s

No SW 7.7s

First load

Connection 3G

Let's see a demo

https://github.com/albanx/oscal-17-demo

SW 4.32s

No SW 7.7s

Second load

Connection 3G

Let's see a demo

https://github.com/albanx/oscal-17-demo

SW 1.38s

No Connection

Third load

Let's see a demo

https://github.com/albanx/oscal-17-demo

No Connection

Perform a search

Custom response

Progressive Web Apps

About me

Let's turn back in 2000

The web of 00'

We could have a web of

HTML5 W3C Draft

Web apps evolution

HTML5 rocks

A new threat to the Web

Native apps

Web apps

Progressive Web Apps

Why?

Service Workers

Service Workers

Service Workers: Support

Service Workers: Install

Service Workers: Fetch

Service Workers: Cache

Service Workers: AppCache

Service Workers: Background Sync

Web App Manifest

And more...

PWA: Real World

Let's see a demo

Let's see a demo

Let's see a demo

Let's see a demo

Links

Progressive Web Apps

More from Alban Xhaferllari