What is PWA

What is PWA

thumbnail
Want to talk about your project?

Over the past couple of years, term PWA has become increasingly popular in the web development community. According to Google Trends, only during the last two years the amount of searches for PWA has doubled worldwide. This might make you wonder what stands behind this huge rise of interest among developers. Progressive Web Applications – because that’s what this abbreviation stands for – is a way of making the internet more accessible and reliable with the assistance of new technologies. In this article, you will learn what PWAs are all about, how to create them, what tools you can use to effortlessly convert Magento stores into PWA, and what are their advantages over other websites.

To learn what PWAs are, or how we can integrate it into Magento websites, we must understand what has driven developers to create this concept in the first place. The main idea behind it is – anyone can access content on the web, regardless of device or internet connection – and at heart, it is placing user above all else when it comes to creating websites. Sounds simple enough, but as we can see from our own experience in web development, and by browsing the web in general, there are multiple challenges that stand in the way of achieving that goal. Throughout the years, as websites and apps became more and more complex, it also became increasingly more difficult to use them on all the different devices and browsers without an excess of additional codebase. Creating PWA is one way of addressing this issue.

To help us understand which properties should distinguish PWAs from other websites, developers at Google have outlined three main features that every Progressive Web App should possess and these are as follows:

  • reliable
  • fast
  • engaging

True PWA does not limit itself to one or two of those properties, but consists of all of them, resulting in a smooth and enjoyable experience for its users. Let’s take a deeper look at what those slogans mean in practice.

 

Reliable

In the past decade, we made huge progress when it comes to our mobile devices and the extent to which we can use them. Nowadays it is very common for people to use their smartphones as their main tool for browsing the web. Unfortunately, the internet connection on mobile phones is not as reliable as we would want it to be, however, there are some tools we can use to our advantage to make our PWA independent from it.

The main tool in PWAs arsenal to deal with the network state are service workers, which enable them to load instantly. A service worker is a script run in the background of your browser, allowing for cache management and implementation of such features as push notifications or background sync. Due to its possibilities, it also has its requirements, using secure HTTPS protocol being the main one. Pre-caching key files with service worker will lead to smooth browsing experience and most importantly, independent from the network status. For specific instructions on how to register and use a service worker, you can visit this website.

 

Fast

Creating fast websites should be a goal for every developer, regardless of whether they are building PWA or not. It is very important for your app to load quickly and feel fluid and smooth, not only for users comfort but also for search engine optimisation. There are plenty of good practices and guidelines which can help you make sure that your app is fast, some of them being compressing your files, limiting the number of requests to the server or choosing a good hosting provider in the first place. The list is much longer and would require a separate article, but what you need to know is that quick loading and fast responses from interfaces of your app are some of the key properties of PWA.

 

Engaging

Now where you really can make your PWA shine is making it feel like a real app. For a very long time websites could only be opened via browser, but registering your website as an app in an app manifest file will allow users to attach your PWA to their desktops. It will let them launch your website like any other app, without having to download it through an app store or opening a browser. They will be able to view it on full screen and receive helpfull messages thanks to push notifications, making your website almost indistinguishable from other native applications.

To achieve that you will need to create a web app manifest file, in which you can declare custom theme colour and icons to be displayed on different devices to represent your PWA. Doing that is quite easy, all you have to do is create a manifrest.json file which will hold all the required data:

{
  "lang": "en",
  "short_name": "Panda Group",
  "name": "Panda Group",
  "icons": [
    {
      "src": "/wp-content/themes/pandagroup/src/images/PGsignetSmall.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/wp-content/themes/pandagroup/src/images/PGsignet.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#86d640",
  "display": "standalone",
  "theme_color": "#86d640"
}

And then link it in the header of your app:

<link rel="manifest" href="/manifest.json">

Is that all?

Keep in mind that except for its exclusive features, PWA should also be built with all the other modern web development rules in mind. Most importantly it should be responsive – meaning it has to work properly on different screen sizes and on different browsers. You cannot build any app which is not well suited for different mobile devices after all. Mobile-first is also a good approach when building PWA. Focusing on mobile behaviour will ensure that users visiting your app on their smartphones will get most out of it. There is also another convention, which is key for developing PWA…

 

Offline first

It’s an approach to building websites, assuming that their core functions and content should always be available to the user, regardless whether they have stable internet connection or not. You probably know this feeling when the app you are currently using all of the sudden becomes unusable because of unreliable network connection, perhaps on a plane or in a subway. Offline first is here to avoid exactly that issue. Thanks to service workers caching, or using local storage to hold data we can easily prevent some of those situations and provide more reliable services. This way your application becomes truly independent service.

 

PWA in e-commerce

E-commerce websites, such as online shops developed on Magento are real-life examples of how well received the PWAs have been by developers community. Quoting from Magento official website “The Future is Progressive Web Apps”, and as most of the web traffic is rapidly shifting to mobile, so do the sales. With that, great user experience has started playing an even bigger role in transforming traffic into sales and profits.

In principle, integrating PWA features with Magento is no different than implementing them into any other website, but developers working with Magento platform have been presented with a great project created solely for development, deployment and maintenance of PWAs, called Magento PWA Studio, which can be used to enhance this process. It consists of several tools making it much easier to implement Progressive Web Applications features into Magento stores:

Pwa-buildpack CLI tools

PWA Buildpack is a CLI tool and a library used for building and  deploying Magento Progressive Web Apps. If you want to build PWA you can use it to set up and configure your local project.

Peregrine hooks and components

This package consists of functions that serve the role of a brains of your visual components. They provide you with custom React hooks and usefull components which can be used to develop distinct Magento PWA.

Venia store and visual components

If you are looking for proof of concept Magento 2 store built with PWA Studio tools, this is a package for you. It containes examples of Product Details and Category pages and other visual components for your own projects.

UPWARD

UPWARD stands for Unified Progressive Web App Response Definition, and is used for describing how a web server should deliver and support PWA.

To learn more about those and other tools, you can also visit official Magento website.

 

Conclusion

At this point, you might ask is it really worth all the trouble. The answer is simply yes. Providing the user with vastly enhanced experience will make your app more enjoyable and reliable, also it can help you convert traffic into more sales on your e-commerce website. Many of the PWA features are easy to implement to already existing websites giving them additional usability, and there are also tools made specifically to help you integrate PWA features into Magento store. Progressive web apps are dedicated to both mobile and desktop users, but it is especially advantageous on mobile where most users prefer native apps than browsing the web, with properly designed PWA you might change their minds. Let’s take a step in the right direction and create a better future for internet with Progressive Web Applications.

 

...