A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” – Progressive Web Apps

https://

service worker

WEB page

acts like

an app

service worker

start fast

installable

work online

offline

usable

instantly

slow connections

PWA

PWA

PWA

PWA

PWA

PWA

Can't we just build more apps?

VS.

https://

 2 h 25 min

90%

In 2017

an App

WEB page

day

26min

day

~

~

10%

~

~

Apps are awesome!

 re-engaging

push notifications

direct access point

native app experience

offline

add to home screen

faster

slicker

works with/without wifi

in 2016 users downloaded over 90 billion apps

spent nearly 900 billion hours in apps

Mobile app usage

30 apps

In average user interacts with 

9 apps

day 30:10

including pre-installed apps

month

5

non-native

apps

installed from app store

Mobile app retention

80%

after 3 month

24 hours

not retained

23%

after 1 use

 the average app mostly loses its entire userbase within a few months.” – Andrew Chen, Supply Growth @ Uber.

Web has broader reach

5 billion devices connected to a web

over 2 billion users

Web has broader reach

accessible across platforms

easily shared among users

readable by search engines

mobile websites have far greater reach capability than a native app!

https://

PWA pros

No installation

accessible through URLs, and indexed by search engins, due to W3C manifests and registration of Service Worker

No updates

add to

home screen

offline

quick load

service worker

push

notifications

HTTPS hosting

compatibility

app cross-

functionality

doesn't take as much space, extends the battery life, less data usage

application shell model provides an interface of native apps ( scrolling, navigation )

PWA cons

Browser support

NOT ALL devices support entire functionality

NO latest hardware advancements

NO cross application logins

38%

mobile device market in the USA.

PWA

when web fails you

true story about lie-fi...

reliable

on-line/offline app won't fail you

 Offline First Experience

network connectivity is an enhancement

INSTEAD of mobile FIRST mindset 

default mode is OFFLINE

Use PWA when your connectivity is slow, unreliable, limited, or expensive

Jumia Case study

75% connections

mobile 2G

low-end phones 

sporadic connection

data limitations

data-heavy native app

High drop-off rates

high acquisition costs

1/4 shopping carts  abandoned

33% increase in conversion rates 

PWA had 12 times more traffic then native app

50% bounce-rate decrease

PWA uses 80% less data

PWA consumes 25 times less storage

offline-first experince

Challenges of PWA

ecommerce

SINGLE feature

LIGHT version 

full PWA

Where do I start?

Weather Channel

80% improvement in load time

international sites were launched first

focused on browser push notifications 

mobile  WEB for Android

desktop on Chrome

in 3 months 1 million users received push notifications 

52% from

mobile web 

available in 62 languages and 178 countries

PWA to U.S. site in 2017

1. You need a website!

Means that you know some HTML,CSS, JS, responsive web, Chrome DevTools and Github

What you need to know

collection of technologies, design concepts, and Web APIs that work in tandem

PWA

• do it yourself

• use a template

• Material Design Lite

• Start Bootstrap

• Google developers Web Starter Kit

2.1 You need to install a couple tools

Lighthouse  It has audits for performance, accessibility, progressive web apps.

npm install -g lighthouse

• In Chrome DevTools

• Command Line

To run the report:

lighthouse https://mobile.twitter.com/home

Twitter Light

• The Google Chrome app Web Server for Chrome

• Firebase Hosting

• A local HTTP Python Server (Python's built-in HTTP server)

 python -m SimpleHTTPServer

Use chrome://apps

2.1 Install a temporary local web server

3.1 App Manifest

A manifest is a simple JSON that contains data about a website

• full-screen mode

• contains src for "add to home screen"

• theme and color for the PWA

• Use background_color when the manifest is available before the CSS has loaded

• standalone application - different window, own icon in the app launcher

{
 "name": "CSS Development Conference",
 "short_name": "CssDevConf",
 "lang": "en-US",
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#555",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  }
 ]
}

Use an online generator for manifest.json

3.2 App Manifest

Invalid manifest file won't be count at all, means no PWA

