How to Test PWAs: Part 2

In this piece, Maria Maksimova, QA Lead at Red Collar, dives into the key considerations for PWA testing and offers practical tips on writing unit tests. Plus, she shares a handy PWA testing checklist!

Key Considerations for Testing PWAs

• PWA is not a glue.
• PWAs run in a browser, not as standalone apps.
• Some browsers may not support PWAs — this list is always evolving, so check for the latest updates.
• PWAs are designed to feel like apps, so users will expect them to behave like native applications.

What we're testing:

If operating offline, ensure the app functions correctly without an internet connection after the initial download, and that all offline features work as expected. Verify that the app syncs data properly once the internet connection is restored.

Confirm that push notifications are sent and received correctly. Test the PWA across different browsers (Chrome, Firefox, Safari, Edge, etc.) to ensure it functions properly.

Evaluate the PWA’s performance on various browsers and devices and ensure the PWA works seamlessly across different operating systems and screen sizes.

Verify that the PWA can be installed on both mobile and desktop home screens and ensure it behaves like a native app, including features like full-screen mode and no address bar.

It's important to confirm that the PWA loads quickly, even on slow internet connections.

Also check that the PWA’s file size is optimized for fast loading and works smoothly, especially when navigating between pages and using offline mode. Ensure the PWA is served over HTTPS to guarantee data security.

The Service Worker handles resource caching, offline access, push notifications, and background sync. Verify it is implemented correctly (detailed instructions at the end of the table). We have no concerns about the Service Worker itself, just ensuring it functions as expected.

Ensure all data is correctly received, transmitted, recorded, and displayed and check that user settings and other relevant data are cached and accessible in offline mode. Data should also be synchronized accurately with the server when the internet connection is restored.

If the PWA uses mobile device features like the camera or geolocation, verify they are functioning correctly. Test that the PWA operates properly in the background and resumes when needed, even in power-saving mode.

If the PWA includes payment options, ensure all available payment methods work correctly, especially in the relevant regions.

How to test Service Worker

For those who prefer full control and enjoy challenging tasks, like writing unit tests

Service Worker Testing Tools:

• DevTools in the browser: Navigate to “Application” -> “Service Workers.
• Lighthouse
• Workbox: A library that simplifies working with Service Workers, including testing and debugging.

1. Registration and Activation

• Registration Verification: Ensure the Service Worker is successfully registered.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('Service Worker registered with scope:', registration.scope);
  }).catch(function(error) {
    console.error('Service Worker registration failed:', error);
  });
}        

• Activation Verification: Ensure the Service Worker transitions to the active state.

self.addEventListener('activate', event => {
  console.log('Service Worker activating...');
});        

2. Resource Caching

• Cache Initialization: Ensure that resources are successfully cached during installation.
• Checking Cached Files: Verify that resources are accessible from the cache.

3. Offline Access

• Check Offline Mode: Disconnect from the internet and ensure the application functions properly.
• Check Offline Access Page: Ensure that an offline page is displayed when a resource is unavailable.

4. Updates and New Versions

• Update Service Worker: Modify service-worker.js and verify that the new version of the Service Worker is installed and activated.
• Managing Older Versions: Ensure that the previous version of the Service Worker is correctly uninstalled.

5. Push Notifications

• Requesting Permission: Verify that the user receives a prompt to grant notification permissions.
• Receiving Notifications: Ensure that notifications are received and displayed correctly.

6. Background Synchronization

• Registering a Synchronization Task: Verify that the background synchronization task is successfully registered.
• Executing Synchronization: Ensure the task is executed correctly once the connection is restored.

PWA Testing Checklist (Excluding Project-Specific Functionality)

• Service Worker is registered upon page load.
• PWA installs successfully on the device’s home screen.
• PWA icon is displayed correctly on the home screen.
• PWA name is displayed accurately on the home screen.
• PWA operates offline with cached resources.
• All necessary resources (HTML, CSS, JS, images) are cached.
• Offline page is displayed if a resource is unavailable.
• Resources are cached upon the initial installation of the Service Worker.
• When resources are updated, the old version is replaced with the new one.
• New Service Worker version activates without conflicts.
• Users receive up-to-date content when available.
• Permission request for sending push notifications is correctly displayed.
• Push notifications are received properly.
• Verify the display and content of push notifications.
• Push notifications are processed correctly when clicked.
• PWA displays correctly on various screen sizes and devices.
• PWA scales and displays properly when screen orientation changes.
• Ensure the PWA is served over HTTPS.
• User data is processed and stored securely.
• Cached data is available offline.
• Data is synchronized accurately with the server when the internet connection is restored.
• Background synchronization is performed correctly upon reconnection.
• Test the PWA in different browsers (Chrome, Firefox, Safari, Edge).
• Verify access to device features (camera, geolocation, etc.).
• Confirm the PWA interacts properly with device functions (incoming calls, SMS, etc.).
• Ensure the PWA resumes functioning when returning from the background.
• Test long sleep mode in a minimized state and proper recovery from it.
• New PWA versions install and activate without data loss.
• Verify correct operation in power-saving mode.
• Confirm the app resumes from sleep mode while in power-saving mode.