Making progressive (web apps) rock for DevOps

This is a guest post for the Computer Weekly Developer Network written by Eran Kinsbruner, lead technical evangelist at Perfecto.

Kinsbruner wants to uncover the mechanics behind an application stream being called Progressive Web Apps (PWA) and examine why the could be the next big thing.

Firmly of the opinion that PWAs are hailed as a means of pushingt the mobile web forward, Kinsbruner  reminds us that they can potentially bring parity to web and native apps, while also providing mobile specific capabilities to web users.

Perhaps unsurprisingly, Google came up with the term itself and PWAs are seen alongside Accelerated Mobile Pages (AMP) and Responsive Web Design (RWD) as key weapons in the fight for a slick mobile user experience.

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.

Join the conversation

1 comment

Send me notifications when other members comment.

Please create a username to comment.

Security and cost savings do not have to be an either/or proposition when it comes to operating in the cloud. Business units taking control over IT decisions is a clear sign that IT has to make fundamental change to the way it operates. Business units are moving to the cloud without IT input because they see IT as standing in the way of their ability to take advantage of business opportunities. IT needs to provide the same – or better – experience to internal customers as external cloud providers, or it won't survive. To address Shadow IT, we advocate an amnesty program for business units to bring their cloud apps under the umbrella of IT’s cloud management platform, allowing IT to gain governance and control holistically. Using an extensible policy based approach, IT can also help speed delivery and scale of applications, which increases line of business satisfaction, in turn helping eradicate Shadow IT, creating a virtuous cycle of greater control and increased governance – all with cost savings to the business and fewer lost opportunity costs.
-Derick Townsend, T:@servicemesh,