The State of Progressive Web Apps in 2020/2021

The State of Progressive Web Apps in 2020/2021

It’s been a long time since Steve Jobs for the first time presented the vision of

The full Safari engine is inside the iPhone. And so, you can create amazing Web 2.0 and Ajax apps that look exactly the same and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need.

During this time, a bunch of things changed in the web world, but the question is, is the Progressive Web App approach ready for production apps?

What is a Progressive Web App?

Before we start our journey through the benefits and drawbacks of using Progressive Web App in 2020/2021, I’d like to explain what I understand by PWA. I don’t want to copy/paste what Wiki says about PWA - you can read it - if you wish. PWA app is a web application that behaves almost exactly like a native app that you can download from the official market (either App Store or Play Store). From the user's perspective, the differences shouldn’t be discernible.

A brief history of Progressive Web Applications

As I mentioned in the opening statement, Steve Jobs was probably one of the first people that presented that idea to a broader audience. The concept was introduced during the iPhone introduction in 2007 (what’s interesting Apple frozen a vision for ten years! - I’ll explain the reason in summary). Mozilla released Firefox OS in 2013. The system could run web apps as native apps on mobile devices via Gaia (an HTML5 layer and user-interface system). In December 2015, Mozilla announced that it would stop sales of Firefox OS smartphones. In 2015, Russell (Google) and Berriman coined the term “Progressive Web Apps”.

So as you can see, there is no one person, and there’s not even one company responsible for the project. As usual, the work of many amazing people and a simple coincidence allowed for the emergence of a new idea that is gaining more and more popularity.

The most important PWA features

  • Offline-first - a lot of us frequently suffer from low internet connectivity. Several places in the world don’t have access to the Internet. PWA allows browsing our favorite apps without glitches.
  • Native UX - small things make a huge difference. An icon on the home screen and push notifications enhance the user's experience.
  • Mobile-first - there is a strict connection between Progressive Web Apps and a mobile-first approach. The growing number of mobile devices means that the application’s mobile version is sometimes much more important than its desktop counterpart.
  • Optimized loading time - Progressive Web Apps are based on service workers that behave like a proxy between the Internet and the user’s tab.
  • Security - HTTPS is a must in PWA applications. Thanks to this, users feel safe.

PWA under the hood

One of the critical features of the PWA is a service worker. The worker is a small script that can handle offline mode to prior visited websites. Additionally, SW is responsible for delivering push messages. Behind the scenes browser runs it separately from the main thread, intercepting network requests, caching, and retrieving resources from the cache. Moreover, you can preview the service worker using, e.g. developer tools in Google Chrome.

Support for the selected feature

Based on the table below, you can notice that many things are already done, but many things need to be added to ensure that PWA is a fully cross-platform solution.

Progressive Web Apps cheat sheet

How can I transform my web app into a progressive one?

As always, it depends on how complicated your app is and what progressive features you are looking for. However, adding a web app manifest file should be the first step in the process. It’s the core technical requirement. This file provides information about your web application in JSON format. PWA manifest can contain details about web app name, description, background color, icon, or display mode (fullscreen/standalone/minimal-ui/browser).

How can I install a PWA app?

Unfortunately, there is no one answer to this question, and the way you can do that strictly depends on your operating system and browser. On the other hand, the whole process is quite simple and very similar between OSs/browsers.
In the case of iOS/Safari, the following steps should be done:

Open an application that supports PWA, for example, Twitter.com, and press the Share button.

Select “Add to Home Screen” from the menu.

Confirm the action by clicking “Add”.

An app icon should be added to the home screen.

Does PWA support desktop users as well?

Yes, it does! The most popular browsers/OSs support PWA features.

PWA vs. Native Application

What should I choose? - It’s one of the most frequently asked questions, and I agree that it’s always a tough decision, but it’s crucial from your product’s perspective. Before you start the implementation phase of your project, you must compare both technologies. Below I presented a few points that should be taken into consideration before you make a decision. Before challenging yourself with this difficult question, let’s highlight the most important factors.

Hardware features

I always recommend preparing a list of mobile features that are required to launch your product. The more hardware you want to use, the more you should go towards to native solution. The previous sentence doesn’t sound like a PWA recommendation. Still, the truth is how many apps use Bluetooth/gyroscope/accelerometer and others? Do you really need them in, as an example, an e-commerce app?

Cross-platform support

A lot of people think that PWA is the only cross-platform solution. You can create a single codebase and use it across different devices. Is it true that it’s impossible to develop a native app that would work on both Android and iOS devices? Of course, it’s not. You can take a look at Flutter or React Native solutions.

Performance

There are two areas where the native app takes over PWA:

  • you need hardware features
  • you want to create a game or complicated UI/UX Design

Updates policy

