Making progressive (web apps) rock for DevOps

Kinsbruner writes as follows…

Progressive Apps have one common source code base to develop for all platforms: web, Android and iOS – making them easy to maintain and fix. With Google behind the development; it’s perhaps no surprise that PWAs are relatively easy to adopt. So, developers don’t need to gain new skills, but rather learn new APIs and see how they can be leveraged by their websites.

PWA apps exhibit two main architectural features for developers to use; Service Workers (which give developers the ability to manually manage the caching of assets and control the experience when there is no network connectivity) and Web App Manifest (the file within the PWA that describe the app, provides metadata specific to the app like icons, splash screens and more) – and these present significant new opportunities for developers.

For testers, PWAs are still JavaScript-based apps, so tools like Selenium and Appium will continue to work effectively. However, cross browser testing on desktop and mobile platforms is getting harder and PWA introduces a greater level of complexity than RWD. As with any development of this ilk, new tests (manual and automated) need to be developed, executed, and fit into the overall pipeline.

With RWD, the primary challenge was the visual changes driven by form factor.

PWA introduces additional complexities due to more unique mobile-specific capabilities, such as no network operation, sensors-based functionality (location, camera for AR/VR, and more) and cross-device functionality as well as dependency on different test frameworks like Selenium, Appium.

There may also be a need to instrument the mobile side of the PWA to better interact with the UI components of the app on the devices. Testers must be aware of what PWAs can access and how to keep quality assurance high at the top of their priority list.

A checklist for a PWA test plan:

Step 1: Perform complete validation of the Mainfest.Json validity file and check for load through the supported browsers (Opera, Firefox, Chrome, soon Safari)

Step 2: Test and debug your supported service workers. This can be done through the Chrome internals page[1]. In this section, enable and disable each service worker and assure it behaves as expected – common service workers enable offline mode – and register the app for push notification. Perform these validations across mobile and web.

Step 3: PWA adds support for camera (e.g. scanning QR codes), voice injection (recording a memo), push notifications and other more mobile specific capabilities. Make sure to test the use of these functions on your app across mobile devices – these will be an additional set of functional tests only relevant to mobile devices.

Step 4: As PWA is a super set of a RWD, all the RWD testing pillars apply here also, which means you need to consider:

• UI and visual/layout testing across multiple form factors
• Performance and rendering of the content across platforms (load the proper code and images to the right platform – mobile vs. web)
• Network related testing – in addition to the offline mode that is covered through service workers, make sure to cover the app behaviour throughout various network conditions (packer loss, flight mode, latency %, 3G, 4G, 5G etc.)
• Functionality of the entire page user flows across platforms and screen sizes and resolutions

Step 5: Handle test automation code and object repository. PWAs are java script apps that add a .apk file to the device application repository once installed – especially on an Android device (apple has limited support so far for such apps). When aiming to test the Android .apk on the device, the developer and tester will need a proper object spy that can identify both the App shell objects as well as the WebView objects within this app. From initial tries for subset of PWA apps, the Appium object spy for Android will not work, leaving the user to only get the DOM objects from the web site only. This is currently a technological challenge to automate the mobile parts of a PWA.

Step 6: Be sure to cover Google’s recommended checklist for PWAs step by step, since it includes a lot of the core functionalities of progressive apps, and can assure not just good functionality when followed, but also great SEO and high score by Google search engines.

Forward looking developers will look to overcome the challenges this kind of innovation brings and use PWAs as an opportunity to deliver a better user experience.

If you’re a developer just starting to move from a .com or a .mob site to a cross platform web environment, then PWA is a compelling option. Web developers, should base any plan for change around an appropriate product or business milestone such as a next big website release or a complete rebrand; making sure that a move to PWA makes sense, and isn’t just a jump on the latest and greatest bandwagon.