Blog / Articles03 May 2018

What is PWA and how can they help the online business?

PWA (Progressive Web Application) is a web resource that combines the properties of a site and a mobile application. While maintaining the convenience of using traditional websites, they also acquire the autonomy of classic applications: with PWA you can work both online and offline.

How does the PWA work and what can it do?

When you get to the PWA site, it shows you the following message: "Would you like to add this site to your home screen?"

The installation of pwa

If you click "Yes", then:

  1. the site icon will be added to the home screen of your mobile device;
  2. it will be installed in the same way as a regular mobile application.

What will it give? First, now you have the ability to open a site in one click from the home screen of your device. It would seem nothing unusual, because you can add any site to the home screen for quick access using the browser. However, this is not all: unlike usual sites, after installing PWA you can interact with it even in offline mode, i.e. with no connection to the Internet. How? Do you remember that we installed it on our device? In addition, when you are online, PWA can synchronize data and update it in the device cache. This is as the news feed in the Facebook application works: when there is no connection, the information is extracted from the cache, and you see the content that was relevant at the last moment of Internet access. As soon as the connection appears, the application will download the most recent information from the server, and you will be able to see new posts and photos; it also updates the data in the cache.

In addition, PWA will work regardless of the browser after installation (it opens not in Chrome, Opera or Safari window, but in its own).

PWA can be uninstalled from the device in the same way as the regular application.

It's important to note: if you don’t want to install PWA on your device as an application, the site will still retain its functionality, but it will work only in the browser.

With all of the above, the PWA resource is still a site: you can get a link to any of its pages, send it with a messenger or share it in a social network; it is also indexed by search engines.

