test('PWA works offline', async ({page}) => {
await page.goto('/');
await context.clearCookies();
await context.setOffline(true);
await page.reload();
// Verify offline content is displayed
await expect(page.locator('.offline-banner')).toBeVisible();
await context.setOffline(false);
});Automated coverage belongs in the e2e suite for one reason: cache state makes manual testing unreliable. A test that clears indexedDB, unregisters workers and reloads gives every run the same starting point; without that, the same suite passes on a fresh machine and fails on a developer’s laptop whose worker is three versions old. The testing and debugging guide has the harness patterns; the service-worker-specific cases are the offline reload and the update-ready path.
For change detection patterns that affect cache invalidation, see the Angular change detection guide, which covers OnPush versus default strategy and how signals affect cache keys. Also useful: the NgRx state management guide for shared state patterns, the Angular i18n guide for locale-aware cache invalidation, and the Angular CDK guide for virtual scrolling and overlay patterns.
To learn Angular properly with a mentor, Ampersand Academy teaches web development one-to-one. Their one-on-one approach accelerates understanding of state management patterns that would take months to self-teach.
New to Angular? Build the fundamentals first in the free 14-part Angular course, then come back to this guide for the deeper material.
PWA Overview and Benefits
A Progressive Web App (PWA) combines the best of web and native application experiences. Users can install the app to their home screen, receive push notifications, and work offline or on poor networks. The app shell loads instantly on subsequent visits, and the PWA appears in search results just like any other web page. For businesses, this means increased engagement, reduced bounce rates, and a lower maintenance burden compared to maintaining separate native apps.
Service Worker Lifecycle
Caching Strategies
Offline-First Patterns
beforeEach(() => {
// Clear all service worker caches
cy.clearAllCaches();
// Unregister the service worker
cy.unregisterServiceWorker();
// Reload the page to start fresh
cy.visit('/');
});PWA Updates and Reload
if (sw.updateFound) {
sw.onstatechange = () => {
if (sw.state === 'installed' && navigator.serviceWorker.controller) {
// Show update prompt
showUpdatePrompt();
}
};
}Testing Angular PWAs
describe('PWA offline testing', () => {
beforeEach(() => {
cy.clearAllCaches();
cy.unregisterServiceWorker();
cy.visit('/');
});it('works offline after service worker install', () => {
cy.visit('/');
cy.exec('ngsw-cache –list');
cy.server();
cy.route('GET', '**/api/*').as('api');
cy.visit('/offline-page');
cy.wait('@api');
cy.exec('ng service worker update');
cy.contains('Update available');
});
});
test('PWA works offline', async ({page}) => {
await page.goto('/');
await context.clearCookies();
await context.setOffline(true);
await page.reload();
// Verify offline content is displayed
await expect(page.locator('.offline-banner')).toBeVisible();
await context.setOffline(false);
});For related reading, see also: Angular Change Detection (zoneless/OnPush), Angular NgRx State Management, Angular PWA Guide, Angular i18n Guide, Angular CDK Guide, Angular Documentation, MDN HTTP Caching, Web Fundamentals Offline, Angular Service Worker GitHub, Google Web Fundamentals PWA.
Quick answer: A PWA works without internet when the app shell and required data are cached. HTTPS is required for production; localhost allows HTTP for development. Test by building, serving dist, and inspecting caches in the browser’s application panel.
Last updated on · Written by Dinesh Kumar R
