Progressive Web Apps

 

...the future of web apps

 
http://bit.ly/pwa-slides
 
click here read the awesome blog post :)
 

Social: @kn9ts

#pwaroadshow

450+ million

 

The number of mobile subscribers in Africa as of 2015 (Q1)

 
http://goo.gl/EAoy7E
 

51% growth

 

predicted between 2014 and 2020

 

75% purchases being 

smartphones

 

predicted between 2014 and 2020

 

80% GSM/EDGE

 

expected to be cut in half by 2020 by upgrades to 3G/WCDMA

 

The rest of the world will be in 4G

 

 40 - 250 kbps

 

The range of a 2G/EDGE connection

 

Think 

Smartphone

Think 

Android

 

Why not Web?

1

Smartphones run on Android...duh!

 

OK! Then what about apps?

1

Do web apps come into mind when thinking about apps?

 

NOT at first! 

1

They are not native apps.
They are apps that work in a browser ONLY.

 

Everybody here!

 

I would create a native app

1

If I am targeting mobile subscribers.

 

Everybody here!

 

Or use meteorjs or phonegap

1

To create a HYBRID native mobile app.

 

Everybody here!

 

define the word app?!

1

What makes an app feel 'appy'??? :)

 

The network 

is always unpredictable.

I want a fast app.

1

The web is not that fast!

 

If there's no network. I want my app to work offline, for real!

1

The web can't do that!

 

I want my app to have push notifications.

1

The web can't do that!

 

I want my app to be installed!

1

The web can't do that!

 

The web can't do that!

 

The web CAN do that!

 

And even BETTER!

 

Performance: App shell model

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Your awesome site -- Homepage</title>
    ...
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/application.css" />
    <link rel="stylesheet" type="text/css" href="./css/section.css?" />
    <link rel="stylesheet" type="text/css" href="./css/prefixed-main.css" />
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    ...

    <script type="text/javascript" src="./vendor/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="./vendor/angularjs/angular.min.js"></script>
    <script type="text/javascript" src="./vendor/jquery-cookie/jquery.cookie.js"></script>
    <script type="text/javascript" src="./vendor/hammerjs/hammer.min.js"></script>
    <script type="text/javascript" src="./vendor/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>
    <script>
        // initialise the application.
        app.initialize();
    </script>
</body>

</html>

A lot LESS of this.

 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Your awesome site -- Homepage</title>
    ...
    <style>
        /* 
        Your application's shell styling here
        body{padding: 10px ... }
        header{color: #000; text: #FFF ... }
        */
    </style>
    <script type="text/javascript">
        function loadCSS(cssPath) { ... }
    </script>
</head>

<body>
    <!-- 
    The 1st render should happen server-side
    This way the user get's content immediately 
    as you go on to fetch more for the currently satisfied user 
    -->
    ...
    <!-- Load the script asyncronously -->
    <script type="text/javascript" src="./lib/all-the-other-code.min.js" async></script>
</body>

</html>

A lot MORE of this.

1
non-blocking
 

Impact of performance.

1

R.A.I.L

 

TL;ILIWRI

 

  • Focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to ultimately make users happy.

  • Respond to users immediately; acknowledge user input in under 100ms.

  • Render each frame in under 16ms and aim for consistency; users notice 'jank'.

  • Maximize main thread idle time.

  • Keep users engaged; deliver interactive content in under 1000ms.

 
It's likely I won't read it
 

Secure.

SSL/HTTPS

 
A service worker has a lot of power. We wouldn't want it to fall into the wrong hands.
 

Re-engages the user.

 
With the release of the Push and Notification Web APIs, The user can receive push notifications even when the web app is closed.
 

Case Study: Google Plus

 
Google Plus hit their goal of never downloading more than 60k of HTML, 60k of JavaScript and 60k of CSS at any one time!
 

Once we've done all we can do.

 

We progress to enhancing the app to a

Progressive Web App

 

A progressive web app uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction.

 