In order for you to understand better how PWA works and what can it do, we have prepared the example with the main functions of the technology. You can see it by the link below (the example doesn't work in the "incognito mode". When you go to the example page, our site will ask you for permission to receive push notifications – please, agree. This is only needed to show you the work of PWA. We will not send you any notifications in future).

Advantages of Progressive Web Apps

  • Ability to work without a browser. This function gives the user access to information in one click, which means increased involvement: the client can quickly visit the resource at any convenient moment.
  • Cross-platform. The standard mobile application works only on platforms for which it was developed (Android, iOS, Windows). At the same time, PWA is able to work on almost all hardware platforms, which reduces development costs: you don’t need to create a separate products for each operating system, it’s enough to develop one universal PWA.
  • Offline mode. Without an Internet connection, a user can view information and even send HTML forms. In this case, the data in the form is temporarily stored on the user’s device, and as soon as the connection appears it will be sent to the server. Imagine, for example, that you started filling out the order form, then went into the metro and the connection was interrupted. On a regular website, if you then click the submit button, your data will disappear; PWA will save all the information and send it as soon as possible without your participation (example of the offline form - in the top of the page).
  • Push notifications. Users will be able to receive convenient notifications about promotions, new articles and other events of your resource. You can receive these messages even without installing PWA (example of push notifications - in the bottom of the page).
  • Improved conversion. This is a consequence of the above points: when working with PWA, the probability of customer’s return to the site and the time he spends on the resource increases, the user experience improves, which helps to improve the conversion if it is a commercial site.
  • Indirect influence on SEO. Progressive mobile applications demonstrate good behavioral factors (users are actively navigating through pages, bounce rate is smaller), which can positively affect the search ranking. PWA only works with a secure protocol (HTTPS), and it has a positive effect on the site's position too.

Disadvantages of PWA technology

  • The first download of the PWA page can be a little slow, which is critical for a very weak Internet connection. This is because during the first visit there is no information about the site in the cache.
  • The total size of PWA is limited to certain requirements, depending on the user's browser: less than 6% of free space on the device for Chrome, 10% for Firefox, 50 MB for mobile Safari or 250 MB for Internet Explorer. Calculating the exact limit is rather difficult, since each user has a different memory load on the device. Therefore, when creating PWA, you have to minimize the size of all resources to reduce the risk of not fitting into the cache.
  • It's more difficult to integrate PWA technology into a ready-made site, since maximum content optimization is required.
  • If you are working with a PWA site through a browser, clearing the browser's cache will result in the permanent loss of data associated with the site. You will be unable to use the resource offline until the connection appears and the data in the cache restores.
  • Many functions of PWA sites cannot work properly in the incognito mode of the browser.

Who can use PWA?

Finally, one of the most important questions – for what format of online business will PWA technology be appropriate?

Online stores

PWA technology can be applied for large online stores, but it will be difficult to work with such a resource offline. It’s because a large store requires a lot of requests to the server when filtering or sorting a large number of goods by different attributes. Also it needs a lot of pictures of goods that may not fit in the local cache storage. Compressing these pictures too much is undesirable. The situation is better with shops that have a small catalog of goods: their range can be displayed on one page and filtered using JavaScript on the side of the browser/application.

Info-resources

For such types of sites as a blog, informational, corporate resource or service site, it will be easier to configure PWA. This is due not only to the fact that such sites usually have fewer images (compared to online stores), but also because they do not need to filter or sort content, and new pages appear relatively infrequently. This application’s work mechanism will be similar to the work of Facebook's feed, described above: the background synchronization mechanism will find and download new content when Internet connection appears.

Landing pages

Finally, implementing PWA for a landing page or business card site is most straightforward. The content of these resources is almost static, so they do not even need to set up background synchronization. The entire site will be cached on the device, and the user will be able to access it at any time.

Thus, in theory, PWA can be used for almost any site, but it will be appropriate not for everyone. The decision on the need to switch to PWA should be taken based on the site’s size, its focus, as well as the goals and objectives of the online business.

The implementation of PWA technology to an existing site

To implement PWA quickly on an existing site, it must meet the following requirements:

  • optimized weight of all pictures and photos on the pages;
  • minimized scripts, CSS-styles and HTML-files. It is very desirable to use scripts only in pure JavaScript, without using third-party libraries;
  • preparation of icons of different sizes for the home screen of various platforms (Android, iOS, Windows), which will run the application;
  • the most optimized size of the entire site (due to the limitations of memory on the device described above).

If your site does not meet these criteria, it does not mean that it cannot be moved to PWA technology – the implementation will just require more time and resources.

It should be noted that for sites on some popular engines (for example, on Wordpress) there are plug-ins for transferring an existing resource to PWA. However, it is important to clarify that even using plugins requires testing by specialists: the larger and more complex is the site, the more errors and problems can arise during its automated transfer. The same is about the EscalatingWeb resource, which offers a fully automatic "transformation" of the site into PWA. Judging by the feedback of users, it does not suit everyone and works correctly only with small sites with a little amount of dynamic content.

 

"Mobile apps, for 95% of companies and organizations who want to do well on the web, are the wrong decision. Not only that, most everyone now realizes and agrees on it. PWAs (and straightforward mobile websites) are there to pick up the slack." – Rand Fishkin.

 

Progressive Web App technology is one of the modern trends that can determine the future of the Internet and online businesses. For example, the founder of Moz Rand Fishkin noted it in his forecast for 2018. The most important features for modern web resources are user experience (UX) and cross-platform, and progressive web applications are excellent at managing these tasks. Not everything is perfect for today, because the technology is quite new, but it is constantly developing and expanding the functionality, opening up new opportunities for users.

And finally, if you need a PWA development or you would like to receive more detailed advice on this subject - please contact us! ARTO web agency will be glad to help you!

Denis Ulyanchenko
Front-end developer
COMMENTS
LEAVE A COMMENT
LOGIN
  • Facebook
  • Twitter
THIS SITE USES COOKIES
We use cookies to analyze traffic, provide social networks features, and for functions of the commenting system on the site. The list of cookies to be set is located on this page. Do you agree to accept cookies?