A bit of history
We can trace the fundamental idea of putting mobile user experiences in the core of interest by going back to the year 2000 with the creation of XMLHttpRequest. This API in form of an object gave developers the possibility of retrieving data from a URL without doing a full page refresh. Later on, we got AJAX, a set of techniques for creating better, faster, and more interactive web applications with the help of XML, CSS, HTML, and Javascript. That allowed developers to retrieve and send data from a server asynchronously without interfering with the display and behavior of the current page. All these new technologies shared the same principles including linkability, accessibility, UI richness, and freedom to implement and distribute without any additional permissions or payments.
However, it was Steve Jobs who first presented the concept in front of the world during the first iPhone introduction in 2007. At the time, it seemed natural that external apps would help to increase the popularity of that device, and Steve Jobs wanted developers to build apps using standard web technologies.
The universal apps’ concept was frozen for almost a decade and during that time native apps ruled the world and redesigned the way we use the internet. They were the foundation that helped Google and Apple to build their power on mobile. Meanwhile, users who were reluctant to make the jump to native apps began to switch to responsive web design, which allowed them to display pages correctly on a variety of devices.
In 2015 Alex Russel at Google observed a new class of websites, which provided a better user experience than traditional web applications with a common shared feature: they gave up the browser’s tab to live on their own while preserving their ubiquity and linkability. This new class of apps was called: Progressive Web Apps.
What is exactly a PWA?
A Progressive Web App (PWA) is an app that uses modern web capabilities to offer users a very similar or even better experience than a native app. Unlike traditional apps, progressive web apps are a hybrid between regular web pages and mobile applications. They introduce new features to behave more like mobile apps, and among other things to be multiplatform, the reason why they are called “Progressive”.
The main driving force behind PWAs is service workers. In its most basic form, a service worker is a programmable proxy between the frontend and the rest of the web application. It allows developers to hook certain functionalities on outgoing requests by intercepting each request initiated from within the web application. While it resides in the browser, it’s executed on a separate thread and does not have direct access to the DOM or UI. The main purpose is to perform non-UI tasks such as caching, handling notifications, and improving performance.
The other important feature that allows a PWA to offer the best experience is the manifest. It is a simple JSON file that defines the basic configuration of a PWA, its appearance at launch, icons, and other features as colors, fonts, screen orientation, and the possibility of being installed on the home screen. Although these new features make it sound like a win-win, let us unpack the strengths and weaknesses of the progressive web applications.
PWAs Strengths:
Progressiveness – They work for every user and are supported on all major browsers on desktop and mobile, available for every device and network condition.
Responsiveness – They adapt to various screen sizes, desktop, mobile, tablet, and others.
App-like behavior – They behave like native apps, both in terms of interaction and navigation.
Always Up-to-date – Information is always up-to-date, due to the data update process offered by service workers.
Security – Served over HTTPS protocol to prevent the connection from altering contents or display information.
Discoverable – Identified as “apps” and indexed by search engines.
Reactivable – The web notification capabilities make it easy to reactivate the application.
Installable – Allow users to save the apps to their mobile home screen without having to deal with app stores.
Linkable – Easily shared via URL without a complex installation.
Works in offline mode – Once you download a PWA to your device you can consume content within the app without an internet connection, leveraging data downloaded during your last interactions with the app.
PWAs Weaknesses
- Potentially greater use of the device’s battery as JS and HTML technologies don’t take full advantage of battery optimization such in native code.
- Lack of presence in the stores.
- For end-users, there is no control over what is published (an approval process).
- Limited access to some hardware components of the devices such as fingerprint reader and complete NFC support.
- The support provided for offline mode is for now limited and it has storage limitations according to which browser you use.
- Inter-app engagement is not possible.
When to go for a PWA?
When you don’t want to deal with the details that go when you need to publish to a store such as: publishing policies, certificate generation, unpredicted review times in the approval process and so on, and you need a fast time-to-market, PWAs are the way to go.
Also, PWAs are quicker to create and it will only require a development team to do it as opposed in native apps where you would need different skill sets for each development team (iOS/Android).
Progressive web apps, however, won’t replace native apps in all the usage scenarios, but, in most cases, having a robust PWA is the right choice. Let’s make it easier to understand:
PWAs are a good option when:
- You need to distribute the app to an even wider user base, not only for android and iOS but also when cross-platform compatibility is required, such as Microsoft Surface devices.
- You have limited time for GoLive and don’t want to deal with distribution details for each platform and the stores’ approval process.
- Your expected app functionality does not comply with the application store policy –
- Search Engine Indexing is important, as the whole of the code is indexed!
- Frequent updates are a requirement because the process is easier: PWA updates without the user clicking any buttons.
It’s preferable not to adopt PWAs when:
- Your business needs to have a presence in the stores.
- Your app biometric authentication is a must.
- Your app requires an important use of the hardware features of the device.
- Your business model is dependent on in-app purchases or selling the app
- It must be integrated with other third-party apps.
How to build a PWA in Outsystems?
We can build PWAs in OutSystems by setting the PWA distribution mode in mobile apps. A mobile app belongs to the Mobile App runtime, and the default app templates of this type are Phone App and Tablet App. Select them when you’re creating a new app in the Service Studio as a PWA. You can simultaneously distribute a mobile app as a native mobile app and as a PWA.
This way, when you are developing your app in Outsystems, you get all benefits of the low-code development, and also the benefit of choosing which distribution mode suits your business needs better. It will be enough to turn on the PWA distribution of the app. That’s a huge benefit of the Outsystems platform.
What to take into consideration when building a PWA in Outsystems?
For a PWA’s distribution, you will need to implement or use components based on HTML5 and JS because you can’t use Cordova based components, as they interact with hardware using pieces of native code.
You need to pay attention to the project requirements to see if plugins are a must and can be implemented in a PWA. You can develop logic to prefer one component over another, conditional on Cordova being enabled or not (aligning with the distribution method used).
If you have a requirement of a PWA integrating with web push notifications, you will need to implement a custom service worker or integrate multiple service workers in one. Fortunately, Outsystems gets you covered and allows developers to fully customize these two important aspects of PWA’s: both PWA manifest and service workers can be customized.
Another important topic is security: PWAs are different from native apps and some of the traditional native apps concepts don’t apply. PWA security is based on HTTPS and concepts like SSL Pinning don’t apply. Test teams might have to be guided to adapt the test methodologies to PWAs.
PWAs are here to stay!
As a technology enthusiast, it’s good to see companies like Apple and the Webkit team evolving and improving their PWA browser support in recent years. Progressive Web Apps seem to be the future of web design, allowing web app developers to create user experiences, combining the reach of the web and the functionality of native apps. As with any new technology, they come with their fundamental design considerations, but their ample benefits make them a worthy investment.
As an Outsystems Tech Lead, I was excited to be using these modern technologies within the low-code world on a recent project for a customer within the Financial Industry. From my experience and as a top Outsystems Partner, we are eager to improve the experience of creating and distributing PWAs even further.
Published 21st April 2021
