Google is starting to talk more and more about it: the Progressive Web App, halfway between a web site and a mobile application, would they be the future of the Web? But what are they really and how can these PWA change the global web? In this article, we will explain what it is about, their interest and their functioning, but we will also clarify the impact of the latter on the natural referencing of our content and the good practices to be put in place. To build a perfect SEO Strategy, you have to be open minded about new technologie.

What is a Progressive Web App?

A Progressive Web App, often called PWA, is a method to create native web applications for mobile devices (they do not serve on fixed computers). The aim is to provide the user with the same content and functionality as a mobile application (whether one would detach on the App Store or on Google Play) and the same content as a site, without having to install them on its mobile device and with the most reduced loading time possible.

To better understand what is involved, we must first understand what they are doing with the traditional market: web sites on the one hand, and mobile applications on the other.

Traditional web sites

Web sites are the most commonly used solution to present a company, brand, or association on the Web. For years, the sites have been appealing to common technologies such as HTML, CSS and JS.
The problem of web sites is to make them compatible with all media and browsers, and in particular being adapted to mobile devices thanks to modular design and a loading time that is constantly trying to optimize.

Mobile applications

Conversely, mobile applications are often more reactive because custom developed and stored on the user’s phone. You can even send notifications and access more advanced features thanks to phone capabilities (photo, video, etc.).
The problem is different with this solution, because the stress of the installation greatly hinders users (not including binding updates). Moreover, they have a cost of development and maintenance for each platform, making them expensive.

Progressive Web App

The goal of a Progressive Web App is to find the right balance between the two, and to benefit from the advantages of each of these two solutions: allow you to have web content that loads quickly, seamlessly and adapts to all mobile devices, while allowing mobile use offline or with little flow, accessing the functions of the phone and allowing to send notifications to the user.

How does a Progressive Web App work?

Concepts that hide behind a Web App The basic idea is to have a unique code, which will work on any mobile device (Android, IOS and Windows Phone in particular). Moreover, language is relatively simple because the heart of your content will be displayed in HTML, CSS and JS, like any web site.

The second concept of a Progressive Web App is to make it accessible and “installable” by a traditional web browser: after several visits by the user, the user will then propose to the user to add it to his phone, without being a mobile application and without the user having to manage the updates.

If you simplify the concept, a Progressive Web App is actually an empty shell (called Shell application) in which you can inject, display, and transparently cache the different contents. An image of the official Google site sums up this basic idea.

According to the teams of Google who presented the concept as early as 2015, the benefits of a Progressive Web App are many:

  • They are progressive: they display the default content, work for all, and have features that adapt to the capabilities of the device used (plus the phone or browser allows to do actions, plus PWA can use them);
  • They are responsive as would be a web site (the basic code being HTML and CSS);They depend less on the connection of the device: they can work with very low (2 G and 3 G) Internet flow, or even offline with caching features;
  • They are constantly updated in substantive tasks, without any notification or intervention by the user for this purpose;
  • They are secure because consulted via HTTPS;They provide the same ergonomics as a dedicated mobile application or a responsive web site;
  • They can be shared through a simple URL (the PWA can have a single URL);They can be added on the user’s home screen.

How does a Progressive Web App work?

Taking advantage of a Progressive Web App is relatively simple for the user. The latter first navigue on the traditional website. After several visits, his browser will then detect the Progressive Web App to propose it to the host screen, as here on FlipBoard (the following images come from article https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/):

  • FlipBoard proposes at the bottom the addition on the phone home page is the Progressive Web App.
  • The Progressive Web App then adds to the phone at the click. Once this step is made, it will create on the phone the PWA and actually install the App Shell, that is, the “shell” that will allow to display and store the contents.
  • The Progressive Web App is displayed on the phone, which looks strongly like a traditional mobile application.
  • The PWA can then display the content, as would be the traditional site or a dedicated application. After this phase begins the second stage of a Progressive Web App. It consists of adding “Workers”, substantive tasks that will constantly update and cache content, in a transparent way for the user who will have nothing specific to do. The PWA will thus recover new content and updates in JSON format, a very lightweight format to load as shown by this Google team test:
  • A loading time optimized for Progressive Web App. The Worker will always work in the background (it is also called Idle, or “Service worker”). You can have a whole website updated in real time on the phone, and this with little flow. During the first installation, this is like Progressive Web App and her Worker works:It is added to the user’s telephone;In case of success, the Worker initiates a substantive task and recovers the latest JSON updates;The content is cached in the “Local Storage” of the telephone (the Shell Shell will then display this content in HTML format);If the content is already present, the Worker will continue to transparently conduct its audits and will update the content if necessary.
  • Explanation of a Worker Source Image: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers. If you want to better understand what the Progressive Web App is, we recommend this excellent Paris Conference 2016: https://www.paris-web.fr/2016/conferences/progressive-web-apps-le-futur-du-web-arrive.php

PWA defaults

However, attention: currently Progressive Web App is not compatible with some browsers such as Safari and Internet Explorer (of course…). This is, moreover, the main black point in their implementation.

Another major black point: it will take a traditional site to propose the creation of the Progressive Web App. Therefore, they are not going to replace the web sites optimized for mobile phones.

Why are search engines interested in this?

Google develops this technology and wants to give it more weight for several reasons. The first is that the increase in mobile traffic worldwide pushes him to display quick content to load and responsives. Google winner of the money through advertising, it must offer relevant content but especially adapted to its users.

