Understanding web application types

When building a web application in the ever-changing digital marketplace, developers have various choices in terms of whether to build a traditional web application, a responsive one, or a progressive application. Each choice comes with advantages, disadvantages, and technology implications, such as the language in which the app is developed, the target platforms on which it will run, and which technology stack would fit such an application. A progressive web application (PWA) that is intended to run on both web and mobile apps can be developed in JavaScript; however, testing one on real mobile devices and browsers will require a mix of frameworks such as Selenium, Appium, and more.

Let's learn more about each of the application types.

Traditional web applications

The most basic web application type is one that is developed and designed from the bottom up to run on desktop machines (for example, Windows 11 with the Edge browser and macOS with Safari). While fully supported to run on mobile smartphones and tablets, such applications are not designed to be responsive.

If you navigate from your Windows desktop Chrome browser to the MSN website (http://msn.com), you will be able to work through the site, navigate around it, and use it as required. However, if you choose to navigate to the browser menu, under the More tools submenu, and select the Developer tools option (this one can also be triggered through a click on by pressing the F12 button on your keyboard), you will see a Toggle device toolbar button that is aimed at helping developers and testers to validate their web apps from a responsive standpoint. In this menu option, if a user selects an iPhone device, they will see that the website isn't mobile-ready. As a matter of fact, in the top-level banner of this web application, there is a callout to download a relevant mobile app for both Android and iOS:

Figure 1.2 – The MSN web application on an iPhone 13 Pro Max in landscape orientation mode

Such a web application type would be developed, tested, and mostly dedicated to desktop web users. Additionally, it will require the organization to maintain a mobile-specific native or hybrid app to ensure a proper user experience across all digital devices.

Responsive web applications

In contrast to traditional web applications, responsive web applications are adjustable across most desktop and mobile screen sizes and resolutions. Such a unique design allows web developers to make their apps accessible across the maximum number of digital channels using a single code base and a consistent user experience. However, it is not as simple as that; responsive web apps require, in addition to a unique development workflow, things such as an agreed content strategy that shows customers the most relevant content above and beyond the fold. Such visible content across all types of screens needs to be constantly maintained, optimized, and tested to ensure business growth and success:

Figure 1.3 – Responsive Web Design for Desktop, Notebook, Tablet and Mobile Phone (originally created by Muhammad Rafizeldi (Mrafizeldi), retrieved from https://commons.wikimedia.org/wiki/File:Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone.png, licensed and made available under CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0/deed.en))

Responsive web apps are a much stronger application type with clear benefits to both the developers and the end users. Maintaining a single code base over time and automatically serving any screen size or resolution are clear cost-efficient software development methods.

New types of digital platforms such as foldable smartphones and home devices, such as Google Hub and Amazon Echo Show, have also entered the market; such applications need to be updated to ensure a continuous user journey across all platforms.

In a nutshell, here is a list of the building blocks of a solid responsive web design (RWD) test plan that both developers and test engineers should execute continuously:

• Compatibility testing across the most relevant desktop browsers, OS versions, and mobile devices
• Visual testing coverage across different layouts, screen sizes, resolutions, and languages to ensure the proper display of all graphical elements on these platforms
• The end-to-end functional testing of all business flows, links, forms, and other web UI dependencies
• Accessibility of the pages across all different platforms
• Client-side performance testing
• Load testing at peak levels and normal ones
• Testing across different environment conditions (both web and mobile), including networks, working with sensors, incoming events, location-aware events, and more

PWAs

PWAs are one of the most advanced web application types with unique characteristics. Initially developed and led by Google, these application types have been adopted by all the other browser vendors, including Apple, Microsoft, and Mozilla. PWAs are those applications that are built on top of the responsive web app code base, allowing mobile users to install a web link on their Android and iOS devices. Following this, they can interact with these apps offline through different sensors with access to mobile OS functions such as the contact list, camera, location, and more:

Figure 1.4 – PWA icons on a mobile device (Originally titled "Progressive web apps on my home screen." Created by Jeremy Keith, retrieved from https://www.flickr.com/photos/adactio/42535353742, and licensed and made available under CC BY 2.0 (https://creativecommons.org/licenses/by/2.0/))

A PWA can be installed through a link on any mobile iOS or Android device, as well as on Windows hybrid laptops such as Microsoft Surface. Once they are installed, the user can launch them from their mobile device home screen and enjoy the unique features of the app, which are attributed to the ServiceWorker component that is built into each PWA. In the preceding screenshot, the Twitter Lite icon is the PWA application shortcut that was installed from the web browser on the mobile device.

Service Workers

Service workers are scripts that run in the background of a user's browser, enabling web application developers to add features such as push notifications, offline caching, mobile device sensor engagement, and a proxy that can handle various network requests from your web application. PWAs utilize service workers to enrich web applications running on mobile devices.

PWAs offer users from a single code base the ability to consume a web application on any desktop screen or mobile device screen with the additional features of offline caching, push notifications, sensor support (such as location, camera, and audio), and contact list access. With such reach supported capabilities, web application developers can deploy their apps easily, immediately, and bypass the mobile application stores.

Google and other browser vendors provide tools to validate the PWAs via their browser developer tool capabilities that are available from within the browser, as well as other guidelines and recommended practices. Developers can generate MANIFEST.MF files and JavaScript service worker scripts, which will be added to their web applications. Many enterprise web applications (https://www.pwastats.com/) across market verticals such as Instagram, Lyft, Twitter, eBay, and others, have already adopted this technology and are seeing many benefits daily. As the leader behind these types of applications, Google has created a great baseline (https://web.dev/progressive-web-apps/) and checklist for complying with the PWA requirements.

The building blocks of a PWA test plan include those of the solid RWD that were mentioned earlier, along with the following PWA-specific scenarios:

• The validation of PWA manifests file correctness (pointing to the home URL, theme, icon, and more).
• The validation of the PWA service workers, which comprises critical components of the PWA application, includes registering for push notifications, caching abilities, and more.
• PWA installation and functionality across the platform and in parallel with the native applications.
• PWAs provide a custom offline page to serve users when they are offline.
• PWAs work with any input type such as a mouse, keyboard, stylus, or touch.
• PWAs work fine with all mobile device sensors such as location services, audio, camera, and more.
• PWAs should be tested against all third-party dependencies such as social media integrations (for instance, Facebook and LinkedIn), other APIs, analytics services, and more.
• The PWA testing of security, privacy policies, and permissions of the app to adhere to Apple and Google requirements.

As you might have gathered, this is a superset of the pillars of an RWD plan with additional PWA-specific testing considerations.

The following code snippet demonstrates a basic service worker registration in JavaScript as part of building the foundation of a PWA application:

If ('serviceWorker' in navigator) {
window.addEventListener('load',function(){
navigator.serviceWorker.regisdter('/sw.js').then(function(
  registration) {
//Registration was successful
console.log('ServiceWorker registration with scope:'
             ,registration.scope);
} function(err){
//registration failed ☹
console.log('ServiceWorker registration failed:',err);
});
});

Now that we've established the main web application types that are available for application developers, let's go through the key testing types that need to be considered upon each web application release.