The software world offers a ton of different possibilities. You can build websites, complex web apps, mobile apps, desktop applications and even smart-TV and microwave apps. On top of that, a rather new concept of Progressive Web Apps has emerged. It can be tricky to tell the differences and strengths of each of the options, so for today’s post, we decided to interview our CEO - Hugo. Thanks to his work with the GraphCMS core team, he has a deep understanding of the online ecosystem.
Hugo, let’s talk about PWAs. How would you describe them to someone with no technical background?
Basically, a Progressive Web Application is a website that’s transformed into a downloadable app that is almost indistinguishable from the native application. Under the hood, it’s just a regular website, but a particular set of features makes it special.
What are these features? What’s better in comparison to just a standard website?
It would probably be best to explain it with an example of the e-commerce Progressive Web Application built by AliExpress.
You can use AliExpress PWA offline - you can fill up your shopping cart and basically do the regular shopping. That session is saved and once you come online, all the data is sent to the server and it becomes available online. That creates this seamless experience, where you don’t even need an internet connection… I mean, you do have to connect to the internet at some point. But still, no connection interruptions or poor overall network can interfere with your experience, giving the website the feeling of a native application. That’s why it’s called a Progressive Web App.
What’s also interesting is that after they implemented PWA their conversion rates skyrocketed by something like 100% with session time and page count increasing by a similarly crazy amount (read more about it).
I didn’t know you could do that with AliExpress, I will try it out one day. Which leads me to my next question - how do you determine that the website is a PWA? I mean - how do I know that I can actually download it?
Right now, all the platforms can detect that your web app is using PWA features. That is - certain things have to be implemented according to the PWA guidelines. Once your website fulfills the criteria, the evergreen browsers like Chrome or Firefox will show you the prompt that asks if you would like to install your web app as a Progressive Web App on your platform home screen/desktop. Once you agree, you can open it directly from your app list.
The prompt/popup is not something that you have to implement - if you meet all the PWA criteria, the browser will automatically ask users whether they want to download that application.
If you are not looking close enough, you can’t distinguish that from a regular application on your smartphone. And in some cases, you might not be able to make the distinction at all.
So, once I download, it looks like any other app - with the icon and everything?
Yeah, the part of the PWA spec is defining how the app is going to look and providing icons for different screen sizes in a web app manifest. So, if you add it to your iPhone, it just seems like another app on your home screen.
There are multiple things that you can define in the spec - for instance, how much of a web interface will be available to users. If you choose a minimal version, it will display the website with no web interface. So, when you open it, it basically looks indistinguishable from the native application.
Right, does it only work on smartphones, or does it work on various devices?
It does work on iOS and Android devices. You can also install it on Windows, Linux… more or less all the systems. However, there’s a wide variety of features that define PWAs and not all of them have full support across all systems. Certain features are not available on all devices.
iOS PWAs, for example, don’t support notifications. But it is getting more widely adopted. In the beginning, you couldn’t even have an offline mode or add PWA to your home screen on an iPhone, but that’s now supported, as Apple supports service workers on iOS.
Currently, every platform allows you to add the website/application to the home screen or desktop and you can always use it in offline mode. All the other features depend on what system you are using.
Since we can use it with various platforms, does it have any minimum system requirements? Or can I open it basically on anything?
Well, the system requirements are very simple: if your system can handle opening this website in the browser, it will handle it as a PWA too. In the end, it’s just the browser engine displaying a website with a different interface and some features on top of it.
If you can open it on most devices and you don’t need that much computing power, why aren’t PWAs more popular? I mean, isn’t it better to just create a PWA instead of a native app?
Umm, not really. One major drawback of using PWAs is that you don’t have access to the native APIs. So if you want to interact with some underlying system features or hardware, you can’t do that, because it’s limited by what the browser allows you to do. And browsers restrict all sorts of interactions with the system, for very good reasons (security). So if you can’t do something in a browser, you can’t do it in a PWA.
Developing a native app allows you to also do much more in terms of animations and user interactions. You wouldn’t typically design a mobile website to reflect the mobile application, because mobile websites are primarily focused on delivering the content as quickly and cheaply as possible. So they tend to be light and their interface tends not to have many things that consume your mobile data. Native apps don’t have that problem, because all the download cost is upfront so you can do many more expensive things there.
You said that with PWAs, we don’t have access to the native system features - could you explain that?
Every operating system restricts browsers, once again - for security reasons, from using certain features. So, for example, on iOS, you couldn’t use Face ID, something that you could easily have with a native app. iOS restricts notifications as well.
Also, you wouldn’t be able to directly access files on your device, because again, that’s something that’s reserved for native applications. And that would also be true for Windows and Android. Uh, I guess most things that require some sort of native API usage could classify as a no-go for PWA.
To give you another example - you can use your smartphone camera in the Safari browser, but you cannot have any overlays on the camera itself, so you wouldn’t be able to create Snapchat as a PWA.
What about geolocation? I guess it would run just fine, like in a browser? Could we have an Uber PWA?
An Uber PWA… hmm, I guess you could. The only downside being that you wouldn’t be able to receive notifications on iOS and I’m not sure how it would work in the background - I’m not sure if the background sync is fully supported by iOS. I’d say you could definitely get very close to having Uber as a PWA on Android, as you could send notifications and track location, even when your app is closed.
Apart from the native API restrictions - are there any other cons of using PWAs? Is there any scenario when it’s better not to have a PWA available for your website?
I honestly don’t ever say this about technologies, but I think adding PWA capabilities to your existing app/site is always a good idea. At best they expand the feature set of your app by a substantial margin and at worst they simply make your existing app better.
One of the problems that I can think of is that not many people actually know what PWAs are and that you can install them. For example, on iOS you don’t have any prompts that tell you that you can do it. So you need to do it manually - which is not very intuitive as it’s on the very bottom of the share menu.
It’s better on Google and Microsoft platforms because they are more interested in promoting this kind of app usage. So I would definitely say that it’s going to grow in popularity on these platforms.
In terms of iOS, I can see Apple creating more leeway in terms of PWA features availability, but I wouldn’t ever count on them promoting using PWAs over native apps. They make a lot of money from the App Store.
Right, so what you are saying is that it would kill their app store model because they can’t control it? Or what exactly is Apple’s problem with PWAs?
I wouldn’t say it would kill it, but they want as many people as they can to develop actual apps for iPhones, instead of doing everything in the browser. And obviously one of the reasons is that they have more control over it. For example, if a native app is doing something nefarious in your iPhone, Apple can simply ban it from the App Store, but they can’t really ban it from the internet (or a PWA).
Moving on to the use cases - are there any industries that can get away with using just a PWA and skipping native app development altogether?
I would say that you can get away with just a PWA plenty of times. What comes to my mind first is e-commerce. I think the best example is, once again, AliExpress - If you are on an airplane and have no service, you can still shop on AliExpress, which is pretty amazing. So I’d say e-commerce is certainly one of the biggest potential beneficiaries from PWAs.
Another good example could be Twitter. So Twitter has a PWA, which is an excellent alternative if you don’t want to install many apps on your device. Or maybe you don’t need all the background refreshing and you want a bit more battery and data saving. If so, you can just add Twitter to your home screen and have an app that is not a dedicated app. And the same goes for Facebook and Spotify.
Personally, I don’t ever use Twitter’s native app; I just have Twitter PWA added to my home screen, and I never think about the fact that it’s a PWA, not a native app. It has a slightly different UI, but it’s basically the same thing. Another cool thing about it is, again, the statistics that come to mind - If I remember correctly, Twitter saw a pretty significant decrease in bounce rate and they reduced the size of PWA vs native app by over 90%.
But yeah, if you need any platform-specific features, I would say that PWA is not going to be a fit for you. Still, adding PWA capabilities to your website is so easy nowadays that it doesn’t really hurt to do it.
So what exactly does it take to make a web app a PWA?
So the PWA checklist consists of three things. Your web app has to be serving all of its content via HTTPS, have a registered service worker and a manifest file that defines how your PWA is called, what type of icons does it use, what kind of UI do you want to have - that’s what I meant with the minimal UI example earlier.
You mentioned that service worker thing several times, could you elaborate a bit?
Browsers allow you to add service workers and once they detect them they add a script and then you can do all sorts of things with it. It’s a very standardized thing that exists within your browser.
Now that we have a brief idea about service workers - could you tell us how long does it take to actually implement a PWA? You mentioned that it’s fairly straightforward with the manifest file, but as I understand it, that’s the most basic version. What if we want more sophisticated features like offline mode and other AliExpress-like stuff?
It mainly depends on how many features of a PWA you want. Like you said, if you only want to allow users to add your website to their home screen, without displaying the browser UI and a nice icon on their home screen or a splash screen when you open the app, then it’s a really fast integration.
On the other hand, if you want to make your website work offline, that’d require more investment. If you’d simply want your website to work offline for users, that’s pretty simple. However, if you’d like to implement things like AliExpress, such as saving all your offline activity and syncing it online once the internet is available, that’s a lot more work. The same thing goes for notifications, which also require more work, especially that you’d still need some backend infrastructure that would handle the notifications.
What about the speed? What determines how fast a PWA is and how smoothly it works?
Everything that determines how fast your website is. One huge benefit is that implementing a service worker will allow us to save all resources on the user device and make it available offline, which alleviates the need to download the website again. I guess you could look at it as a performance benefit since you only have to download everything once. It’s also much faster in terms of subsequent visits because it doesn’t have to download anything.
So does it matter what tech we are going to use? Is, for example, React or Angular better for PWA implementation?
No, it’s entirely technology agnostic. It can be built in any technology that allows you to create an app or site that runs in a browser.
And is there any connection between PWAs and SEO? Does it affect your SEO rankings?
The fact that your website is a PWA doesn’t necessarily mean that it’s performant or SEO optimized. We can’t tell with 100% certainty whether Google takes PWA usage into account in their rankings; it’s hard to tell until Google openly addresses the topic.
Okay, and how would we check whether our website meets all PWA requirements?
The easiest way to check that is to use the Google Chrome audit. You can audit your app for the PWA compliance and Chrome will check all the criteria and highlight anything that you need to change or improve.
Thanks for clarifying. So far, during our conversation, I still haven’t decided whether I actually want a PWA. Do I actually need it? How would you convince me?
If you have an interest in your users’ access to any of the features that PWA opens you up to, it’s something that can be added at a very low cost to your already existing website. And it might just be all that you need to cut out the entire cost of building a native app.
Many companies don’t really need a native app, especially if you already have a website/web application that you would want to transform into the native app with the same set of features.
You should check what PWAs allow you to do in terms of features and if those features match the goals of your native application, I’d say save yourself a lot of money and time and go with a PWA.
If you don’t have any interest in creating a standalone app, it still makes a lot of sense for your users and SEO performance to add in the PWA features. I mean, look at the statistics. I read that both Nikkei and Hulu saw dramatic increases in organic traffic and daily users and there are lots of examples like that.
As a closing thought, could you share your views on how the online ecosystem is evolving and where do you see it going?
It’s evolving to a point where everything is much more accessible. It’s clear that the effort, especially the one spearheaded by Google, is to make a variety of things possible via browser while also making things faster and lighter.
I would say that probably in a couple of years, we will see much more in-browser stuff since everyone has browser access and the internet is becoming globally available. I think the majority of the things we do today with strictly native things and hardware will be offloaded to the cloud and the browser. Google Stadia and similar platforms would probably be a good example of something that is representing this new era.
Yeah, the Google cloud platform for gaming, which allows you to play games on almost any device - all you need to run the newest games is an internet connection and a browser. It’s quite a story with how disastrous the launch was and how many problems it still has, but I think this type of technology is something that we will see more of in the future.