29.03.18

PWA Progressive Web App – The Future?

5/5 - (1 vote)

The progressive web application, better known by the acronym PWA, is the technology that we have heard about for some time but lately has been talked much about. Is it a new buzz or future of the Web and especially mobile commerce (mCommerce)?

What is PWA?

Progressive Web Apps (PWA) are hybrid applications between web pages and the so-called native applications (tablets and smartphones). The PWA is trying to combine the latest features of web browsers with the best experience for the mobile users.

PWA remains as the website that can become a mobile application and /or tablet depends on the user’s purpose. When the user visits the site, an invitation to install that site will be sent to his or her phone. If the user accepts it, he or she can use it as a mobile app, otherwise he or she still needs to browse the site via his or her web browser.

Mozilla Firefox defined PWA as: https://developer.mozilla.org/en/Apps/Progressive. To be more specific:

  • Discoverable: Identifiable as an application, found by search engines.
  • Installable: Available on the device, on the home screen-without the hassle of application platforms (app-store).
  • Shareable: Easily shareable by URL, without requiring complex installation.
  • Independent network: Can work both offline and on poor network
  • Progressive: Work for every user, regardless of their browser choice.
  • Re-engagageable: Make it easy for user to get involved even when they are not using their device.
  • Adaptive: Suitable for all formats: desk, phone, tablet, and so on.
  • Safe: Delivery mechanism that avoid spying and ensure that the content has not been tampered with.

Work online? How it works?

This is one of the main reasons why customers request a native mobile application: have a use and database regardless of the network (Wi-fi, 4G, etc). PWA contains worker services, scripts that run in the background and allow you to caches the content, updates, push notifications and run PWA without internet connection.

In most cases, PWAs will be single pages, and when it first loaded , the Shell will be cached.

What is Shell application?

The Shell Application is the static part of your page with its minimum HTML/CSS and JS if required to display the UI of the website. It contains only UI elements and should not contain dynamic data.

How to install a PWA?

No need! The ‘add to home screen’ feature allows the visitors to directly add a shortcut (icon) on their smartphone.  Once opened, there will be a loading animation and no interface of the web browser ( a rendering just like a native mobile application). To have the function ‘add to home screen’, you will need manifest app

What is manifest app?

Web app manifest is a JSON file that allows you to control the appearance of your application for the user on his or her mobile (for example on the home screen). It includes name of the applications, different size of icons, the opening welcome screen (splash screen), etc

PWA does not work on Apple, so what? Service worker and app manifest have not work on Safari yet, but they are still under development. Therefore, it is possible that PWA will soon be available on all browsers, and OS (Android and iOS). Waiting for successes prove that PWAs are effective, even on iPhone.

PWA and Magento?

The Magento team is currently working on their PWA Studio (Magento PWA Studio) which should be available from version 2.3 or later in 2018. All based on React and Redux.

And for you and Sutunam?

We took the bet of the PWAs as we did for responsive websites few years ago and we are ready to accompany you in this new evolution. We have been studying PWAs for a while, and we can now assist you  if you want to get ahead of your competitor. Therefore, do not hesitate to contact us.

About Kieu Anh Ngo

Production Coordinator in Sutunam