Progressive Web apps are one of the more interesting technology concepts to surface in late 2015. Developed by Google, the idea is to create an enhanced website that features app-like qualities.
What are progressive Web apps?
In short, a progressive Web app is nothing more than a traditional website, but with added features, provided by concepts we already know, but bundled in a wrapped package called progressive Web apps.
The term was first used by Alex Russel, a Google developer, and covers three separate functions; a service worker, an app shell and a JSON manifest. Together these make up what we know call a PWA, and the combination of this is quite powerful.
There’s a whole host of advantages to implementing a progressive Web app on existing website solutions, ranging from improved performance and better conversion rates, to offline functionality and push notifications to name some of the more interesting features.
Compared to a conventional website, the PWA works in harmony with it, but acts as a layer between the website and the Internet connection, routing all browser requests through a script called a service worker, which will then display the desired results.
Image modified from original located at Google Developers
Technically, a PWA will save the entire webpage to a visitor’s local storage, and only update the content when needed. The way this is achieved is by using the service worker to serve all pages, CSS stylesheets, images and JavaScripts etc. All this will be stored in what is generally referred to as an app shell, as we know it from mobile app development terms, and means that everything needed to render the page will be stored locally for optimal performance.
Then, once a user browses to a new page, or a page with updated content compared to that user’s last visit, the service worker will show the new content accordingly, and store it in the app shell as well. While not necessary, this is how the majority of current implementations prefer to handle the cached content, and is how Google suggests developers handle it as well.
What are some of the advantages
Below is a list of some of the benefits of implementing service workers and progressive enhancement on existing websites:
• Responsive layout works on all devices;
• Feels and responds like a mobile app;
• Revisits works in offline mode;
• Prompts the user to add to home screen;
• Push Notifications;
• Improved performance.
Responsive layout works on all devices
Progressive Web enhancement means that all users should experience the same content and visual interface. While users with service worker supported browsers will see all the positives of PWAs, users that browse from clients without support for PWAs will still see the same layout, regardless of their devices, although they won’t be able to take advantage of the various benefits, such as offline mode or push notifications. This is a step in the right direction where Web and mobile apps are concerned, since many languages and software packages in the past have had a history of bad dependencies, remember Flash?
Feels and responds like a mobile app
Because the progressive Web app caches everything in a so called ‘app shell,’ we have the option to mimic the look and feel of a regular mobile application, complete with UI elements, animations like we know them from popular apps and so forth. Google developer guidelines recommend following a set of best practices that will ensure all Web apps keep to the tried and tested in terms of UI, thus improving the user experience because the average user will be accustomed to the layouts and icons.
Revisits works in offline mode
The very first time a user visits a website with a progressive Web app installed, a complete or partial set of cached content will be stored locally on that user’s device. This ensures that any later visits will be serving pages almost instantly, and adds the possibility for users to visit the pages in offline mode. Depending on how the individual PWAs are developed, it’s possible to cache all content, or some of it, and it’s also possible to show a simple custom offline page, or to show the ‘live’ version with offline cached content. The possibilities are what makes this feature so interesting, it can be adapted for virtually all types of needs.
Prompts the user to add to home screen
Once a website meets a few requirements posed by Google, various browsers now prompt the visitors to install the PWA on their home screens, similar to installing an app and getting an icon for easy access.
While we’ve had this possibility for quite a while with bookmarks and websites, now that we can access the PWA in offline mode, this adds a new dimension to the concept, and coupled with the next item on our list, can prove an invaluable innovation.
Image sourced from Google Developers
Push Notifications
Whenever a visitor adds the progressive Web app to their home screens, they can be asked to also accept push notifications and thus receive messages on their devices automatically. This opens up for websites to tap into the marketing potential mobile applications have previously had a monopoly on.
The below image shows just how many users actually accept this prompt in a study performed by Google.
Image sourced from Google Developers
Improved performance
Significant improvements have been made when comparing page load times and page sizes compared to websites without a service worker installed, on both mobile and desktop clients. Below is an image of just how well the progressive web apps have been performing, based on the same study performed by Google as mentioned earlier.
Image sourced from Google Developers
Keep in mind that the service workers cache content on the first visit, but since users have to download everything on that visit, the performance increases only happen on subsequent loads.
Image sourced from Google Developers
We see on the above chart an almost 30 percent increase in performance on desktop devices, and more than 22 percent on mobile devices due to the service workers efficient caching methods.
Reported results
So far we’ve seen impressive data from some of the pioneering companies and websites successfully leveraging the possibilities and features of progressive Web apps.
This includes AliExpress, which has seen a 104 percent increase
in its conversion rates for users visiting via its progressive app from its home screens.
FlipKart Lite, an Indian online retailer, has managed to increase time spent on site from 70 seconds on its mobile app, to 210 seconds on their progressive Web app. It has also seen an increase of 70 percent in conversion rates, and three times lower data usage because of the lower page sizes.
There are many more positive results, such as Konga, a Nigerian online eCommerce site, managing to decrease their page size by 90 percent allowing its 2G-browsing majority of users speedy access to its content and products.
Current limitations
While the future looks bright for progressive Web apps on the whole, there are a few requirements and limitations to be aware of.
For a website to be eligible for in-browser prompts and push notifications, the website needs to be served over a secured TLS connection.
Currently, not all popular browsers support the features discussed, notably Apple’s Safari, and Microsoft’s Internet Explorer are lacking in this area. While Microsoft has stated it is working on implementing these features, Apple, so far, has only been adding a few notes on progressive Web apps and service workers on its five-year road map for its browser.
Although progressive Web apps by their very nature works regardless of browser support, not all users will reap the full benefits and, therefore, it is up to the individual websites to determine if it is better to wait a while for further support, before implementing their own progressive web apps.
Conclusion
These are exciting times for Web developers and online entities not intent on having a native mobile app developed, since progressive Web apps can be had comparatively cheap in this regard. Furthermore, the fact that browsers currently are not supporting progressive Web apps still show users regular content means that businesses need not be afraid to invest in this technology now — then no one will be left with broken pages or error messages showing their browsers are not supported.