• It must follow W3C’s specification

• Use an online validator

• Check browser support

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

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="CssDevConf">
<meta name="apple-mobile-web-app-title" content="CssDevConf">
<meta name="msapplication-starturl" content="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

add to your index.html

4. Prepare your assets

Icon to add to the home screen

• Use an online generator to get all sizes for all devices

• add to <head> of your index.html

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

5. App shell

The app shell  is the minimal HTML, CSS, and JavaScript that is required to power the user interface of PWA

app shell

content

Loads Instantly

populates later on

6.1 Service Workers

• web page and service worker are 2 separate things

• SW Runs on its own in the  background and handles network requests

service workers

Service Workers is an event based script that provides  offline experience, push notifications and caching. 

• SW should be considered a progressive enhancement

• for browser support use:

6.2 Add Service Worker (easy way)

1. Create a service worker JS file: sw.js

2. Register SW in your main.js file

npm install --save sw-toolbox

git clone https://github.com/GoogleChrome/sw-toolbox.git

3. Use sw-toolbox Library for common caching strategies

if (‘serviceWorker’ in navigator) { 
  window.addEventListener(‘load’, function() {   
    navigator.serviceWorker.register(‘/sw.js’).then(
      function(registration) { 
        console.log(‘ServiceWorker: registered‘, registration.scope); }, 
      function(err) { 
        console.log(‘ServiceWorker: failed: ‘, err); 
      }); 
  });
}

6.3 Add Service Worker (easy way)

4.  Use importScripts in your sw.js

importScripts('js/sw-toolbox/sw-toolbox.js');

6.  SW-toolbox provides several cache management strategies:

• Cache first, Network fallback (static images)

• Network first, Cache fallback (for fresh data)

toolbox.cacheFirst();

toolbox.networkFirst();

5. Use precache(); to add URLs to a cache when the service worker is installed.

toolbox.precache(['index.html','style/style.css']); 

Next, you have to set up a route that will handle updates for index.html

6.4 Add Service Worker (easy way)

6.1  Cache-expiration strategy:

toolbox.router.get(
    '/images/*', 
    toolbox.cacheFirst) ,
    {cache; {
      Name: 'images' ,
      maxEntries: 6
    }}
);

6.2  Use lie-fi strategy:

toolbox.router.get(
    '/*', 
    toolbox.networkFirst,
    {networkTimeoutSeconds: 3}
);

• set the timeout to three seconds when fetching an image. If no response, please fall back to the cached content

WebSockets vs. Service Worker

both being used for client-server communications

WebSockets

Service Workers

• continuous communication between client and server

• send messages to each other without having to create new connections

• one-off client-server communications

•  For example syncing an app and the DB after the app was offline for some time

7. Host it in HTTPS

SW require that &just don’t work otherwise

Github Pages are served over HTTPS, so they're a great place to host demos.

1. Getting a SSL/TLS certificate

   • it's not that simple, but you have ownership of the certificate and full control over it

   • Mozilla's SSL config generator

2. Proxying all requests through some services Incapsula or Cloudflare

• easy configuration and free, but you don't have full control

2 ways to do it:

ReactJS - is its component-centered approach to development.

Frameworks for PWA

Polymer templates - apply Google’s popular material design by default.

AngularJS - more heavyweight than React, but also highly preferred among enterprise Java and .NET developers.

APM - Accelerated Mobile Pages

HTML

AMP

AMP-specific JavaScript library

AMP

cache

Accelerated Mobile Pages​

AMP provides reliably fast web components for first load

 traditional HTML document with some restrictions

responsible for quick HMTL rendering

 which makes it possible for the browser to render an AMP cache

Ready, Set, GO!

Service Workers: extended

 located between the customer and the network and act as a proxy to cache content

• runs in the background and allows non-blocking heavy computation

• SW run in an isolated thread, must be in a separate file

• Has no DOM access

• ​Communication is done by

like Web Workers

postMessage();

Unlike  Web Workers

• Can run without any page at all

•  it’s event-driven

• Is HTTPS only

service worker