Progressive web apps properties:

 

  • Progressive

  • Responsive

  • Connectivity Independent

  • App-like

  • Fresh

 

  • Safe

  • Discoverable 

  • Installable

  • Re-engable 

  • Linkable (it's the web)

 

The Heuristics

 

How can you join the movement?

 
{
    name: "My Awesome Web App",
    short_name: "Awesome App",
    icons: [{
        src: "images/touch/icon-96x96.png",
        sizes: "96x96",
        type: "image/png"
    }, {
        src: "images/touch/icon-128x128.png",
        sizes: "128x128",
        type: "image/png"
    }, {
        src: "images/touch/apple-touch-icon.png",
        sizes: "152x152",
        type: "image/png"
    }, {
        src: "images/touch/chrome-touch-icon-192x192.png",
        sizes: "192x192",
        type: "image/png"
    }],
    start_url: "/index.html?homescreen=1",
    display: "standalone",
    background_color: "#3E4EB8",
    theme_color: "#2F3BA2"
}

Manifest.json

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

Let the browser know. we add this to the <head>

 

A Service Worker

A service worker is a client side network proxy. But that's not the only trick it has up it's sleeves.
// Register the ServiceWorker
navigator.serviceWorker
    .register('sw-script.js', {
      scope: '.'
    }).then((registration) => {
      // The service worker has been registered!
    });
// http://bit.ly/sw-lifecycle
self.addEventListener('install', (event) => {
    // Service worker has been downloaded and installed.
    // Your 1st task can be to cache the app shell
    // preparing it to work offline
});

self.addEventListener('activate', (event) => {
    // Has now been installed.
    // Maybe finish the setup
    // Or clean up old resources cached
});

self.addEventListener('fetch', (event) => {
    // Watch for every event and do something
    // for every single request 
    // being made by the client to the server
});

SW life cycle

 

Registration

 
var CACHE_NAME = 'dependencies-cache';

// Files required to make this app work offline
var REQUIRED_FILES = [
  'random-1.png',
  'random-2.png',
  'random-3.png',
  'style.css',
  'index.html',
  '/', // Separate URL than index.html!
  'index.js',
  'app.js'
];

self.addEventListener('install', (event) => {
  // Perform install step:  
  // loading each required file into cache
  event.waitUntil(
    caches.open(CACHE_NAME)
      // Add all offline dependencies to the cache
      .then((cache) => {
          return cache.addAll(REQUIRED_FILES));
      }) 
      // At this point everything has been cached
      .then(() => self.skipWaiting())
  );
});

Cache the App Shell

 
A service worker can then use the Cache API to cache the app's shell: basically the applications layout styles and business logic.
 
service-worker.js
 

FASTEN the curr. FAST load!

 
https://www.youtube.com/watch?v=d5_6yHixpsQ
 

Network Independent

 
The service worker provides access to the Cache API. The app shell can be cached. It then has everything it needs to work offline and fast.
 

Content

is King.

 
Content the user has seen can then be cached. Just like native apps. Even when offline, content is still KING.
 

“it is better to have yesterday result instantly than to wait too long for today's data.”

 

Syncs in the background.

 
The service worker's background sync feature has your back (literally).
 

Web APIs awareness:

 

  • Geolocation

  • Fetch API (replaces XMLHttpRequest)

  • IndexedDB (for the SQLite guys)

  • Web Bluetooth

  • WebRTC

  • Battery API

  • Accelerometer API

  • And many more

 

Take advantage of the web's low friction.

 

This is the greatest weapon the web has.

 

"In a consumer app, every step you make the users take to access your services costs you 20% of your users."

 
http://goo.gl/aefHJ0
 

Find the app!

1

click install

1

accept permissions

1

download

1

use the app

 

1

800

640

410

512

328

Find the app!

1

800

...and use it!

1

The web solves a number of challenges native 

mobile apps have:

 

  • Installs are not an issue

  • Have no APK size restrictions

  • Are always up-to-date (do not require re-installs for an update to happen)

  • They work everywhere (a browser is)

  • Tend to be trusted more than native apps

 
http://fortune.com/2015/09/02/google-mobile-web-ads/
 

Am hoping to see a lot

less of this.

 
Your user’s are already  real users the minute they land on your page.
 

And see

more of this.

 
Your user’s are already  real users the minute they land on your page.
 
https://goo.gl/5FdmFo
 

Eugene Mutai/@kn9ts

Introduction to Progressive Web Apps

By Eugene Mutai

Made with Slides.com

Introduction to Progressive Web Apps

This is an introduction to the future of web apps. With the introduction of several new Web APIs leveling the playing field for web apps to native apps. The web and native mobile apps are about to go on a head to head battle of user experience.

  • 26,036

More from Eugene Mutai