PWA Testing Tools: Lighthouse and DevTools Quiz Quiz

Challenge your understanding of Progressive Web App testing using Lighthouse and DevTools. Explore key concepts, use cases, and best practices for evaluating offline functionality, performance, and PWA compliance in modern web apps.

  1. PWA Audit Categories

    Which audit category evaluates whether a web app is installable and provides a proper web app manifest when using testing tools for PWAs?

    1. Accessibility
    2. Best Practices
    3. Progressive Web App
    4. Performance

    Explanation: The 'Progressive Web App' category specifically checks for installability, manifest correctness, and service worker registration. 'Performance' focuses on speed and efficiency, while 'Accessibility' evaluates usability for people with disabilities. 'Best Practices' addresses general app quality but not PWA-specific criteria.

  2. Service Worker Verification

    When checking if your web app successfully uses a service worker for offline support, which DevTools panel feature should you primarily use?

    1. Elements panel
    2. Console log
    3. Network throttling
    4. Service Workers section of Application panel

    Explanation: The Service Workers section in the Application panel lets you inspect registration, lifecycle state, and activity for service workers, essential for PWA offline support verification. The Elements panel inspects markup, not service workers. Network throttling simulates poor connections but does not verify service worker use. Console log could show errors but does not focus on service worker status.

  3. Lighthouse Offline Testing

    During a Lighthouse audit, which result indicates that a web app can function offline after the initial load?

    1. A green lock appears in the address bar
    2. The PWA score is 100
    3. The manifest contains a name property
    4. The audit passes the 'Works offline' check

    Explanation: Passing the 'Works offline' check in Lighthouse means the app properly caches content for offline usage, reflecting true offline capability. Having a 100 PWA score may not specifically indicate offline functionality, as it aggregates multiple subcategories. The presence of a name property only relates to the manifest, not offline support. A green lock signifies a secure connection, not offline readiness.

  4. Simulating Network Conditions

    Which feature in DevTools allows you to simulate slow network speeds to test how your PWA loads under poor connectivity conditions?

    1. Device Mode toolbar
    2. Timeline recording
    3. Cookies tab in the Application panel
    4. Network throttling in the Network panel

    Explanation: Network throttling lets you emulate slow connections directly, helping test app responsiveness and loading. Device Mode changes screen dimensions, not network speed. Cookies are used for storage inspection, not connection simulation. Timeline recording tracks rendering performance, but it does not adjust network parameters.

  5. Manifest File Issues

    If your PWA’s Lighthouse report fails the 'manifest contains icons at least 192px' check, which problem should you look for in your manifest file?

    1. No orientation specified
    2. An invalid background_color value
    3. Missing an icon with minimum required size
    4. Lacking a description property

    Explanation: A failed 'manifest contains icons at least 192px' warning means there is no icon of the needed size, which impacts installability. The description property is optional and not related to this requirement. Background_color and orientation issues affect app display but not icon size compliance.