Progressive Web Apps, the mix between traditional websites and native apps

The great battle, not only within the media but other sectors such as retail, banking or technology, is on mobile devices. To be able to understand how to adapt the consumer experience of products to the needs of users on smartphones, for now the device that has the greatest degree of intimacy with end customers. One of the latest on the market is Progressive Web Apps, a Google-sponsored alternative that is a mix between the mobile web consumed by the browser and native apps installed on the phone.

In a single sentence, the ultimate goal of the PWA is to get a native app user experience on the web, today it is mainly consumed by the mobile device. For product teams, the final idea is to develop once and deploy on all possible devices, from both a hardware and software standpoint. What is ultimately sought is that it has a number of common elements that closely resemble the great features that a native app usually has and keep some great advantages of traditional websites:

●     Progressive apps are designed to have access to all users: most browsers support these types of web apps.

●     Very fast loading and interaction.

●     Perfectly adapted to all screens: the Google PWA have the capacity to adapt to desktop, mobile, tablet, Smart TV … any device. The principle is developed once, it accesses any device.

●     Consumption without WiFi or 3G/4G data: you don’t need a high quality connection to browse them. Not even connection.

●     Navigation and own interactions of a native app: a progressive app must be designed for the user’s touch. 

●     Quick access on a mobile or tablet from the main view. Shortcut icon on the phone without having to download in an app store. This is possible thanks to the incorporation of metadata, not just downloading this shortcut, but launching splash screens.

●     Visible to search engines.

●     Ability to send push notifications  like any native app.

●     HTTPS secure protocol applications: there is much talk of the future of HTTPS; this avoids content from being manipulated by third parties. 

●     Guaranteed recirculation through the typical hyperlink on the web. 

  Design and User Experience in Progressive Web Apps

The treatment that product teams must give to Progressive Web Apps is very different from developing native apps. Although there are common elements, some factors such as design and user experience incorporates different elements in apps and PWA.

●     Animations: useful elements to increase the user engagement element with a web application, but also pose a risk if misused. They must not cause adverse effects on the app’s performance and should be chosen carefully to surprise or generate specific actions and great value for users. The most common is to use animations to support interactions. Animations in Progressive Web Apps are created with CSS or JavaScript, two of the languages used in traditional websites together with well-known HTML. Animations can be used to move between different screens.   

Responsive layouts: in the end of the wide variety of devices (with screens in different sizes: desktop, mobile, tablet, phablets and smart TV) have led to the need to implement designs that are able to adapt to different screens. That is what is known as responsive design and it is what Progressive Web Apps are gunning for. In the end everything is based on traditional patterns of this type of adaptive design: Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks and Off Canvas. In each, the different columns fall down and are positioned vertically or horizontally as the screen becomes smaller, except in theOff Canvas pattern, that leverages the invisible part to hide and remove columns.  

●     Image, video and audio are three of the data elements that often suffer to a great extent in responsive designs  if you are not careful with images and videos. In the case of images, the use of the img element is the best possible solution, especially if relative sizes are used, even marking specific sizes and densities for each type of display, and also indicating the size of those images based on the cuts that will be implemented in the design as the screen gets smaller.

Relative sizes:

<img src = “faro”-200.jpg tamaños = “50vw”
     srcset = “faro-100.jpg 100w, 200w faro-200.jpg,
             faro-400.jpg 400w, 800w faro-800.jpg,
             faro-1000 .jpg 1000w, 1400w faro-1400.jpg,
             faro-1800.jpg 1800w ” >

Relative sizes of images based on design cuts:

<img src = “” 400.png
     tamaños = “(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw”
     srcset = “100.png 100w, 200w 200.png, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000w 2000.png ” >

SEO, social media and making money in Progressive Web Apps

The positioning conditions vary greatly between a native app and a Progressive Web App. The former compete for a position in app stores. Optimization of all factors that enable better positioning in these app stores are known by ASO (App Store Optimization). Progressive Web Apps play in another league: in the end they compete on the same stage as other traditional websites, with elements which condition SEO optimization or searches.

As in the traditional web, adding a few lines of HTML to develop a PWA will make it possible to control messages and pictures that are disseminated with our content when users share it on social networks. Google also adds the recommendation to use the protocol schema and microdata to enrich the content that is shared on its Google + social network. This is a practical example of code inserted into each content page:

<div itemscope itemtype = “http://schema.org/Article” >
  <h1 itemprop = “nombre” > Enjoy fireworks </ h1>
  <p itemprop = “description” > Fireworks are beautiful.
   This article explains how beautiful fireworks are. </ P>
  <img itemprop = “imagen” src = “//developers.google.com/web/imgs/fireworks.jpg” />
</ div>