Implementing Offline Support in an Angular Application

Many modern applications benefit from offline capabilities, allowing users to continue working even without an internet connection. This challenge focuses on building a basic offline-enabled Angular application that can cache data and synchronize it when the connection is restored. This is crucial for improving user experience and ensuring data availability in unreliable network environments.

Problem Description

You are tasked with creating a simple Angular application that displays a list of tasks. The application should initially fetch the task data from a mock API (simulated with a local JSON file). The core requirement is to implement offline support using the Service Worker API. The application should:

1. Cache Data: Upon initial load (or when online), cache the task data using a Service Worker.
2. Offline Display: When offline, display a cached version of the task list. If no cached data exists, display a message indicating that the application is offline and no data is available.
3. Online Synchronization: When the application comes back online, automatically synchronize the data with the mock API. For simplicity, assume that any changes made offline are discarded upon successful synchronization (no local modifications are tracked).
4. Connection Status Indicator: Display a visual indicator (e.g., a text label or icon) to show the current connection status (online or offline).

Key Requirements:

• Use Angular's CLI to create a new project.
• Implement a Service Worker using Angular Service Worker library (ng add @angular-builders/custom-webpack).
• Use a mock API (a JSON file) for data fetching.
• Handle online/offline events using window.navigator.onLine.
• Display appropriate messages to the user based on the connection status and data availability.

Expected Behavior:

• Initial Load (Online): Fetch data from the mock API, display the task list, and cache the data. Show "Online" status.
• Going Offline: Detect the offline event, display "Offline" status, and display the cached task list (if available). If no cached data, display "Offline - No data available".
• Coming Online: Detect the online event, display "Online" status, and automatically fetch data from the mock API, replacing the cached data with the fresh data. Discard any offline changes.

Edge Cases to Consider:

• What happens if the mock API is unavailable even when online? (Display an error message).
• What happens if the cached data is corrupted or invalid? (Attempt to fetch from the API and display an error if that fails).
• How to handle initial load when the browser is already offline?

Examples

Example 1:

Input: Initial load - Online, API returns: [{id: 1, title: "Task 1"}, {id: 2, title: "Task 2"}]
Output: Task list displaying "Task 1" and "Task 2", Connection status: "Online"
Explanation: Data is fetched from the API, displayed, and cached.

Example 2:

Input: User goes offline.
Output: Connection status: "Offline", Task list displaying "Task 1" and "Task 2" (from cache)
Explanation: The application detects the offline event and displays the cached data.

Example 3:

Input: User goes offline, no cached data exists.
Output: Connection status: "Offline", Message: "Offline - No data available"
Explanation: The application detects the offline event and displays the "No data available" message.

Example 4:

Input: User comes back online.
Output: Connection status: "Online", Task list displaying updated data from the API (assuming API data has changed).
Explanation: The application detects the online event, fetches data from the API, and updates the task list.

Constraints

• Angular Version: Use the latest stable version of Angular.
• Service Worker Library: Use @angular-builders/custom-webpack for Service Worker integration.
• Mock API: Use a local JSON file (e.g., tasks.json) for the mock API. The file should contain an array of task objects, each with an id and a title property.
• Data Synchronization: Assume that any offline changes are discarded upon successful synchronization. No local storage or modification tracking is required.
• Performance: The application should load and display data reasonably quickly, even when offline. Avoid unnecessary re-renders.

Notes

• Focus on the core functionality of caching and synchronization. Styling and advanced features are not required.
• The Service Worker configuration should be straightforward and easy to understand.
• Consider using Angular's HttpClient for fetching data from the mock API.
• Debugging Service Workers can be tricky. Use your browser's developer tools to inspect the Service Worker lifecycle and cache.
• The mock API file should be placed in a location accessible to the Angular application (e.g., in the src/assets folder).
• Remember to run ng build --prod to generate the production build with the Service Worker.