Improve Your SEO Indirectly With Progressive Web Apps
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?
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.
Not only will the enhanced page speed and lower bounce rates positively affect the rankings from an SEO point of view, but it will also increase the user experience, and provide yet another channel for marketing content to visitors with push notifications.
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, depending on more parameters than a normal website, thereby making it possible to add offline messages, or even offline webpage content specifically tailored for users without internet access.
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 JavaScript’s 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 suggest developers to 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 PWA’s, users which browse from clients without support for PWA’s 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 depencies, 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 since the average user will be accustomed to the layouts and icons already.
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 users device. This ensures that any later visits will be serving pages near instantly, and adds the possibility for users to visit the pages in offline mode. Depending on how the individual PWA’s 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.
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 receieve 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 link shows just how many users actually accept this prompt in a study performed by Google.
Improved performance
Quite signifcant 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.
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.
We see on the above chart an almost 30% increase in performance on desktop devices, and more than 22% 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% increase in their conversion rates for users visiting via their progressive app from their home screens for instance.
FlipKart Lite, an Indian online retailer, has managed to increase time spent on site from 70 seconds on their mobile app, to 210 seconds on their progressive web app. They’ve also seen an increase of 70% in conversion rates, and 3x 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% allowing their 2G-browsing majority of users speedy access to their 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.
In order 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 they’re working on implementing these features, Apple have so far only been adding a few notes on progressive web apps and service workers on their 5 year road map for their 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 whether it’s 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 not supporting progressive web apps still show users regular content means that businesses need not be afraid to invest in this technology now, since no one will be left with broken pages or error messages showing their browsers isn’t supported.
Author Bio:
Mark has been developing for the web since 2001, always with a penchant for open-source technologies such as PHP. Since 2010 he has been working full time with app development, these days being employed at Nodes, a leading European app agency. He also regularly contributes to WordPress and other open-source projects.
