Countless examples of progressive web apps prove that they can combine the best of web applications with the best features of mobile apps. As shown in the previous parts of this series, they use Service Workers, HTTPS, a manifest file and a shell architecture to bring the experience of a native app to Web applications. Selected Progressive Web Apps (PWA) examples will be presented in this article.
Progressive Web Apps are among the technologies originally proposed by Google to make the web a better place for everyone. In this case, “better” means that the web is fast and easily accessible to users no matter where they are or how they access it – even if it’s over a very slow Internet connection.
Opportunities of Progressive Web Apps
Progressive Web Apps” describes applications that use the new features supported by modern browsers, including Service Worker and Web App Manifest, regardless of the native operating system of the device in use.
Regardless of the examples presented, Progressive Web Apps describe a user experience that leverages the reach of the Web and has the following characteristics:
- Reliability: Loads instantly and never displays the “No Internet Connection” warning, even under unreliable network conditions.
- Speed: Responds quickly to user interactions with fast animation and no faltering scrolling.
- Appealing: Feels like natural apps on the device and provides an immersive experience.
The question remains: Why do you need such progressive web apps and are there already examples of progressive web apps in production use? Or is this again just the next hype that captures the IT world and is quickly forgotten? Experts answer this question clearly with “no”, because the advantages of PWAs are immense:
- Costs: The costs for building a PWA are much lower than for mobile applications.
- Progressive: This means that they work for every user, no matter which browser they use.
- Responsive: They fit any form of web usage – via desktop computer, mobile phone, tablet… and even via devices that are not yet developed today.
- Independent of an Internet connection: Service workers allow you to work offline or when the network is poor.
- Like an app: PWAs feel like a native app and offer the same kind of interaction and navigation.
- Always up to date: PWAs are always up to date thanks to a service worker update process.
- Secure: Connected via HTTPS they prevent unauthorized access or manipulation.
- Easy to find: Through W3C Manifest and Service Worker registration they are easily recognized as an app and can therefore be found by search engines.
- Arouses recurring interest: Getting users interested is easy, because PWAs have features like push messages
- Installability: It allows users to place those apps on the home screen that they find most useful.
To make this more concrete, some examples of PWAs that are currently in use or under development are appropriate.
Example 1: Twitter Lite as Progressive Web App
Twitter Lite (mobile.twitter.com) was built as a progressive web app and this has helped to improve the user experience when users access the site from a mobile device. In 2017 it became the default mobile site for Twitter globally. The social media company developed Twitter Lite to provide a more reliable experience – with the goal of immediate loading, user retention and reduced data consumption.
Since most users in the world access the network via 2G or 3G, it is important that this access is very fast. Twitter Lite loads in under 5 seconds on a 3G connection. It supports offline support, so you won’t be interrupted just because Twitter temporarily loses the connection. Compared to native mobile apps, the Twitter Lite PWA has just 600 KB, while the Android app uses 25 MB of disk space, the iOS app even 215 MB.
Example 2: House hunting via Progressive Web App
Housing.com is an Indian property search portal that allows users to search for apartments and houses. Geographical location, number of rooms etc. are taken into account. It is one of the leading real estate sites in India. In 2016, the in-house development team decided to create their own Progressive Web App. With a result that is quite impressive: For example, the loading of the site improved by over 30 percent and at the same time the time users spent on the site increased by a good 10 percent.
Considering that most Indian users access the network via 2G or 3G, it becomes clear how important a fast user experience is. To reduce loading times, Housing.com uses Service Worker technology and a streamlined site so that users can quickly find what they are looking for. Users can continue to search for properties and view previous searches – all while they are offline.
Example 3: About as an example for PWAs
Uber also realized in a timely manner that a fast loading site is needed if the company is to be successful in many parts of the world – even where there are only 2G Internet connections. The solution was again a Progressive Web App: m.uber.com
The PWA delivers an app-like experience to those users who access the site via mobile devices from low-cost manufacturers for whom there may not even be a native app. The PWA is also very small. A simple request for a driver consumes just 50KB, which makes it possible to quickly load the web app even in a 2G network. Again, the mobile web app uses service workers and local disk space, so users have a good experience even if their internet connection fluctuates