Written by Progressive Web Apps and Accelerated Mobile Pages
The development of mobile applications currently does not mean a binary decision between Native App and Web App: today we have to consider many other alternatives such as Hybrid App, Responsive Web Design, Accelerated Mobile Pages and Progressive Web Apps among others.
Initially the responsive Web design came with the idea of making the content of a website accessible from any type of device. But the final solutions that are developed do not fulfill the perfect adaptation of a site to each type of device. In many cases the problem lies in the adaptation of an existing site to mobile devices without following a mobile-first methodology.
Progressive Web Apps is a new way to create websites for which you want a user experience that combines the best of the Web and the best of the apps, including responsive design techniques, but not limited to them and incorporating additionally all those elements of the native apps that can be used from Web platforms.
Google created the term Progressive Web Apps (PWA) at the end of 2015 to give name to Web applications that are indistinguishable from mobile applications (apps), and thus, promote their development, while establishing the characteristics that a Web must fulfill to be considered within this category.
Some of the fundamental characteristics of the PWA that identifies them include the fact that they can be installed in a certain way on the user’s device allowing users to keep the most useful apps on their home screen without the hassle of having to search for them or install them from an app store since they can perform this operation directly from their standard web browser.
On the other hand, the massive use of the Web from mobile devices makes it fundamental to adapt the same to that type of devices. Not only in terms of user interface design, but also in addition to the fact that the average behavior of users accessing a website from their mobile device waits less than three seconds before canceling the loading of the website page (either partial or complete). This means that the techniques of responsive or even progressive web design are not enough to provide an excellent user experience but it is necessary to improve it with techniques such as the use of Accelerated Mobile Pages (AMP).
In a world where the mobile-first concept is becoming increasingly important, loading speed is essential to avoid losing the user and the mobile presents a greater challenge than the desktop, both for the stability of the connection speed and for the type of use that presents. The user requires fast delivery to avoid frustration and it is more difficult for users to have consideration for the fact that the network conditions affect the loading speed. However, maintaining a good design and some very common elements such as analytics, maps, monetization or integration with social networks can make it difficult to maintain a page with the desired performance.
The AMP project (Accelerated Mobile Pages) is an open project, without lock-in on a specific platform, which was born with the aim of helping developers to create agile and high-performance web solutions. To achieve this, it partially restricts web technologies to a subset of their technologies and with specific tools to cover an important part of the publishers’ needs to expose their information to their users.
Specifically, AMP defines three main components:
- AMP HTML: HTML with restrictions but extended with specific AMP properties and tags in order to optimize the loading and rendering of AMP pages. A web application may choose to serve part or all of its content as AMP and have or not “non-AMP” versions for desktop or to enable functionality that can not be achieved with AMP technology.
- AMP JS: JavaScript library that implements good AMP practices, managing the resource load and processing the AMP HTML tags. In addition, it makes optimizations in the HTML and CSS to optimize the rendering and force that all external content is loaded asynchronously to prioritize that the user sees the content as quickly as possible. The base library is responsible for these tasks and you can load specific modules for AMP components such as forms, image carousel, integration with social networks and other more dynamic contents including the integration of external supported players. The Javascript code itself is the biggest restriction that AMP imposes since in its beginnings it was detected as the main cause of performance problems. Only what they identify as “expressions” before user events are allowed (for example, by clicking on a button) and the set of valid operations is restricted.
- AMP Cache: It is possible to further optimize access to content using services such as Google AMP Cache, a specific CDN for AMP content and providing you with a complete delivery layer to implement a four-layer architecture. This CDN, in addition to serving the content with the latest web protocols such as SPDY and HTTP / 2, validates that the content is really AMP fulfilling the expectations and makes transformations in the HTML as the sanitization of tags to avoid XSS attacks or the insertion of tags for pre-fetching.
