(i) Progressive Enhancement

Content:

HTML

Good detail

Presentation:

CSS

Client-side Scripting

JavaScript

Can vary depending on device

Each layer "envelopes" the previous layer

(ii) The Manifest File

A JSON file that gives you the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the device home screen), direct what the user can launch and more importantly how they can launch it.

It defines properties such as:

A short name for use on the user’s home screen

Which icon to display for which screen size (form factor)

The start URL defines the page of the application that the browser should display when the PWA is launched from home screen

The background colour on the splash screen

How it should be displayed in the browser, e.g. in a browser or standalone

The screen orientation, landscape or portrait.

The scope attribute defines where you can navigate to from within the PWA, i.e. which URLs are “allowed” and which ones aren’t.

The theme colour sets the PWA’s tool bar, e.g. when switching between apps on the mobile.

Below is an example manifest file:

{
    "short_name": "Maps",
    "name": "Google Maps",
    "icons": [
      {
        "src": "/images/icons-192.png",
        "type": "image/png",
        "sizes": "192 × 192"
      },
      {
        "src": "/images/icons-512.png",
        "type": "images/png",
        "sizes": "512 × 512"
      }
    ],
    "start_url": "/maps/?source=pwa",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/maps/",
    "theme_color": "#3367D6"
}

Link it to the app.

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

(iii) The App Shell

Consists of minimal HTML, CSS and JavaScript used for the user interface

Only loaded from network once and is then cached

When started again the shell is loaded from cache

Later the app only loads new data

Benefits: speed and reliability

(iv) Can be added to the home screen

PWAs can prompt the user to install the PWA on the mobile’s home screen after repeated usage.

The PWA will also be added to the app launcher, Android's app settings and can register a set of intent filters, i.e. it will run like an installed native app.

On desktop the PWA will run in an app window

This is possible because Chrome automatically generates and installs a special APK for the app by using data from the manifest file and other meta data.

(v) Service workers

A service worker is a type of web worker, a JavaScript file that runs separately from the main browser thread.

It can be installed on the user’s browser and is allowed to do actions in the background, such as intercept network requests, cache resources, retrieve resources from cache or to deliver push notifications.

It is often used to enable offline app behaviour.

For example a service worker can be programmed to intercept requests from the client to the server, check if a resource has already been cached in app cache and if so load the requested resource from cache rather than requesting it from the server.

(vi) The Notification API

Native apps can send notifications to the notification screen of the mobile phone. Most web sites cannot do this (but newer ones also can send notifications). PWAs can send notifications too.

Is used to create customised notifications, e.g. you can define an image, title and description.

Notifications work together with Service Worker.

The application is notified when a user interacts with a notification, e.g. clicks on it.

(vii) The Push API

Allows to add an event listener for push events and add functionality to display a notification using the Notification API.

This lets a service worker listen to incoming push messages.

Source: 🔗 George.com enhances the mobile customer experience with new Progressive Web App

George is the clothes retailing brand of supermarket chain Asda, which is part of Walmart.

George have upgraded their site and app to a PWA.

Problems with the old site:

Not user friendly enough as customers expect an excellent mobile shopping experience.

Page loads aren’t fast enough

Customers should easily find the products they are interested in and (hopefully) want to buy

After switching to a PWA usage statistics show:

A 31% increase in mobile conversion, i.e. customers who visit the site actually buy products

3.8x faster average load time of pages

2x lower bounce rate

20% more page views per visit

28% more time spend on this site for visits from Home screen, i.e. installed PWAs.