The second reason is that, despite the important choice given to the user, few of them install applications on their phones. And on those who install it, most of them are not or little used.

Mobile users spend much more time on applications than on websites. But, as a general rule, they install only 8 to 9 applications not months, 25% of which are never used and 26% abandoned from the first use. On Android, every application loses 90% of its daily users after 30 days (77% after only 3 days). In other words, few current applications can claim to replace the corresponding web site.
Source: https://blogs.adobe.com/digitaleurope/fr/mobile-marketing-fr/10-chiffres-retenir-sur-lutilisation-des-applications-mobiles/

The third reason is that traditional sites are often slow to load, and do not allow as good interactivity as a mobile application. The Progressive Web App makes it possible to make notifications as a mobile application, as in the example.

The Impact of Progressive Web App

Google will therefore do everything in its power to drive users and developers into this technology. And the numbers and examples given by Google give you a desire:

  • Alibaba :
    • + 82% conversion rate on IOS;
    • The number of pages viewed was multiplied by 2;
    • + 74% of time spent on the site.
  • 5 miles:
    • Decrease in the 50% rebound rate;
    • Increased time spent on the 30% site;
    • + 30% conversion when an Internet surfer enters the home page since an advertisement;
    • 15% of notifications are open.

Moreover, Google will continue an increasingly extensive integration of the PWA. For example on Android, with the latest versions of Chrome (beta version 57), the addition of Progressive Web App will not only add it to the host screen but also in the setting menu of Android, making its use almost identical to that of a traditional mobile application.
Source: https://www.nextinpact.com/news/103152-chrome-57-beta-veut-propulser-progressive-web-apps-au-premier-plan-sur-android.htm

Examples of Progressive Web App

If this interests you, there is a dedicated site that lists sites that have set up a Progressive Web App. After several navigations on these sites, you should see the possibility of adding them to your mobile device: https://pwa.rocks/

How do I benefit from Progressive Web App for SEO?

Since the contents of a Progressive Web App are indexable, they must be considered as full content of your site. You will therefore have to apply the same recommendations as for any of your content.

Urls

The first thing to take into account is how you are going to rewrite the URL. Take the example of WashingtonPost that possessed PWA content with URL of the type:
https://www.washingtonpost.com/pwa/#https://www.washingtonpost.com/politics/next-for-democrats-a-delicate-dance-to-broker-peace-between-clinton-and-sanders/2016/06/08/34000b6c-2cbd-11e6-9b37-42985f6a265c_story.html

The problem is that the PWA URL contains a #, thus preventing the indexing of all Urls as they will be considered identical by the search engine. With a parameter /pwa? URL this would have worked, and even better with normal URL type /pwa/url/.

Here’s what John Mueller says of Google on the subject: If you would like to replaced the busy site with who, it would break to be crawling & indexing. Some PWAs implements URLs more “traditionally,” which would be able to work with our crawling & indexing. Part of why I made this post post was to encourage PWA-makers to “traditional” URL structures, so that would have the ability to donate’t need to do too much more for SEO should influential decides to move to an alien site over at some point. There are ways to strangers have a PWA & keep the SEO side working, it’s not always easy, goal has good opportunity for smart technical SEOs who likes to stay ahead of the curve & work with hot modern technologies.

In summary, it indicates that if the PWA Urls are poorly implemented, this can block crawl and indexing. It is therefore advisable to create dedicated and proper Urls. Source: https://www.keylimetoolbox.com/news/technical-seo-progressive-web-apps-pwa-javascript-ajax/

A mobile design

The second point to check is to verify that PWA content is responsives, and above all that they are designed “Mobile First”, that is, designed primarily for mobiles (and not a traditional site that adapts on mobile). You will therefore have to follow the same rules as on a traditional site: Compress the files;Reduce the weight of images;Do not block GoogleBot access to the resources of the page;Have a responsive design.

The problem of JS

The third point posing problems in SEO is Worker service: it is he who feeds and caching the data, but it works in JS. Google does not always manage to interpret JS correctly. The Worker therefore needs to improve the user experience (to update new content) without being required to navigate the content of Progressive Web App.

The canonical tag

Third point to be checked: the possible setting up of the Canonical tag. There are then two cases: If content is unique on the Progressive Web App, it is not necessary;However, if these are the same content as the traditional site (but they have different Urls), it is important to put them in place to avoid duplication of content.

HTTP headers

Last thing to be put in place: the HTTP header header in the headers of your pages. By sending this modified header, you indicate that the content of the page changes according to the user-agent.

You could have a single URL to display the traditional content of the site, but also the contents of the Progressive Web App, reducing virtually to zero the risk of duplication of content.
Source: https://developers.google.com/webmasters/mobile-sites/mobile-seo/dynamic-serving#tldr

Conclusion about Progressive Web App and SEO

You will probably have understood it: Progressive Web Apps completes an existing site for mobile users, allowing faster navigation, faster navigation, and enabling the company to better exploit (push notifications, etc.).

This technology is only running out, and there are still many brakes for a real installation on all mobile media (not compatible with some browsers, technical complexity when setting up, a new and evolving technology, etc.).

However, the power of a Progressive Web App in terms of user marketing and experience is real. We must therefore start to focus on this now, but above all we need to apply the same recommendations in natural referencing as for our traditional content, otherwise it will cause different SEO problems on content duplication, indexing, Etc.