How do I implement retry + offline support with Resource API?

import { Component, signal, resource, effect } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  template: `
    @if (users.status() === 'loading') { Loading... }
    @else if (users.hasValue()) {
      @for (user of users.value(); track user.id) {
        <div>{{ user.name }}</div>
      }
    } @else if (users.status() === 'error' && !isOnline()) {
      <div>Offline - Showing cached data</div>
    }
  `
})
export class UserList {
  // Track online status
  isOnline = signal(navigator.onLine);
  
  users = resource({
    loader: async () => {
      if (!this.isOnline()) {
        // Return cached data during offline
        return localStorage.getItem('users') ? JSON.parse(localStorage.getItem('users')!) : [];
      }
      
      // Network request with retry
      const response = await fetch('/api/users');
      if (!response.ok) throw new Error('Failed');
      
      const data = await response.json();
      localStorage.setItem('users', JSON.stringify(data));
      return data;
    },
    refetchOn: [this.isOnline] // Auto-refetch when online changes
  });

  constructor() {
    // Listen for online/offline events
    window.addEventListener('online', () => this.isOnline.set(true));
    window.addEventListener('offline', () => this.isOnline.set(false));
    
    // Auto-retry when back online
    effect(() => {
      if (this.isOnline()) {
        this.users.refetch();
      }
    });
  }
}