27 November 2023

When websites become apps

Let's dive into how ordinary websites can be turned into smart apps using Progressive Web Apps.

AUTHOR

Kim Schultz

Principal


A PWA is quite simply an app built on web technology that works like a website. This means that any website can be set up to act as a PWA. PWA stands for Progressive Web App. It may still sound a bit mysterious, but if you break it down, it provides quite a good insight into the concept and what PWA really is.

Progressive
"Progressive" describes the capabilities of the application. It must be possible to use a PWA with a minimum of rights on the user's device (access to camera, Bluetooth, etc.) After the user grants more rights to the application, more features needs to be unlocked.

But this is also where the limitations of PWA come in. This is because it is still a new technology and not all devices and browsers fully support it yet. Therefore, PWA must be able to function as well as possible without the rights. So, it's important that it works progressively, unlocking features (camera, SMS, etc.) as they become available.

Web
The web part might be a bit self-explanatory, but that just means it's built on web and browser technology. This means that PWA skips many steps on the road to an app and you don't have to worry about developing in a new programming language because it's built with the same code that is used to build websites. It makes it easy for anyone who already has web development experience to get started with PWAs.

App or application
This is what separates a PWA from a website. It will function as a standalone app that lives outside the browser. So think of it as an app like any other you have on your phone, except it doesn't have to come from the App Store or Play Store.


The story behind PWA

PWA is a terminology coined and introduced by Google in 2015, but the idea of putting web development at the centre of app development is not new. It was already presented in 2007 during the launch of a little idea called iPhone. Here's a quote from back then by Steve Jobs:

“(...) you can write amazing Web 2.0 and Ajax apps that look exactly 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! You've got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.

So developers, we think we've got a very sweet story for you. You can begin building your iPhone apps today
” - Steve Jobs, Apple (WWDC 2007)."

It didn't turn out that way (at first). Less than a year later, Steve Jobs regretted his statements, an SDK (Software Development Kit) for iPhones was announced and soon after the App Store. When you look at the App Store’s revenue it's easy to understand why.


This froze the development of PWA for almost a decade, but in 2015 Google announced a new technology in collaboration with Microsoft, who chose to drop their own idea (Universal Windows Platform) to support Google's idea of PWA.

It didn't change much overnight, but Microsoft and Google slowly started supporting PWA in their browsers. Safari, and thus iOS, was somewhat slower and we had to wait until 2018 before they even started supporting basic PWA functionality. Even to this day (2023), iOS lacks many of the features that the others have had for many years.



What can a PWA do today?

PWAs are now capable of performing an impressive range of tasks and this functionality has been available for some time. Two great sources to showcase opportunities with PWA are:

  • Demo of different PWA features: You can experiment with different PWA features by visiting the following page: https://whatpwacando.today/

  • List of supported features on your device: To see which specific features your device supports, visit this page: https://whatwebcando.today/


A PWA can do many things, but there are also some modern-day limitations that you need to be aware of, such as geofencing or access to SMS and contacts. But even with those limitations, I see apps every day that might as well have been a PWA.

One of the major challenges with PWA is that Apple hasn't been quick to support all features. Therefore, it has been necessary to develop native apps if you want to use notifications, for example. But in March 2023, Apple released an update to iOS that finally enabled notifications from PWA on iOS. Before that, iOS users could only receive notifications if they downloaded the app from the App Store.

So, it is still a new technology but with standards defined and developed by Google and Microsoft.


Where can a PWA be used and who uses it?

Any business with a website has the potential to realise the benefits of a PWA. However, it makes particular sense for organisations with a sufficiently complex website, such as online shops, restaurants, news media and self-service solutions.

Here, a PWA would make it easy for customers to get an app for their favourite online shop, restaurant, or self-service, so they can easily book a table, view the menu, see their order history, receive notifications about new offers or news and change their profiles.

Companies that have a PWA include Spotify, Disney+ and Starbucks, but also smaller organisations such as Kløften Festival and Aarhus Festuge.

On the other hand, there are situations where a PWA may not be the best solution. For example:

  • Gaming: A PWA has limitations when it comes to delivering advanced 3D graphics and complex gaming experiences. For demanding applications, native app development is often more appropriate.

  • Simple informational websites: If your website primarily serves as a simple information source with no need for interaction, then a simple responsive website may be sufficient.

Ultimately, the choice to implement a PWA depends on your organisation's specific needs and target audience. It's important to consider what type of content and functionality your website requires to make the right decision as to whether a PWA is the right way to go.


How can a PWA be implemented?

It's important to understand that a PWA does not replace a website, but rather extends its functionality. A successful PWA requires a well-functioning, responsive website as its basic structure.

Turning a website into a PWA doesn't require extensive effort and should be within reach of any web developer with JavaScript skills. All that is required is:

  • A secure HTTPS connection, which is standard for most websites today and is essential for the security of both the website and the PWA.

  • A manifest file describing the PWA's name, icon, etc. This file allows the user to add the PWA to their home screen as an app and provides a consistent look and feel.

  • A service worker JavaScript file containing the code to handle the behaviour of the PWA when it is offline. This may include displaying an error message about a lack of internet connection or storing resources on the device for quick access without a connection.

With these relatively simple steps, anyone can turn their websites into a PWA and give their users a more flexible and engaging online experience, It's an effective way to improve the reach and functionality of your website.


Is PWA the future of app development?

It is my personal belief that PWA will play a significant role in the future of app development.

PWA will not completely replace native apps, as there are still many scenarios where native apps make more sense. However, there are a significant amount of apps that actually function as glorified websites. These apps can often be replaced by much more cost-effective PWAs that offer all the benefits of an app experience without the high development and maintenance costs.