PWAs - Technology Fundamentals and Powerful Use Cases
Written by GoodBarber Team on
In this article we will dive deeper into 10 fundamental user experiences that make a Progressive Web App and take a look at some applications from companies that are already using this innovative way to build a website. These user experiences, promoted by Google, are the key characteristics to get an app-like experience, regardless of device or operational system. This is the main goal of PWAs.
The web applications of Smashing Magazine, Flipkart, Walmart, The Washington Post and Product Hunt are great case studies to help understand how very specific aspects of this technology work and how it's helping businesses to succeed even more online. Let's dive into it!
To showcase this characteristic I've now opened Flipkart's application in Chrome browser on an Android device. When the page is loaded, we can instantly perceive how the browser UI has adapted itself, changing the colors to match with the PWA. This is a really good example of how the apps can constantly improve by responding to the resources available.
Also in this example, they take advantage of the device's features like vibration, to call the user's attention to specific actions they want to encourage, inviting the user to add the app to the home screen in this case. Beyond that, the background operations of the phone are also running, in order to collect usage data to deliver a better experience for users.
Walmart's web page is a great example of how a website can adapt itself, changing the layout based on the user's device capabilities. For instance, on the mobile version, which looks a lot like an app interface, most of the navigation buttons have been moved into the menu, which now can be accessed through a button in the top corner. Also, some of the information and internal ads have been distributed, so it's seems more native for the users. Moving to the other two examples, they are now a lot more similar, as the ratio of the screen doesn't change as much, so only some of the blocks are multiplied and resized.
Still in this case, it's interesting to pay attention to the top banner on iPad and Desktop. While on iPad it invites the user to install the native app, on desktop, some specific promotion is highlighted. This is an example of how the marketing strategies can be adapted for different platforms, and how mobile is an important tool to turn users into premium customers.
On the image above we can see the sign that indicates that this is a safe page, protected with an HTTPs certificate. On top of the security procedure, The Washington Post went a step further and also made the Paper Validation, which allows them to display the company's name on the navigation bar, instead of the default URL for the page.
Product Hunt, as an early adopter by nature, already started taking advantage of this feature and enable users to install their webpage into their smartphone's home screen. The install can be done either with the Install Request Message or from the Options button on the browser, both being simple and quick for the users.
Besides the obvious benefits of being present on the springboard of the device, after the PWA is installed, it progressively gets better, losing the UI of the browser, allowing services workers to respond more efficiently and improving the general user experience. By reducing the installation process friction faced on the app stores, it becomes easier to re-engage users and then convert then into customer or loyal users.
Again, Product Hunt is using the PWA's features on its favour, the example above showcasing the web push notifications. When the users have been on the app for little while they are prompted with the request to allow push notifications on the Progressive Web App, this activate the service worker that, now, is able to send pushes for users, not only on when they are on the app but also when the phone is resting or the user is in different applications.
Assembling all this pieces together and putting it in perspective, what Progressive Web Apps really bring to the table are radically improved web applications that offer the perfect experience for users. So, reliability, speed and engagement are the main takeaways of it this methodology.
As we could see, the use cases for Progressive Web Apps are quite diverse, and surely with more app creators embracing it we will witness the development of a lot more amazing examples. We can just say we are thrilled and with our eyes open for it!