In the case of a Progressive Web App, most logic is placed on the server-side, so you don’t need to engage additional layers, like marketplace. On the other hand, if you want to update a native app, the whole process is much more complicated and time-consuming because you not only need to update an app in the store, but also you must force users to download a new version.

Tech Stack

PWA uses well-known technologies in the web world. There are no limits. You can use React, Vue, Svelte, Angular, or any other library supported by browsers. Another benefit of using a progressive approach is writing your code in pure JS or any other superset of JavaScript - TypeScript, ReasonML, or Elm. Currently, JS is the only language that allows you to use the same technology on the back-end, web, and mobile (one language to rule them all!). On the contrary native Android app can be created in Java or Kotlin, but iOS supports only Swift.

The total cost of the product

Last but not least. People love cross-platform solutions, and the reason is straightforward. I can pay only once and have support for Android and iOS. It’s not always accurate, and one other important factor should be taken into account. Do you know that the app’s maintenance in many cases is much more expensive than the creation phase? Keep that in mind, when you need to make a decision. Maintaining a single application for multiple platforms can cost you more if you think about your project from a long-term perspective.

Is it possible to add a PWA application to the store?

In the third paragraph, I presented how we can install a Progressive Web Application on our phones. As you probably noticed from a technical perspective, it’s not rocket science - just a few clicks. From a marketing/sales perspective, it was a huge drawback - how many of our customers know about that hidden option in the browser? Fortunately, there is a way to publish the app in the official marketplaces.

Publishing PWA app in the Google Play - Trusted Web Activity

In 2019 Google announced a new concept - Trusted Web Activity. TWA gives developers the possibility to publish web content in the Google Play store. Under the hood, TWA wraps the PWA application into an Android container (activity). TWA displays a full-screen Chrome browser inside of an Android app without browser UI elements, like a well-known URL bar. TWA gives you one more feature - transitions between the web and native content are between activities - so it lets you create an app that uses PWA features only for selected views. The whole process of creating a TWA application is clearly described in the official Google docs.


One more thing needs to be clarified - what does trusted mean in the context of TWA? Google decided to introduce a restriction that you must confirm that you are an owner of the website that you want to pack into TWA, and you can prove this by setting up Digital Asset Links. Fortunately, it’s nothing hard - the only thing you need to do is to upload a file to your server that points to your app and some data in your app that points to your website.

Publishing PWA app in the App Store

In the case of Apple devices, it’s not so straightforward. In general, Apple’s review process is much more strict. But still, there is a way to wrap your PWA app into WebView using Cordova, PWA Builder, or some other similar solution. It’s important to note here that officially there is a rule in the Apple Store Review Guidelines (4.2) that gives them the right to reject your submission.

Your app should include features, content, and UI that elevate it beyond a repackaged website.

On the other hand, there is a lot of stuff in the Apple Store that can be affected by this clause, but they are still there.

Publishing PWA app in the Microsoft Store

In contrast to Apple, Microsoft informs about this new feature in their docs. The company also prepared an official tool to transform your PWA app into a native counterpart - PWA Builder. In the docs, they even listed advantages of such a move:

  • discoverability
  • trustworthiness
  • easy install
  • business insights

PWA application is run in a lightweight native app wrapper, which is independent of the Microsoft Edge browser window.

What’s the state of PWA?

It seems to me there are a bunch of reasons that it never happens. I don’t want to paraphrase everything I’ve written in the “PWA vs. Native App” paragraph, but I need to highlight a couple of points. Native SDKs are optimized not only in performance but also in UX/UI way. Another aspect is that PWA was a buzzword in 2017/2018, but during this time, and it’s almost three years, many things have changed, but several features are still missing. Three years in the IT world is like a decade or two in other aspects of our life.

In my opinion, the progress of work is not satisfying. Mainly because we are talking about the biggest and the most powerful IT companies like Apple, Google, or Microsoft - randomly ordered 🙂. For me, the winner in hiding work on PWA improvements is an Apple company. On one side, they implement missing things. On the other hand, very frequently, the company doesn't even inform developers about new options. It’s easy to guess what is the root cause of this strategy - money.  According to CNBC analysis, Apple’s App Store grossed around $50 billion in 2019. That means that the App Store alone would be no. 64 on the Fortune 500 (ahead of Nike or Coca-Cola). Nevertheless, with all these aspects, I’d like to emphasize that PWA is an excellent choice for many businesses, and frequently it’s the first and the easiest step to the mobile world for your app.

What is PWA infographic
What is PWA infographic

ul. Nadwiślańska 1/10

30-527 Kraków, Poland

[email protected]

+48 795-856-491

See our location on map

Details

VAT-UE: PL6793159393

NIP: 6793159393

REGON: 368770514

KRS: 0000703502

Copyright © 2018-2021 CrustLab Sp. z o.o. All rights reserved.