Development Engineering January 15,  2021

Why PWA?

Sofía Acher   •  Communication Specialist   •  Linkedin
Carlos Vergara   •  Senior Frontend Developer   •  Linkedin

One of the tools we use to grow as a team, to stay updated and learn from each other, as well as to share our knowledge with one another and with the world, is meetups. The last meetup was led by Carlos Vergara, Senior Frontend Developer in our team. It aimed to introduce the general public into PWA: Progressive Web Applications. How much do you know about this? Do you know its advantages? Or how you could apply it towards your business? If there is more you wish to know about this subject, this article is for you.

Before PWA, the world of interactive applications was split into two: web apps, which were used by visiting a URL from one’s web browser, and native apps, such as the ones downloaded from Apple’s App Store or Google Play Store. Each had really clear advantages from each other, making the choice for investing in web or native technology quite logical and somewhat obvious in most cases. This also means that going with one technology would cost you the advantages of the other one. As an example, Native apps used to have a lot of better capabilities, especially when accessing your phone’s features such as the camera, files, GPS, or similar. On the other hand, web apps are easier to access — no need to download the application or any other requirement other than having an internet connection — which usually means a much greater reach to the public. These two different benefits are sometimes needed together and until some time ago, one could only achieve it by having one version of each. Needless to say, doing so incurred in high technology costs and management complications for having both updated and working as expected. This situation gave place to a new technology to fill in the gap: PWA.

PWAs arose around 2015 as a set of technologies that allowed to incorporate features that are part of normal apps. PWA is a type of web application that uses a series of preexistent technologies to imitate different aspects of a native application, typically mobile, and it can be a desktop application as well. Many of these technologies are the same ones that any web page can have and that indeed improve the user’s experience. The main distinctive is that they work without an internet connection -though some features may require it, such as ordering a product or paying for something- and different from traditional web apps, PWA can be opened and partially used without it.

As mentioned initially, PWA brings advantages to native and web apps. This does not necessarily mean that PWA is a silver bullet or that there is no reason to use native or web applications any more, but when looking for a middle point, there are some clear advantages that we will explore next. One of the benefits, compared to native apps, that follows from not needing an internet connection for everything, is that they can be installed with only one click, the user does not have to go to the App Store/Google Play Store or wait until it downloads to do so. As a consequence, this brings another advantage; the owner of the app does not have to pay 30% of its revenue to the provider (App Store or Google Play). When comparing to web apps, using PWA technologies improves in terms of loading times and availability. In addition to this, depending on what toolkits are used during development, one can reuse a lot of code if they chose to build a native smartphone appl from the PWA, and the stack is exactly the same one if taking a hybrid approach. With very little extra work a normal web app can be transformed into a PWA and eventually, with relatively little extra work, transformed into a native app. Other ways of graduating a PWA into a native app are React Native, React, and Ionic framework. The latter is good for mobile projects; instead of being an overarching abstraction consuming the users’ code, a project with Ionic provides facilities at the same level as the custom code. Instead of the code being host of all the framework, ionic provides libraries and the app is 100% possession of the development team. In the case of React Native there is a runtime that hosts custom-made code, which is basically restricted to using a number of “external” capabilities.

Two important parts of PWA are webmanifest and service workers. Web manifest is a list of all the resources that an app has, through a service worker it can communicate to a navigation site that has them without having to fetch them more than once. This means that once the browser fetches those resources, they remain cached in an entirely programmable manner. These are vital since they give the user the chance to install the app. Service workers, among other activities, manage the browser’s network layer, the part in which the navigation fetches something from a server. Interestingly, those files do not need to be actual static files, the server can provide customized versions of them for the specific user downloading them. These files do not require re-fetching in the future unless the user requests such a thing, and the application knows it can rely on them.

The downside of PWA is that they are not apps, which means they cannot have access to the device’s files, APIs from the operating system itself cannot be used, only APIs from the navigation site can be used. Equally, if the navigation does not allow some action, the PWA will not allow it either. In terms of security, as PWA cannot access the user’s device, any hostile actor can damage the user’s device or do anything against their will.

