Progressive Web App (PWA): the new deal for Applications

Since their creation, browsers were used to display web "pages" generated on the server side. The pages were completely refreshed at each navigation point made by the Internet users. Still today, a huge majority of web sites work this way.

It should be noted that, conversely, many Flash Applications were designed to ensure a rich and fluid navigation in a custom and controlled graphic environment. 

Today, we are witnessing a new movement that consists in giving more capacity to the browser, via javascript and Ajax. In fact, for a few years now, we have seen rich web applications being created, primarily by the major web players (Google, Facebook, Twitter, AirBNB etc.). This new generation of web applications, without plug-ins, offers Internet users a very comfortable browsing experience and a very qualitative user experience, just like Flash applications before 2010.

The arrival of PWAs reinforces this movement and will allow Web Applications to benefit from extended functionalities that will increasingly distance Web Applications from the world of websites.

 

Responsive

To meet the new requirements related to the multiplication of screen formats (smartphone, tablet, computer, TV), new techniques and new designs are emerging to allow content to be displayed in the best conditions whatever the size and format of the screen. Thus, "page" structures are being reorganized in order to display content in the most suitable way possible.

These new constraints, strong, also have a disadvantage. Faced with all these characteristics to be taken into account, we note an impoverishment of the web landscape. More and more ready-made recipes are spreading.

Still, PWAs benefit from all the dynamic capabilities that browsers now have to reposition all the visual components according to the space available on the screen.

 

Adaptation to the quality of the network

Web browsers were initially designed to display content from web servers via an Internet connection. In the absence of a connection, browsers display error messages, or more cleverly with Chrome, a rough game with the tyrannosaurus. PWAs will be able to respond to this lack of connectivity by being able to start, once installed, without an internet connection. Thus accessing a website via its url without connection is now possible. The digital territory associated with the domain name is still reachable.

 

Notifications

A PWA, once installed in the browser can offer its users features, even if it is not active. If the user wishes, he can subscribe to the notifications that the Application offers. Thus, if the Application broadcasts news and the back-office is ready for it, the publication of new news can trigger notifications to the user without the Application being open and thus attract traffic. It goes without saying that this rather intrusive feature must be used with discretion.

 

Performance

Once installed, the browser has all the necessary files to start the Application. Once installed the PWA starts faster and tries to connect to the internet only to retrieve the content (text, images, videos, music etc.), if it has not already been cached.

As we have just seen, a PWA is very similar to a native application that can be found in the Apple, Android or Microsoft AppStore. This is a key point in how advertisers will decide in the near future how to invest in promoting their services and their digital assets.

The significant advantage of the PWA is that it can be referenced via search engines like any other website, unlike AppStores, where Applications are often difficult to find and referenced in a closed system.

So the same Application from a marketing point of view, can be found 3 times in 3 different ways depending on the store in which it is distributed. And from a technical point of view, these same Applications can sometimes have 3 different source codes, 3 sources of potential bugs. In this case, rather than talking about one Application, we could almost consider that they are 3 distinct Applications.

Nothing like that with a PWA, only one source code to maintain, a PWA can address all types of devices. It can also be found as naturally as a Google search. Moreover, being referenced by search engines, all the contents available within the Application are candidates for natural referencing and sharing on social networks, while an Application from AppStores is a black box, invisible from outside.

 

Automated update

Like any installable Application, a PWA must be able to detect and propose available updates. There are update mechanisms that allow the PWA to detect that a new version is available and to install it. Once the update has been successfully completed, the Application will decide to display a message inviting the user to refresh his browser. It is also possible to manually check if updates are available or not.

 

Limited size

A PWA is made of compiled, minified javascript, HTML and CSS files. The weight of all these files is much lower than the weight of an Application compiled to be distributed on IOS or Android, which represents a significant disk space saving for smartphones or tablets.

 

Graphical kit similar to an Application

A PWA is materialized, for the browser, by a manifest file that will gather the essential information of the Application, to be understood from the outside. This manifest includes the name of the Application, its short name (which will be displayed under the icon), the Application icon, the visual to be displayed when the Application starts, etc. We find the same types of elements to provide as when we submit an Application to Apple or Android AppStores.

 

More and more integration in OS

Microsoft recently announced support for PWAs in Edge, the default browser in the latest versions of Windows. They also announced that they want to give more space to PWAs, by allowing them to be distributed via the Windows App Store, which would be a very interesting distribution vector, especially for the deployment of business applications within a large company network.

 

No administrator rights required

The installation of PWA does not require administrator rights and therefore allows for easier deployment of applications within large groups. The advanced integration with Windows, which Microsoft seems to want to put in place, could accelerate the deployment of this type of applications in the near future.

The web should be less and less limited to the diffusion of websites

With the arrival of PWAs and the extended capabilities of browsers, we will undoubtedly witness a great evolution of web uses. If until now there was a fairly tight boundary between a website and an Application, the uses of the PWA will allow the design and development of Applications that will be available at any time, regardless of the connection.

A PWA will be able to express itself as a classic website or as an installed Application and thus meet a very wide range of needs, as much in external communication, in commercial services, as in corporate Applications.

 

CMS are starting to prepare for these evolutions

A PWA, like a website, rarely depends on static content. The vast majority of websites are based on CMS such as Wordpress or Drupal that allow users to create content. Until recently, these CMS were based on the fact that what is displayed on the screen, the theme layer, is intimately linked to the back-office, to the way data is structured and stored. This strong coupling becomes a disadvantage when you want to develop a standalone Application that only needs one thing: retrieve and display data according to a given url.

WordPress and Drupal are starting to take this principle into account by declining their solution in API first mode, in order to allow a total decoupling between the back-office and the front-office. This not only gives a total freedom of design to an Application, but also allows to imagine a whole collection of Applications, with different uses, retrieving their data from the same source, thus allowing to federate and synchronize the information.

The arrival of PWAs will be gradual and we will have to educate users to make this new feature explicit.
For this we think it is useful to propose a kind of summary of the characteristics of the PWA, like the Applications available in an AppStore, with the following information

• name of the Application
• version number
• date of the last update
• disk space occupied by the PWA
• a function to check for available updates
• a function to uninstall the PWA
• a function that allows you to subscribe to the PWA's notifications
• a function that allows you to cancel the subscription to the notifications if necessary

Since 1998, ICI LA LUNE has been imagining, designing and producing highly interactive web applications combining images, music, video and real-time 3D. Demanding on the creativity and emotions that interactivity can convey, the Agency is also very sensitive to the way in which all the display elements can be updated by the final client and translated into multiple languages.

Thus, in 2001, the Agency conceived and realized its full Flash CMS which will be used to produce a great variety of Applications: websites, interactive kiosks, CD-ROMs etc. This CMS allowed to model the contents and to export them for an on-line or off-line operation.

In 2007, ICI LA LUNE chose Drupal for the back-office of its projects. Committed to offering rich user experiences, the agency continues to rely on Flash, the only technology able to offer immersive navigation in a controlled graphic context.

Since 2007, the Agency has been using Drupal in what is now called "headless" mode, i.e. without the theming layer, in API only mode. From 2007 to 2014, we were making Flash/Flex Applications, from 2014, we identified Angular as the technological successor of Flash.

For all these reasons, we follow very closely the future developments of PWAs and we position ourselves as precursor actors of these new uses. The agency's website is a PWA since December 2017, improvements are made regularly in order to integrate these new features as well as possible.