Web应用离线数据处理及技术栈迁移技术咨询

Hey Jake, great question—migrating an offline-first app to a newer stack can feel tricky, but Angular 5 + NgRx paired with .NET Core actually makes this pattern more structured and maintainable than your old Angular 1.6/Breeze setup. Let’s break this down step by step, tailored to your requirements:

We’ll stick with your original offline-first principle, but streamline the flow with the new stack:

• Offline: User interactions modify local state (persisted to Local Storage/IndexedDB) and queue pending changes for later sync.
• Online: Background sync via Web Workers pulls the latest project data, and queued offline changes are pushed to the backend.
• NgRx will centralize all state management—including online/offline status, project data, and pending actions—replacing BreezeJS’s state handling. .NET Core Web API will handle backend sync, with Azure SQL remaining your persistent data source.

2.1 Track Online/Offline State #

First, we need to detect network changes and feed that status into NgRx. Create a simple service to listen to browser events:

@Injectable()
export class NetworkService {
  constructor(private store: Store<AppState>) {
    // Listen for network status changes
    window.addEventListener('online', () => this.store.dispatch(new SetOnlineAction()));
    window.addEventListener('offline', () => this.store.dispatch(new SetOfflineAction()));
    // Initialize with current network status
    this.store.dispatch(navigator.onLine ? new SetOnlineAction() : new SetOfflineAction());
  }
}

Then update your NgRx reducer to maintain this state:

const initialState: NetworkState = { isOnline: navigator.onLine };

export function networkReducer(state = initialState, action: NetworkActions): NetworkState {
  switch (action.type) {
    case NetworkActionTypes.SetOnline:
      return { ...state, isOnline: true };
    case NetworkActionTypes.SetOffline:
      return { ...state, isOnline: false };
    default:
      return state;
  }
}

2.2 Persist State to Local Storage (Replace Breeze) #

Use @ngrx/store-localstorage to automatically sync your project data and pending actions to Local Storage. This eliminates manual Local Storage calls and keeps your state consistent across page reloads:

// Add this meta-reducer to your store config
import { localStorageSync } from '@ngrx/store-localstorage';

export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({
    keys: ['projectData', 'pendingActions'], // State branches to persist
    rehydrate: true, // Load saved state when the app initializes
    storage: window.localStorage // Swap to IndexedDB via `localForage` if you need more space
  })(reducer);
}

// In your AppModule
StoreModule.forRoot(reducers, {
  metaReducers: [localStorageSyncReducer]
})

Pro tip: If your project data exceeds Local Storage’s ~5MB limit, use IndexedDB instead—libraries like localForage or @ngrx/store-indexeddb make this easy to integrate.

2.3 Web Workers for Background Sync #

Angular 5 supports Web Workers natively—use one to pull the latest project data in the background without blocking the UI:

1. Generate a worker: ng generate web-worker data-sync
2. Worker logic to fetch incremental updates:

// data-sync.worker.ts
addEventListener('message', ({ data }) => {
  if (data.type === 'FETCH_LATEST_PROJECT') {
    // Fetch only changes since the last sync
    fetch(`/api/projects/${data.projectId}?lastUpdated=${data.lastUpdated}`)
      .then(res => res.json())
      .then(project => postMessage({ type: 'PROJECT_SYNCED', payload: project }))
      .catch(err => postMessage({ type: 'SYNC_FAILED', payload: err }));
  }
});

3. NgRx Effect to trigger sync when the app goes online:

@Injectable()
export class ProjectEffects {
  private syncWorker: Worker;

  constructor(private actions$: Actions, private store: Store<AppState>) {
    this.syncWorker = new Worker('./data-sync.worker', { type: 'module' });
    // Handle responses from the worker
    this.syncWorker.addEventListener('message', ({ data }) => {
      if (data.type === 'PROJECT_SYNCED') {
        this.store.dispatch(new UpdateProjectAction(data.payload));
      }
    });
  }