Service Worker life cycle

Register Service Workers

Use register() event in your main js file

if ('serviceWorker' in navigator) {
    //checking for browser support then register
    navigator.serviceWorker
             .register('./sw.js')
             //logging the scope of the service worker
             .then(function(registration) {
                console.log('ServiceWorker: registered, scope is:', 
                            registration.scope);
             });}

<link rel="serviceworker" href="sw.js" scope="/link/">

Default scope is the location of the SW file

Installation of Service Worker in html (proposal)

Regular

Experimental

Install Service Workers

In install() event you can declare all assets you want to cache. (Images, basic/offline html, fonts, vendor libs and js files) 

//to keep track of the version of SW
var cacheName = 'cache1';
//to separate app shell from data
var filesToCache = ['/', '/index.html'];

self.addEventListener('install', function(e) {
  console.log('ServiceWorker: install event fired');
  //lets the browser know when installation was 
  //completed successfully or failed
  e.waitUntil(
    //open the cache
    caches.open(cacheName).then(function(cache) {
      console.log('ServiceWorker: caching app shell');
      //Confirm whether all the required assets are cached or not
      return cache.addAll(filesToCache);
    })
  );
});

If any of the files fail to download, then the install step will fail

Create a file sw.js in your root directory

Activate Event

old service worker will stop serving the files if we do it in Install() event

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
    //remove old cache here if any of the app shell files changed
});

cleans up old cache when activating an update to the Service Worker

Activate() is cache management

service worker is installed

user goes to a different page/refresh

service worker will begin to receive fetch events

Service Workers and Fetch API

Fetch() event serves the app shell from the cache

Let's now serve the app shell from the cache

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

Service Workers and Fetch API

Service workers can catch all requests made by PWA and handle them

Update Service Workers

blank page == no registered service worker on the page

Debugging service workers

Chrome dev tools -> Application -> Service workers

page with registered service worker

Notifications API

web page send notifications that are displayed outside the page at the system level

Push notifications

is one of the advanced features of SW

In Development

Supported

Maybe Never

Push API

gives ability to receive push notification messages pushed to them from a server

• Navigation

• Header with a title

• Buttons

• Loading

Seamless user interface with PWA

Create interface for the "offline" mode

Material Design Light

"text-heavy webpage" template

What needs to be on the screen immediately?

What other UI components to use?

Check MDL library of components

Go as light as possible

Use a "checklist"

Designing Great UIs for Progressive Web Apps

- Owen Campbell-Moore, Product Manager @ Google

1. For Fast screen transitions use cache first strategy

2. Tappable areas should give touch feedback

3. All <img> tags must have dimensions. Use placeholders.

4. Buttons and ‘non-content’ shouldn’t be selectable 

user-select: none;

5. Avoid static elements available on every page: footers with links.

Continue with a "checklist"

8. Modify the design on a per platform basis:

9. Or design an app UI that isn't tied to any particular platform

6. Either implement advanced touch interactions WELL or AVOID them at all. ("pull to refresh" or "swipe to dismiss")

7. Avoid hamburger menus entirely

/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

Designing Great UIs for Progressive Web Apps

- Owen Campbell-Moore, Product Manager @ Google

Unified customer experience

App

PWA

Big challenges for PWA

users don't expect the web behaves like a native app.

(full screen mode, push notifications or work offline)

Provide good on-boarding experience for the user

push notifications are one of the top reasons for mobile users to uninstall an app

gaining trust

• show how users will benefit from PWA

• let them know when the app is fully cached and they can use it offline

• Do not push notifications just because you can!

• Reliable : provide off-line experience and cache management 

• Engaging : Launched from home screen and can receive push notification

• Secure: Served over HTTPS

• Fast:  Respond quickly to user interactions

Conclusion

PWA is a term for combined use of modern technologies, design concepts, and Web APIs to provide an app-like experience on the mobile web

• Browser support: only Chrome, Opera, Samsung’s Android Chrome support PWA

• Software functionality support: not all devices support "add to home screen" and /or "push notifications"