Offline-First Angular Application with Service Worker

This challenge focuses on implementing a service worker in an Angular application to enable offline functionality and improve performance through caching. Building offline-capable applications is crucial for providing a seamless user experience, especially in areas with unreliable network connectivity. This challenge will guide you through creating a basic service worker that caches static assets and handles offline requests gracefully.

Problem Description

You need to create a service worker for a simple Angular application that caches the application shell (HTML, CSS, JavaScript, and images) and serves it from the cache when the user is offline. The service worker should:

1. Install: Register itself and cache the application shell assets during installation.
2. Activate: Claim control of the application after activation.
3. Cache and Serve: Intercept network requests for the application shell and serve them from the cache.
4. Handle Offline Requests: Display a user-friendly message when the user attempts to access the application while offline.
5. Update: Periodically check for updates and refresh the cache if a new version of the application shell is available.

Key Requirements:

• The service worker must be configured to cache the application shell. Assume the application shell consists of the index.html, all CSS files in the styles.css folder, all JavaScript files in the src/app folder, and all images in the src/assets/images folder.
• The service worker should handle requests for assets outside the application shell by passing them to the network.
• The application should display a message like "Offline Mode - App Shell Unavailable" when the user is offline and attempts to access the application shell.
• The service worker should periodically check for updates (e.g., every 24 hours) and refresh the cache if a new version is detected. For simplicity, assume a version number is stored in a version.txt file in the src/assets folder.

Expected Behavior:

• On initial load, the service worker should install and cache the application shell.
• Subsequent visits to the application while offline should load the application shell from the cache.
• Requests for assets outside the application shell should still attempt to load from the network.
• If the application shell is updated, the service worker should detect the change and refresh the cache on the next visit.
• Offline requests for the application shell should display the "Offline Mode" message.

Examples

Example 1:

Input: User navigates to the application while offline after the service worker has been installed and cached the application shell.
Output: The application shell is loaded from the cache, and the application is functional (within the limitations of offline availability).
Explanation: The service worker intercepts the request for `index.html` and serves it from the cache.

Example 2:

Input: User navigates to the application while offline and attempts to access a resource outside the application shell (e.g., an API endpoint).
Output: The service worker passes the request to the network. If the network is unavailable, the request fails, and the application handles the error appropriately (e.g., displays an error message).
Explanation: The service worker is configured to only cache the application shell.

Example 3:

Input: The application shell is updated with a new version (e.g., `version.txt` changes). The user navigates to the application online.
Output: The service worker detects the new version, caches the updated application shell, and serves the new version on subsequent visits.
Explanation: The service worker periodically checks for updates and refreshes the cache when a new version is detected.

Constraints

• Angular Version: Angular 15 or higher.
• Caching Strategy: Cache-first strategy for the application shell.
• Update Frequency: Check for updates at least once every 24 hours.
• File Structure: Assume a standard Angular project structure.
• Version File: The version.txt file is located in src/assets.
• Offline Message: The offline message should be displayed prominently to the user.

Notes

• You'll need to use Angular's Service Worker module (@angular/service-worker).
• Consider using ng build --prod to generate optimized production assets for caching.
• The version.txt file should contain a simple version number (e.g., "1.0.0").
• Focus on the core functionality of caching the application shell and handling offline requests. Advanced features like background synchronization are beyond the scope of this challenge.
• Remember to handle errors gracefully and provide informative messages to the user.
• You will need to configure your ngsw-config.json file appropriately.
• Consider using console.log statements for debugging purposes.