How to test Progressive Web Apps (PWA)

Why are PWAs preferred? What are its advantages?

  • PWAs are feature-rich. They support Native app features: push notification, offline support, and many other native app features.
  • Consumes less disk space: PWAs generally consume less disk space on a device.

Limitations of PWAs

  • Difficult to optimize device resources: PWA doesn’t have complete hardware control, so in case they need to optimize resources such as a battery, challenges crop up.
  • Working with device-specific features is difficult: Mobile devices are evolving every day. Each company offers its own take on hardware architecture to enhance device functionality. Getting control over and using those specific device-specific features is challenging with PWA.
  • Limited Functionality Support: Though a PWA looks and feels like a native app, all features and functionalities of the former cannot be achieved through the latter. Some restrictions always apply.

How to test PWAs

  • Validate Manifest File: The Manifest file in PWA is a simple JSON file. This makes web apps look like native apps. The Manifest File contains 3 Major Parts:
    1. Identity: This includes name, short name, and description. Short name key must be validated as the same name will be shown when on the Add to Home Screen.
    2. Presentation: Presentation includes keys like Start Url, Theme Color, Background color, Orientation, and Display
    a) Start URL:
    This value must be validated, as the Start URL will be considered as the start page when a user taps on the app icon and launches it.
    b) Display: Display property controls the app’s display mode like full screen, minimal UI, etc.
    c) Theme Color & Background Color: These properties deal with the color of the address bar and the background of the app.
    d) Orientation: This key defines default orientation for apps like portrait, landscape, etc
    3. Icons: Icon is a property that contains a set of icons, which will be used for the home screen icon, task view icon, etc.
  • Validate Service Workers: Service Worker is a simple script that runs in the background which enables features like push notification, background sync, etc.
  • Push Notification: Push notifications should work in PWAs just like they do in native apps.
  • Responsiveness: PWA supports all devices and its UI’s look and feel should remain the same across all devices so this needs to be tested. Test responsive design on real mobile devices with this free responsive design checker.
  • Secure connections: All content of the websites including third-party scripts and styles should be served over HTTPS in order to run the application smoothly.
  • Slow network/Offline: Ensure that the app is performing as expected even when the network bandwidth is low or there is no internet connection.
  • Functionality Testing: Apart from PWA-specific features, testers need to ensure that all other functionalities are working as expected across all devices.

Testing PWAs with BrowserStack

Test Scenarios for a PWA on BrowserStack Live

  1. Navigate to Live
  2. Choose the device to test on
  3. Wait until the device is ready
  4. Once the device is ready, navigate to the PWA site (eg: twitter.com)
  5. Open the Dev Tools from the Menu
  6. Click on the Application Tab in DevTools
  7. The PWA manifest files can be validated here
  • Test Service Worker & Push Notification
    -
    The Service Worker can also be viewed from DevTools Application Tab
    - Once the tester gets the Service worker, they can validate push notifications, sync, etc.
  • Test Responsiveness: With 3000+ real browsers and devices at hand, simply choose one and check the PWA’s responsiveness on a real device screen and resolution.
  • Test Functionality on Real Devices: As mentioned above, using real devices, QAs can test app functionality either by using automation or manual testing.
  • Local TestingTest an app before it is launched to Production using a localhost connection with Browserstack. BrowserStack also supports local testing which allows testing of a website or app on an organization’s intranet or behind a firewall.

--

--

--

https://www.linkedin.com/in/ganeshsirsi/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An Introduction to Behaviour Driven Development(BDD) — Part 1

AWS Step Functions

Writing your first extended git command

KYD — Know Your Design patterns

Build Functions In The Most MaintainableWay— clean code part 3

Jenkins Master Slave Configuration

Hiring Samaritan’s Android Engineer

🤖 Quiz Chatbot Project from Backend Perspective

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ganesh Hegde

Ganesh Hegde

https://www.linkedin.com/in/ganeshsirsi/

More from Medium

The 5 Best Magento 2 Extensions For E-Commerce (2022)

Embedding web pages as frames: Clickjacking, restrictions, and more

Alvin’s Dew Drop Daily — Issue #140

Installing/Configuring Appium on MAC OS for Android

Appium Setup on MacOs for Android