  // Trigger sync when network comes back online
  syncOnOnline$ = createEffect(() =>
    this.actions$.pipe(
      ofType(NetworkActionTypes.SetOnline),
      withLatestFrom(this.store.select(selectCurrentProject)),
      tap(([_, project]) => {
        this.syncWorker.postMessage({
          type: 'FETCH_LATEST_PROJECT',
          projectId: project.id,
          lastUpdated: project.lastUpdated
        });
      })
    ), { dispatch: false }
  );
}

2.4 Handle Offline Actions #

When offline, queue all user modifications as pending actions in NgRx. These will sync to the backend automatically when the network returns:

1. Update your project state to include pending actions:

export interface ProjectState {
  currentProject: Project;
  pendingActions: PendingAction[]; // Structure: { type: string, payload: any }
}

2. Reducer logic to queue offline changes:

case ProjectActionTypes.UpdateProjectOffline:
  return {
    ...state,
    currentProject: action.payload,
    pendingActions: [
      ...state.pendingActions,
      { type: 'UPDATE_PROJECT', payload: action.payload }
    ]
  };

3. Effect to sync pending actions when online:

syncPendingActions$ = createEffect(() =>
  this.actions$.pipe(
    ofType(NetworkActionTypes.SetOnline),
    withLatestFrom(this.store.select(selectPendingActions)),
    mergeMap(([_, actions]) =>
      forkJoin(
        actions.map(action =>
          this.http.put(`/api/projects/${action.payload.id}`, action.payload).pipe(
            map(() => new SyncActionSuccess(action)),
            catchError(() => of(new SyncActionFail(action)))
          )
        )
      )
    )
  )
);

// Reducer to remove successfully synced actions
case ProjectActionTypes.SyncActionSuccess:
  return {
    ...state,
    pendingActions: state.pendingActions.filter(a => a !== action.payload)
  };

3.1 Sync-Focused Endpoints #

Design endpoints to support incremental sync and batch processing of pending actions:

• Incremental Fetch: Return only data updated since the last sync to reduce bandwidth:

[HttpGet("{id}")]
public async Task<IActionResult> GetProject(int id, [FromQuery] DateTime? lastUpdated)
{
  var project = await _dbContext.Projects.FindAsync(id);
  if (lastUpdated.HasValue && project.LastUpdated <= lastUpdated.Value)
  {
    return Ok(null); // No changes since the last sync
  }
  return Ok(project);
}

• Batch Sync: Accept multiple pending actions to resolve offline changes in one call:

[HttpPost("sync")]
public async Task<IActionResult> BatchSync([FromBody] List<PendingAction> actions)
{
  foreach (var action in actions)
  {
    switch (action.Type)
    {
      case "UPDATE_PROJECT":
        var project = await _dbContext.Projects.FindAsync(action.Payload.Id);
        // Optimistic concurrency: only update if the client's version is newer
        if (project.LastUpdated < action.Payload.LastUpdated)
        {
          _dbContext.Entry(project).CurrentValues.SetValues(action.Payload);
          project.LastUpdated = DateTime.UtcNow;
        }
        break;
      // Handle CREATE/DELETE actions similarly
    }
  }
  await _dbContext.SaveChangesAsync();
  return Ok();
}

3.2 Concurrency Control #

Add a LastUpdated datetime column to your Azure SQL Projects table. This lets you detect sync conflicts—if the server’s LastUpdated timestamp is newer than the client’s, it means another user modified the data while the client was offline. You can return a conflict error and let the user resolve it (e.g., merge changes or overwrite).

• Conflict Resolution: Decide on a strategy upfront (server-first, client-first, or user mediation) to prevent data loss.
• Web Worker Error Handling: Add retry logic (like exponential backoff) in the worker for failed syncs to handle flaky networks.
• Initial Load: On app start, load cached data first to show the UI immediately, then sync in the background.
• Storage Limits: Test edge cases where Local Storage is full—fall back to IndexedDB or warn users if needed.

内容的提问来源于stack exchange，提问作者JakeHova