Testing Progressive Web Apps involves evaluating various aspects across different browsers, devices, and configurations to ensure they work as expected. This includes testing the manifest file to check icons and launch URLs display correctly, testing service workers to verify caching and updates work properly, and testing responsiveness on various screen sizes and orientations. Accessibility is also important to test using tools like Lighthouse, Axe and WAVE to meet WCAG standards. Considering real-world network conditions and unsupported browsers is also recommended during testing.

1. Testing Progressive
Web Apps
(or how to achieve api-ness)

2. hello!
We are:
Elizabeth
Fiennes
(she/her/sí
/they)
@ElizaFx
Callum
Arkhurst-Ryan
(he/him/sé
/they)
https://www.linkedin.com/in
/cakehurstryan/

3. The backstory
Falling app store downloads
A PWA MPV
No information on testing
(Gulp…)

4. What is a PWA?
Native?
Web?
Thick client?
Hybrid?
Under construction!

6. UI (PWA WebApp Frontend)Local app / file cache
Application/content
for rendering
Server Cache (URLs)Service worker
Datasource Integrated applications
The layers

7. manifest
Accessible
Secure
Service workers responsive
Properties

8. General testing advice
(ask ALL the questions!)
Browser or device
Local storage
Configuration
Display modes

9. The Manifest

10. Launch URL
icons
devices and
supported UI
sizes
look and
feel
Manifest properties

11. Testing the manifest
APP NAME / SHORT NAME - Across devices
ICONS - Across devices
LAUNCH URL - Across devices and browsers
INSTALLATION - Options. Cached data and limits // across devices
LOOK AND FEEL - Background. Colour scheme // across devices and browsers
ENTRY & EXIT - URLs // across browsers

12. Create your
own
Easily done with PWA Starter from:
https://pwastarter.love2dev.com

13. They are
secure

14. The Security “bit”
Internet facing Service workers can only be deployed over HTTPS
This is good
Deploy them locally without a TLS certificate for testing (http)
! Repeat testing over HTTPS

15. Testing for Security
Injecting Data
Progressive web apps are safe to use during interactions.
Looking at Data

16. They have
service
Workers
Notifications

17. Offline
content
notification
s
installation
Hardware
integration
SW properties

18. Testing the service workers
Installs - interrupt them!
Caching - verify static assets
Activations / Updates - attempt an update with SW in use
States - Ensure memory saving termination
DevTools - Fetch new dynamic content!

19. They are
Progressive
19
Accessibility

20. Testing Accessibility
Using Audit tools such as
Lighthouse, Axe or WAVE.
Running an accessibility audit using
the WCAG 2.1 criteria.
Progressive web apps have a far reach and are accessible to all.

21. Lighthouse can be run from the dev tools or as part of the CI to
provide an accessibility score.
Axe can be run from the browser to identify
specific issues and highlight them on the screen.
WAVE run from the browser highlights issues on screen and can
be used to strip the CSS from a site.

22. They are
Responsive

23. Sizing
Reordering
Element
Relocation
Page
Orientation
Responsiveness

24. Testing PWA responsiveness
Lighthouse - Mobile rating
Page transitions - Still usable?
Element changes - Distinguishable?

25. Testing Device-ively
(Yes we are proud of ourselves)
(If you don’t like this pun,
please know that callum bears no responsibility for it)

26. Android -
WebAPK file
generated
iOS -
Light version of Safari
is installed
desktop - No
tabs or address
bar. Full window
width.
Touchscreen
- Invisible
elements
not
selectable
Device-iveness

27. Testing for specific devices
App launcher and settings
Application Pack Updates
Intent filters
Hardware permissions
Murder most foul!

28. Everything
isn’t (exactly)
awesome
Awesome
Not awesome

29. Keep your users in mind
> 3G - Ukraine and Guyana
- Estimated 4bn people offline
- Not every browser is supported
Point in time truth:
https://jakearchibald.github.io/isserviceworkerready/index.html#moar

30. Any questions?
Special TY to the awesome SlidesCarnival people who created this slides template
Ask them
Ask them