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.
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 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.