Among other aspects, there are a number of fingerprinting techniques that can only be applied with access to the device. From asking for the users’ literal fingerprints to more subtle measures such as getting a hash of different unique device characteristics to tell individual users apart without directly asking. For instance, client-facing banking platforms are desirable and often really important to uniquely identify a given individual across different channels. If one cannot tell what the device looks like accessing available memory, disk space, OS version, etc. it can be extremely difficult to derive such a fingerprint. In this kind of product, as well as in digital wallets, in which truly sensitive financial information has to be kept close at hand, the browser APIs do not yet offer much in the way of actual operational security, although this is an area in which a lot of development is soon expected. In the meantime, though it is advised that none of this information is actually kept within the browser storage, it is instead made to reside server side where its security can be meaningfully managed. Considering future APIs in the horizon, a very interesting set is the Crypto APIs, which would allow serious encryption of digital assets; this would be a piece of technology that, once adequately battle tested, might make PWAs much more interesting for players in the finance and banking sector, which are notoriously averse to unproven bits of technology.

Beyond the advantages and disadvantages PWA offers, how will its path continue? Many people say that PWA is the best of both worlds between web and native, so it will grow independently. Some companies are really interested in PWA and bet a lot in it since it is convenient for them, especially against certain competitors. An example of this situation is Google vs. Apple: as previously explained, there is no need to go through the App Store to install PWAs, which is beneficial for Apple’s competitors. For iPhone users there is no other way of downloading native apps, every app requires Apple’s permission and entail costs. These companies have bet on PWA to take away control from these walled gardens, that grew in the last decade, and allow the possibility to invade those spaces with apps, etc. made by tiny nimble genuine real craftsmen in which they can put advertising and collect metrics without any inconveniences. Nowadays, Google is the main sponsor promoting PWA and provides technologies that make developing a PWA easier. As they bet on giving the control to small foundries, coders, and everybody who does not want to give 30% of their profits to another company, they bet on PWAs to grow in the future. However, it will not necessarily turn out that way since it depends on intra-companies’ policies, which is difficult to predict in the long term.

Some of the previously mentioned advantages PWA offers apply to eCommerce. Nowadays everybody expects the internet connection to be available 24/7, but when they do not have it, it impacts eCommerce’s revenue directly. The fact that certain interactions between the user and PWA do not require an internet connection and enable the user to advance in the buying process can have a positive impact in eCommerce conversions. As users do not necessarily have to be connected to the internet, they can place an order without it. The order is stored locally and sent once the internet is recovered, these actions can be done in different moments without any problem. The majority of transactional apps have the same coreflows, where except at the specific moment of completing a purchase, there is not much necessity of being constantly connected all throughout the process.

The app is extremely benefited from, for example, not having to repeatedly load each SKU’s assets; in the long term it ends up being some serious bandwidth money, of which only a fraction needed to be spent. Magento is doing certain movements around PWA, which is positive because it is the core for many different eCommerce sites, thus improving the odds these techniques will popularize.

In light of the above, we believe this to be a very interesting set of easy to use technologies that might make the future truly exciting in many areas and will probably make these an ongoing series of updates and explorations. Knowing the differences as well as the advantages and disadvantages that PWA presents in comparison to other sets of technologies enables you to know what suits your business best. As always, the more informed you are and the more you learn about what they offer, the better decisions you will take when needing a software solution. How can your business benefit from PWA?

We help clients grow their businesses by making creativity, flexibility, and talent converge into software development and UI/UX design. We are passionate and committed to take on challenges that can drive your business forward.
We combine our experience in Ecommerce, mobile, and web across various industries such as retail, wholesale, healthcare, government, and entertainment. This way, we work closely with you as a team in order to collaborate towards successful implementations. 

Sofía Acher Communication Specialist   •  Linkedin
Carlos Vergara Senior Frontend Developer   •  Linkedin