How to Test PWA
Intro
Hello! I am a QA engineer in Effective and I want to share my experience in testing of progressive web applications (PWA).
Web development technologies are improving, capabilities of modern API are growing which allows websites to expand their functionality and provide new user experience.
In this article we will look at PWA and figure out how to test it. Highlights, tips, limitations. Let’s start!
PWA Features
PWA is a set of technologies used in web development that allows to transform a website into an application visually and functionally. In fact, when users visit the website, they can install it on the home screen of their device and interact with it as a regular application:
- Launch from the home screen
- Work in offline mode
- Get push notifications
In addition, the website becomes fast and convenient, it also saves memory and traffic of your device.
This user experience is achieved by:
- Web App Manifest
- Service Workers
- Push Notifications
- Application Shell
Web App Manifest is a configuration file that contains information about an application and determines its behavior after installation. It contains icons, name, display mode etc. In the case of PWA, we can enjoy interacting with the application without distractions such as browser UI.
Service Worker is a JavaScript file that defines request logic and caching strategy, which allows the application usage even with the unstable internet connection or offline. It runs as a background process separate from the browser and can perform background tasks.
One of these background tasks is another PWA feature — Push Notifications. It is the ability to send notifications when there is an event in the application that the user should know about.
Application Shell (App Shell) is a minimal set of local resources (HTML, CSS, JavaScript) that are required to load the UI carcass. The app shell is cached by the service worker and allows loading web pages faster.
PWA examples
- Google Developers
Basic benefits of implementing PWA technologies:
- Reducing page load time
- Оffline capability
- Traffic saving (an advantage for countries with expensive internet traffic)
- PWA requires minimal device memory (not more than 1 MB)
- Increasing user engagement through push notifications
- Increasing user session duration
- PWA is indexed by search engines
With a limited budget, PWA can be a good alternative to mobile applications. There is no need to write code for different platforms, no need to upload an application to the store. At the same time, we need to remember that not all OS and devices support all PWA features. IOS supports PWA starting from version 11.3, and there are some limitations.
PWA Features Testing
Globally, the PWA testing strategy can have 2 areas of activity:
- Standard web application testing
- Functional testing
- Non-functional testing (UI Testing, Cross-browser testing, Performance testing)
2. PWA features testing
- Installation on the home screen
- Offline mode
- Push notifications
The items of non-functional testing that we mention are not selected randomly. Responsiveness, cross-browser compatibility, and performance are PWA basics that need to be tested.
- The application has to adapt to different devices and screen size to display the UI and content correctly
- You should test the UI and functionality on major browsers. Each browser has its own engine that renders the page, plus there are limitations in PWA support
- Quick launch, smooth scrolling, and instant page transitions are all part of PWA, which directly affect performance
There are also several common points to consider when testing:
- PWA is a website, and we can use the standard web tools for testing, e.g. Chrome DevTools for desktop browser, Postman, Charles Proxy Server etc
- The website codebase is the same and up-to-date for all platforms
- Do not forget about Clear site data!
Web App Manifest & Installation Testing
It is convenient to use the Manifest panel on the Applications Chrome DevTools tab to check the correct configuration of the manifest:
Key properties:
- short_name: a name to be displayed under the application icon on the home screen
- start_url: defines the start page to be opened when launching the application
- display: a property that defines the application’s display mode (fullscreen, standalone: separate window without browser UI; minimal-ui: separate window with browser navigation elements, browser: tab in the browser)
- icons: a set of icons to be used on the home screen, splash screen, task switcher etc.
Chrome, Firefox has full support of Web App Manifest. Safari has partial support (check).
There are three ways to install PWA in Chrome browser:
- Via installation prompt (beforeinstallprompt event) that browser shows automatically if the installation criteria are met
- Via browser menu “Add to Home screen”
- Via button in the website UI (added by a developer)
iOS limitations
- There is no beforeinstallprompt support on iOS. You can install the application using Safari browser and “Add to Home Screen” menu item. Moreover, it is possible to install several PWA for one site, which will work independently.
- Also, to create a correct iOS application icon (apple-touch-icon), the web page must contain a meta tag: <link rel=”apple-touch-icon” href=”/example.png”>. Otherwise, the icon will look like a screenshot of the web page.
Service Workers & Testing Offline Mode and Push Notifications
Service Worker provides an offline mode and push notifications. It is supported by all major browsers: Chrome, Safari, Firefox (check).
To test the service worker, use the Service Workers panel on the Application Chrome DevTools tab:
To perform its functions, the service worker must be registered first.
- Open your PWA using Chrome
- Open Service Workers Chrome DevTools tab and check that the service worker has been registered, activated and is running:
App data is cached during the service worker registration. Developers define what data will be cached. Please note that the service worker has its own cache: it contains the same assets as browser cache but is accessible offline. Open the Cache storage panel and check what has been cached:
Now, you can shut down the Internet (Offline checkbox on the Service Workers panel), refresh the page and make sure that the service worker has returned the cached data.
Above we have learned the sequence of actions to check the offline mode of the application.
- Make sure that your application has its own custom offline page (the page is cached during service worker registration). Users shouldn’t see the default browser offline page even if they try to open a page that hasn’t been cached yet or try to use the functionality not available offline.
- Define the pages and functionality of the application that should be available offline. Make sure that cached pages open correctly when offline. Make sure that the required functionality is available offline.
Push Notifications are the most popular and the most abused feature. It is important to set up notifications correctly not to annoy the user. Don’t forget to check the permission prompt and the timeliness of the notifications.
iOS does not support push notifications
Google PWA Checklist & Lighthouse
Another important thing to know is Google’s recommendations to create better PWAs. They are divided into 2 checklists: Core and Optimal. Check it before testing your PWA
Lighthouse is a tool (Audits Chrome DevTools tab) to check the website for performance, accessibility, PWA compliance etc. automatically:
The report contains a list of checks, metrics, and recommendations for the website improvement. The Progressive Web App section contains the majority of checks from the Google PWA checklist, as well as a reminder of additional items to check manually:
- The site works cross-browser
- Page transitions don’t feel like they block on the network
- Each page has a URL
Performing audits periodically, you can track the dynamics of changes and understand how the application has been improved.
Outro
Let us note that one of the key aspects of PWA is a gradual implementation of features depending on the business needs. There is no need to rework the whole site. First, you can add only the ability to be installed on the home screen and then move to the other steps of the development such as offline logic etc. Obviously, QA engineers must take it into account.
I hope this article was helpful!
If you or someone you know needs to develop a high-quality mobile application, web service or to help in solving business needs, feel free to contact Effective, we are ready to collaborate with you in any way: both on the whole project and outstaff. You can contact us via e-mail contact@effective.band
