PWA in practise: 11 case studies
Progressive Web Applications: everything you need to know
26 Aug 2019 / 4min
In mid-2018, for the first time the traffic generated on websites by mobile devices exceeded that coming from laptops and desktop computers.
Technology standards typically mirror changes in user habits - because of the growing demands of mobile users, most modern websites are now being built to act like native applications on the phone. Hence, the spotlight is on >Progressive Web Apps (PWA).
What is PWA?
In short, thanks to PWA, websites are now utilizing the full capacity of modern web browsers, including the optimization of load times and overall performance speed, offline functionality, access to geolocation, sensors, cameras, Bluetooth and so on. PWAs are also installable on the user’s homescreen, so that they can access a PWA based website via a typical app style icon, helping to maintain the look and feel of a native app.
The PWA standard developed by the creators of the Chrome browser and recommended by Google, offers a guide of best practice with clearly determined benchmarks. PWA may sound like a technological buzzword, but numerous implementations confirm that this is the next step in creating user-friendly websites, which will allow us to explore virtually endless possibilities, such as full offline mode - as in the PWA's version of Flipkart - or the benefits associated with the use of geolocation tools.
PWA from a user's perspective
PWA is a web-based application that can be installed (or added to your home screen) on any device, including desktop computers. It works optimally with slow Internet connections as well as with no connection at all, thanks to the use of cached data from previous visits. This brings an enhanced user experience.
What is the difference between PWAs and native applications?
The application is a stand-alone program that works on a smartphone in the same way as computer programs, like for example, Microsoft Word.
In turn, PWA is a website that looks like a mobile app. However, in some ways it acts like Google Docs - it does the same thing as a program like Word, but directly through a web browser.
First of all, unlike a typical native application, PWA is not limited to one platform. It must work on any browser, on any operating system, and on any device. Otherwise, it is not a true Progressive Web Application.
Native mobile app |
PWA |
| Developing and maintaining separate projects for individual operating systems (iOS, Android) | Developing and maintaining one project for all operating systems (iOS, Android, Windows, macOS, Linux) and web browsers |
| Push notifications | Push notifications (except iOS right now) |
| Offline mode | Offline mode |
| Risk of inconsistencies and gaps in user experience on various devices | Consistent - seamless - customer experience across all devices |
| Fees from external app platforms like Google Play Store or Apple AppStore | No additional or hidden costs or fees |
| Discoverability only through app stores (you need to use app stores to find it) | Website level discoverability including search engines, SEO, advertising and traffic promotions |
| Demands multiple resources including computing power, graphics cards etc. | Uses resources limited to the context of a web browser |
| Support for contactless payments and fingerprint recognition (biometrics) | At present no support for contactless payments and fingerprint recognition (biometrics) |
Key differences between PWA and a responsive website
Today, the typical user accesses the Internet through multiple devices. Responsively designed pages adapt to the specific user's needs. This is the foundation of PWA's operation. But responsiveness is just the beginning. PWA offers much more opportunities to use the potential of browsers and often has the structure of a mobile app. It's more interactive and engaging. It can also be added to the home screen of the device, so it looks like a simple app.
A website based on RWD, might display Chrome's ‘sad dinosaur’, when a user loses connection, which gives no added value to users.
However PWA - like a mobile app - can deliver core functionality without an internet connection. This is done by accessing content or elements from the user's previous journeys as a result of caching (earlier loading of data to memory on a scale that was not used before), as well as, having the Service Worker running in the background, which allows preloaded materials to be used offline.
How to build a PWA?
First of all, we must ensure that four minimum requirements are met to achieve a positive result in the PWA benchmark test run by Google Lighthouse tool:
1. The manifest.json file
This is a file in JSON format, understood and read by modern web browsers. Every PWA app must have it because it defines the following things:
- Full and short name for the smartphone/computer menu
- PWA app icons
- Charging screen
- Display mode: whether PWA is to be full screen or standalone in the browser with the address bar
- Preferred screen rotation mode
- Browser UI colors
2. Service Worker
Service Worker is a JS script (standard language for web applications, in addition to supporting HTML and CSS), which mediates between the application and the browser. It can collect information about the client, stores reusable data on the browser side (files, content, etc.), as well as, enables offline functionality.
3. App icons
PWA apps should contain a collection of icons that will allow them to display correctly on menus and start screens of many devices of different types such as tablets, smartphones, computers, and even TVs. Therefore, they should have many sizes, starting from 192px height and 512px width. Tools like this help to generate such a set from one base icon in high resolution.
4. Encrypted connection due to HTTPS
To meet full PWA requirements, our web app must use HTTPS - a secure connection standard. Fortunately, thanks to services such as Cloudflare, Incapsula or LetsEncrypt you can easily encrypt traffic between servers and end devices. It's much more than just a good practice. Such websites are marked as ‘trusted’ which removes unnecessary concern among users that their data may be intercepted and stolen.
Why do we need PWA?
PWA allows you to address the primary problems that affect mobile experience:
- quality of user internet connection
- no features or installability straight from mobile applications
- slow loading pages
- low user involvement
- low conversion
Thanks to PWA, pages load and run quickly, so nothing interrupts the user while browsing content or disrupts the path to purchase. Thus, we reduce the risk of losing users or potential customers, tired of long journeys or irritated by losing access to the network and then needing to start from the beginning.
Conclusion
PWA is becoming a significant force in the world of app development today. This is a whole new level of mobile experience, which unlike traditional mobile applications, doesn’t require a large investment. Should you be considering PWA? Absolutely.