Progressive Web Apps combine features of both websites and mobile applications. Under the presentation layer, which looks like a mobile application, they work like a regular responsive website extended with several new functionalities. We can easily distinguish 3 main features of PWAs:

• Reliable
• Fast
• Engaging

Reliable

It means that app loads instantly and nevers shows so-called downasaur, even with no network connection. Also when we launch app from the user’s home screen with wifi or data transfer turned off, the app will handle this and will show us cached data from our previous session.

Fast

Being able to load without Internet connection means that we do not have to worry about infinite loaders and spinners. We get the access to cached data immediately without turning on data transfer or Wi-Fi on our mobile device, refreshing application and so on. It is just one click on icon at your home screen!

Engaging

It is all about user experience. User can easily add PWA to his home screen, without the need of installing it from the app store. So the user has the impression of using a native mobile application that actually is just a website.

Progressive Web Apps requirements

Everything sounds awesome, but to create PWA we must meet certain requirements. Firstly, PWA should be safe so it must be secured by HTTPS protocol. As we know PWA is just a website on the mobile device so it has to be responsive. Otherwise, the appearance of our application will be terrible. Moreover, PWA has to work even when we are not connected to the Internet. It does not have to be all functional but it should has at least a screen indicating that there is no connection. And app must be also reactive. It means that the application should react quickly to user actions, e.g. switching screens.

​{ "short_name": "", "name": "", "icons": [ { "src": "", "sizes": "144x144", "type": "image/png" } ], "start_url": "", "background_color": "", "theme_color": "", "display": "fullscreen" }​

How to create PWA?

Basically, we must only add some files to our current website. Firstly, you need to add manifest.json file to the project. This file describes application by defining e.g. app’s name and icons in various size. It is a good practice to put this file into the root directory of your project.

Example manifest.json file

After the file has been created, we need to tell the browser where it is located by adding link tag in index.html file.

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

The second step is to add Service Worker, responsible for saving files in Cache Storage. When the file has been downloaded by the browser, the Service Worker saves it to the cache to use it in the future when user will not be connected to the network. We also need to create service-worker.js file which contains list of files that should be remember by user’s browser.

​if('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('Registration successful, scope is:', registration.scope); }) .catch(function(error) { console.log('Service worker registration failed, error:', error); }); }​

Example Service Worker file

After the file has been created, we need to tell the browser where it is located so we connect it in index.html file.

​var FILES_TO_CACHE = [ '.', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700', 'images/still_life-1600_large_2x.jpg', 'images/still_life-800_large_1x.jpg', 'images/still_life_small.jpg', 'images/still_life_medium.jpg', 'index.html', 'pages/offline.html', 'pages/404.html' ]; var staticCacheName = 'pages-cache-v1'; self.addEventListener('install', function(event) { console.log('Attempting to install service worker and cache static assets'); event.waitUntil( caches.open(staticCacheName) .then(function(cache) { return cache.addAll(FILES_TO_CACHE); }) ); });​

We can also customize our PWA by changing top bar color. It is realized by adding meta tag with value theme-color in property name. In addition, we can install Lighthouse plugin to test our PWA but it is not necessary.

Advantages and disadvantages

I think that the whole concept of PWA is really futuristic. For us - programmers, common code-base is a big pros. By implementing one application we receive both website and mobile app. For publishers, the benefits of the Progressive Web App are updates. In order to launch a new version of the mobile application, you usually have to work hard, of course depending of the platform. In the case of PWA, the only thing we need to do is upload new files to the server. High portability is another benefit of a PWA and it does not change your packaging or deployment model unlike the strategies for native apps. Moreover, PWAs are always available on your home screen for easy run and return. For business, PWAs will probably be a source of savings, because we need only Front-end team to achieve website and mobile version of our app.

But PWAs are not fully ready yet to replace native applications, so developers can sleep peacefully without worrying about their future. The PWAs do not support all browsers, with the exception of the newer ones. This point is quite essential, since the Safari browser alone covers 50% of browser market for mobile devices. Unfortunately, not all devices support the entire software functionality. For example, a progressive app for Android devices has some support issues, and a progressive app for iOS devices does not support notifications and shortcut prompting on the home screen. In addition, the iOS devices cover about 50% of the mobile device market in the USA.

As I said before, PWAs concept is really futuristic and can bring a lot profits but it have to be more polished to succeed.

‍