What Are Progressive Web Apps?

In recent years, Google has put increased emphasis on mobile user experience. Mobile traffic is reaching its all time high these days and it’s only said to be going up even higher in the near future - that’s why Google is focused on improving mobile UX more than ever.

However, it is not only about introducing Google AMP, or a controversial solution of mobile first index; Google went even further and during Chrome Dev Summit in 2015 introduced Progressive Web Apps (PWA). It was a step towards enhancing traditional websites and mobile apps.

Initially, it didn’t become so popular but it has changed over time. In 2016 PWAs are making a great career standing out from mobile websites around the world. What is a Progressive Website App? Take a closer look at PWAs.

What is a Progressive Web App?

A progressive web application is a mix of a traditional website and mobile application. It takes what is best from current development technology combining UX and website performance. It works on different platforms in every modern browser. The combination of the best app and website makes a complete, progressive product which opens up various possibilities for site developers.

Let’s take a look at some of the most interesting technological advancements PWAs have to offer:

Push notifications
Web Application can inform you about a new message or update you on currently viewed content, etc. Push notifications increase the user engagement, which makes the interaction between the content provider and user more valuable.

Background sync
The app can be updated in a background system when you don’t use it. It proves handy and useful, especially in places where your Internet connection is slow or very poor. Later, waiting time for required data is significantly shorter, all you need is already downloaded.

Offline Caching
Even if you are offline, a website allows you to enjoy some functionalities. You can use it without the Internet connection and that is exactly why PWAs bring user experience to a higher level than traditional websites.

Add Homescreen
You can add the web application to your home screen without downloading and install it from the app store. From now on, you can open the application without the need to open it in a web tab e.g. in Chrome or Opera. It makes it more accessible as you can open it directly from your home screen. Also, the app can be used in full screen mode which provides even better user experience. It is more accessible then because you can open it immediately.  

Progressive Web Apps - examples

How does it work?

Progressive Web Apps are built in Application Shell. This type of architecture provides really fast loading by caching and dynamically displayed content. The secret is that majority of data, whole application & shell is downloaded only once and store in the app cache. Content is the only variable displayed dynamically. This procedure maximises user experience and decreases requests/demand for data transfer. Amazing app performance results from reduction of the data which needs to be downloaded. All those things finally lead to improved user satisfaction.

App Shell - PWA

Key advantages

According to Google PWA guidelines, Progressive Website Apps offer many benefits over traditional mobile pages. They are:

Progressive - works for every user, regardless of the browser,
Responsive - fits your mobile, desktop, tablet or any other device,
Connectivity independent - possible to work offline or on networks low in speed and quality,
App-like - app shell model provides app-style user navigation,
Fresh - always up-to-date thanks to its specification,
Save - SSL certificate provides security and integrity of downloading and uploading data,
Discoverable - are identifiable thanks to W3C manifests and service worker registration scope allowing search engines to find them,
Re-engageable - make re-engagement easy through features like push notifications,
Installable - allow users to “save” apps they find most useful on their mobile home screen without downloading from app store,
Linkable - easily share via URL, not require complex installation. Easy to share and use!

Sounds amazing. However, like any other new technology, it entails many complications and limitations, especially from a developer’s perspective. The PWA development, implementation and debugging is a real challenge. But Google comes to help!

It creates a complex checklist to help you with proper implementation. It contains a comprehensive list of potential problems and suggestions how to solve them. Furthermore, you can find many helpful tools or plugins online.

PWA - Lighthouse Chrome plugin

Who uses Progressive Web Apps?

In 2016 many big players on the market decided to implement PWAs. In most cases that was a bullseye shot! Why? The amazing thing is that marketing cost of user acquisition shrunk from 3-4 dollars to few cents per user!

Obviously, convincing users to download an app from the store is difficult and expensive. Implementation of Progressive Web App partially solves this problem and gives a new range of possibilities.

PWA - examples

On  the list  you can find a few well-known brands like TheWashingtonPost, CNN or XING. Below you can see already implemented Progressive Web Apps:

PWApps - Examples

If you want to know more about who implements progressive web apps in 2016 and what it results in, watch the whole presentation of Thao Tran (Global Product Partnership Leader @Google) during Chrome Dev Summit 2016 in Amsterdam. You can see the whole video below:

What does Progressive Web Apps mean for your SEO?

Progressive Web Apps, this new technology makes SEO specialists face a huge challenge. How to make all available data crawlable by robots like GoogleBot? The answer is not so simple.

PWA is using JavaScript framework, which means that GoogleBot might crawl that site like any other page on the web based on JavaScript or AJAX. However, sometimes indexing such web pages cause a number of problems. SEO specialists and developers need to take into consideration all pros and cons using this type of front-end technology. Need to remember how to optimise PWAs.

Like with many questionable issues, Google on their blog recommend few good practices during Progressive Web Apps indexation. You can read the whole Google article here.

Summary

Progressive Web Apps is a new trend in web development. This technology brings incredible results both for marketers and users. Efficient functioning together with an easy and fast access to needed data make it outstanding and very user- and publisher-friendly. All things considered, it’s likely to be the future of mobile websites and app development.

Wojciech Murawski

Wojtek deals with on-page SEO. He aims at improving clients’ positions in search engine rankings, which mainly involves focusing on technical and structural aspects of a website – both for users and crawlers. During his work, he pays special attention to improvement of the pages’ load time. In his free time, he enjoys watching movies and listening to his favorite music. Besides, each weekend he watches English Premier League football matches.

wojciech murawski