Web app blog post desktop and mobile view

What is a Progressive Web App?

Google Chrome engineer Alex Russell coined the phrase "progressive web app", or "PWA" for short, in 2015. On a smart mobile device PWA’s look and function like an app, but they have a number of advantages over their native app counterparts.

For a start, they are downloaded from the web, instead of being installed from an app store. Modern technology in mobile browsers makes them easier to write and deploy, and as PWAs are downloaded on-the-fly, you can be sure that all users have the most up to date version.

This approach ensures the efficiency and functionality of a native app, but with greater ease of deployment, maintainability and smaller download size.

What makes PWAs special?

PWAs load like regular web pages, but behave as if they were native applications. The usual browser controls, like the address bar and forward/back navigation, are hidden, giving the impression that there is no web browser involved at all.

When first visited, the user can pin a PWA to the desktop or home screen, like any regular app. As they are fully responsive, PWAs are much smaller than native apps, saving storage space and data transfer. 

After recent advances in mobile browser technologies (e.g. Javascript, CSS3 and HTML5), PWAs can run as fast and efficiently as native apps.

No connection? Not a problem

Early web apps suffered from the problem of needing to have an internet connection all the time. As soon as the user was offline, the app would no longer work.

That's where the progressive part comes in. Progressive web apps work offline, and they can have background tasks carried out by “service workers” — scripts that enable "push" notifications from browser to device, and data being synchronised in the background.

Why doesn't every site have a PWA?

That's a good question! They have become easier to write in a common way, and they naturally ensure all users have the latest version of the app.

Developers will appreciate the ease of deployment and maintainability of PWAs. They can write them for a single platform: there is no more need to write numerous versions of the same app for iPhone, Android and other platforms, as the same code runs on any modern device, regardless of the operating system.

Additionally, maintaining PWAs might not require users to download any updates, as these can be instantly applied directly to the website. All updates are deployed to every user at the same time, resulting in a consistent user experience.

How to make a PWA with Zenario

Zenario 8 makes it easy to write a progressive web app. 

Your Zenario site developer can make a PWA simply by adding a small number of files to the Zenario installation.

Your site will need the following files:

Manifest

A simple JSON file with information about how the web application should behave when 'installed' on a device.

It should be added to all pages that make up the application with a link tag.

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

https://developers.google.com/web/fundamentals/web-app-manifest/

Service Worker

A script that browsers run in the background and is seperate from a web page. This allows for various features but notably allows support for offline experiences.

A service worker is needed for Chrome to display an "Add to homescreen" popup but you can use a minimal service worker if you don't want to add any additional offline features.

e.g.

self.addEventListener('fetch', function(e) {
e.respondWith(fetch(e.request));
});

It must be placed in your app's root directory, and needs to be registered on the page. So for a service worker at in the file /sw.js you can add the code below to the header.

 if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}

https://developers.google.com/web/fundamentals/primers/service-workers/

Theme and icons

Components like icons and the address bar colour can be customised, but to fully support all browsers, some extra tags are needed. 

https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/