First Steps to mastering PWA (Progressive Web App)

You might have seen the acronym PWA (Progressive Web App) popping up all over the place at conferences related to web and mobile technologies for the last few years. Especially at events organized by Google. What is PWA? What are its benefits and disadvantages? Read on to find out the answers to these questions.

5B

There are around 5 billion devices connected to the internet all around the world, of which a large chunk is mobile devices. Mobile-first is a trend everyone should know these days. Research shows that when using a smartphone, 3 times more users browse websites rather than native applications.

The same study shows an opposite trend when it comes to time spent in the application – native apps are a definite favorite here. Why is that the case? The best answer to this questions lies in something called "native-like experience."

Native-like experience

It's much easier to open your favorite application by clicking on an icon, rather than to enter the address in a mobile browser. Trouble begins when our device doesn't have internet access at the moment. The browser usually tries to help users pass the time by serving a gray screen with a dinosaur. In turn, native applications continuously display their UI and often include information that downloaded during the last visit when the user's device had internet access. In short, users can still access data they might be interested.

You can always play dino when unable to access the internet

Push notifications are the icing on the cake. We like to receive notifications even if we don't keep the application open. We're always happy to see a new cat photo or get our comment answered. We are more involved in the experience. And it's that involvement that creators and publishers of apps care about most. Until recently, all the functionalities mentioned above were available only in native applications. Everything changed with the PWA model – the Progressive Web Application.

PWA. What is it and who needs it?

PWA is nothing else than a regular web application (HTML + CSS + JS) enriched with a few extras that allow achieving the native-like experience.

Your application must meet the following requirements (this is the PWA checklist):

• It's served by HTTPS for data security.

• RWD (responsive web design) is essential that your app looks good on both desktop and mobile platforms.

• It works even when you're not connected to the internet (it doesn't need to be the full functionality, but at least a screen indicating that there's no connection).

• It has a file 'manifest.json' describing the app, thanks to which we can add a shortcut to the start screen.

• It loads quickly even with slow 3G connections.

• Is [Reactive]( (we're not talking here about the React library, but the word Responsive is already taken by WFD) – the main point is that the application responds to user actions quickly (for example, switching screens).

All of these criteria can be performed iteratively. If we already have a web application that renders well on mobile devices, we need to implement the code to ensure offline operation and add a small manifest.json file. In the next steps, we can focus just on performance issues, i.e. on the loading speed of the application and its responsiveness ( speed in action).

Offline-first & Service Worker FTW

One of the most important aspects of PWA is offline operation. We can implement it in several ways. In the minimal version, we can display our screen with information about the lack of network availability. In subsequent stages, we can save data on the memory of our device that we were able to download during the last visit. The last level is downloading data in the background.

How to do it all? The Service Worker API comes in handy. We'd need another blog post here to determine precisely how a Service Worker works. In a nutshell - thanks to SW, we can define which resources should be saved to the cache, and for which ones we want to reach deeper into the depths of the internet. We save what's most important for later, so next time you launch the application, you don't have to wait for the files to download from our server. In addition to manageable caching, Service Worker also allows the implementation of Push-Notifications and Background Sync.

Show me manifest.json, and I'll tell you who you are

The manifest.json file is used to describe the application. We provide here information about the name of the app, icons, and the starting address. A sample file might look like this:

{
    "name": "Sunscrapers PWA",
    "short_name": "Sun PWA", 
    "icons": [{ 
      "src": "/android-chrome-192x192.webp", 
      "sizes": "192x192", 
      "type": "image/png" 
    }, { 
      "src": "/android-chrome-512x512.webp", 
      "sizes": "512x512", 
      "type": "image/png" 
    }], 
    "theme_color": "#ffffff", 
    "background_color": "#ffffff", 
    "display": "standalone" 
}

The name of our application - name - will be displayed on the so-called splash-screen, while the short name - * short_name* - will be displayed under the icon on the device's desktop, for example.

PWA allows adding an icon to your desktop and displays a splash-screen

We can also set the background color for splash-screen (background_color) and the color to be used by the browser and phone interface when the application is launched (theme_color). The last item - display - allows specifying the mode in which the application should be launched. Standalone mode hides the browser interface, giving the impression of a native app.

Application in display-standalone mode and visited in the browser

It all sounds great – but is it worth it?

For developers, the common code-base is a significant advantage. With PWA, we're actually creating one application that runs on all platforms (Desktop, iOS, Android etc.). The same can't be said about other technologies like React Native, Ionic, and Cordova. In these cases, we write one code-base, but only for mobile platforms. It often happens that architectural differences between platforms don't allow sharing of code. In the case of PWA, we can talk about one WEB platform - under which we write one shared code.

For publishers, the advantage of Progressive Web App is frequent updates. To launch a new version of a mobile application, you usually have to work hard (depending on the platform). The application goes to the store, passes the review... The user receives a notification and accepts the update – and only then the application is updated.

In the case of PWA, the only thing we need to do is upload new files to our server. That's all! The next time the application is launched, the user will get the latest version of the code. Simple, right?

For business stakeholders, PWA will prove cost-effective. Since everything can be written using web technologies, why hire Android and iOS developers? PWA is not fully ready yet to replace native applications, so developers can sleep peacefully without worrying about their fate.

Users, on the other hand, will benefit from the responsiveness of the application and the fact that they can run it on any platform. Microsoft recently announced that the search engine implemented in the Windows Store would also search for Progressive Web Apps and allow installing in the system. That will give users an even more native-like experience.

Too beautiful to be true - where's the catch?

As they say: All that glitters is not gold. I mentioned Google in the introduction to this article for a reason. Google actively and intensely promotes Progressive Web Apps. Apple doesn't mention it, probably fearing a drop in activity on the App Store. Why would users enter the store if they can type the address in the browser and add the application directly to their start screen? Exactly. Research shows that at every installation step, we lose as many as 20% of users (and that's an optimistic view).

In addition, not all phone functionalities are available through the WEB API. Although their number increases every year, not every browser provider implements them at the same time. You can check what your phone offers through WEB API here: https://whatwebcando.today/.

That doesn't mean, however, that PWA doesn't pay off for iOS. On the contrary – as shown by various use cases, the Progressive Web App allows increasing the conversion rate by up to 75%. By implementing the Progressive Web App , Forbes has improved the time users stay in the application by 43%. Housing.com reduced their bounce rate by 40% (the number of people leaving the application after viewing only one page).

Quo vadis PWA

To sum up - Progressive Web App is a great model that helps developers make web applications more attractive. We can transform an application into PWA in small steps and gain a lot in productivity, time, common code for many platforms – and user satisfaction.