docs: add service workers reference to angular developer skill

Author: aminesbdev

skills/dev-skills/angular-developer/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: angular-developer
-description: Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
+description: Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
 license: MIT
 metadata:
   author: Copyright 2026 Google LLC
@@ -17,7 +17,7 @@ metadata:
 
 ## Creating New Projects
 
-If no guidelines are provided by the user, here are same default rules to follow when creating a new Angular project:
+If no guidelines are provided by the user, here are some default rules to follow when creating a new Angular project:
 
 1. Use the latest stable version of Angular unless the user specifies otherwise.
 2. Use Signals Forms for form management in new projects (available in Angular v21 and newer) [Find out more](references/signal-forms.md).
@@ -61,12 +61,18 @@ When managing state and data reactivity, use Angular Signals and consult the fol
 - **Async Reactivity (`resource`)**: Fetching asynchronous data directly into signal state. Read [resource.md](references/resource.md)
 - **Side Effects (`effect`)**: Logging, third-party DOM manipulation (`afterRenderEffect`), and when NOT to use effects. Read [effects.md](references/effects.md)
 
+## HTTP Communication
+
+When communicating with backend services, use Angular HTTP APIs and consult the following reference:
+
+- **HTTP Client and Resources**: `provideHttpClient`, `HttpClient`, interceptors, and `httpResource`. Read [http-client.md](references/http-client.md)
+
 ## Forms
 
 In most cases for new apps, **prefer signal forms**. When making a forms decision, analyze the project and consider the following guidelines:
 
-- if the application is using v21 or newer and this is a new form, **prefer signal forms**.
-  -For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy.
+- If the application is using v21 or newer and this is a new form, **prefer signal forms**.
+- For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy.
 
 - **Signal Forms**: Use signals for form state management. Read [signal-forms.md](references/signal-forms.md)
 - **Template-driven forms**: Use for simple forms. Read [template-driven-forms.md](references/template-driven-forms.md)
@@ -82,6 +88,12 @@ When implementing dependency injection in Angular, follow these guidelines:
 - **Injection Context**: Where `inject()` is allowed, `runInInjectionContext`, and `assertInInjectionContext`. Read [injection-context.md](references/injection-context.md)
 - **Hierarchical Injectors**: The `EnvironmentInjector` vs `ElementInjector`, resolution rules, modifiers (`optional`, `skipSelf`), and `providers` vs `viewProviders`. Read [hierarchical-injectors.md](references/hierarchical-injectors.md)
 
+## Pipes
+
+When formatting values in templates, creating custom pipes, or reusing pipe-like logic in TypeScript, consult the following reference. Prefer pipes in templates; outside templates, avoid injecting pipe classes just to call `transform()`.
+
+- **Pipes**: Built-in pipe imports, custom pipe naming and implementation, pure vs impure pipes, and TypeScript reuse patterns using standalone formatting functions or extracted plain functions. Read [pipes.md](references/pipes.md)
+
 ## Angular Aria
 
 When building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:
@@ -119,13 +131,14 @@ When writing or updating tests, consult the following references based on the ta
 - **Fundamentals**: Best practices for unit testing (Vitest), async patterns, and `TestBed`. Read [testing-fundamentals.md](references/testing-fundamentals.md)
 - **Component Harnesses**: Standard patterns for robust component interaction. Read [component-harnesses.md](references/component-harnesses.md)
 - **Router Testing**: Using `RouterTestingHarness` for reliable navigation tests. Read [router-testing.md](references/router-testing.md)
-- **End-to-End (E2E) Testing**: Best practices for E2E tests with Cypress. Read [e2e-testing.md](references/e2e-testing.md)
+- **End-to-End (E2E) Testing**: Setting up and running E2E tests. Read [e2e-testing.md](references/e2e-testing.md)
 
 ## Tooling
 
 When working with Angular tooling, consult the following references:
 
 - **Angular CLI**: Creating applications, generating code (components, routes, services), serving, and building. Read [cli.md](references/cli.md)
+- **Service Workers / PWA**: Enabling offline support, precaching, runtime caching, and update prompts. Read [service-workers.md](references/service-workers.md)
 - **Code Modernization**: Automatically refactoring to modern standards using migrations. Read [migrations.md](references/migrations.md)
 - **Angular MCP Server**: Available tools, configuration, and experimental features. Read [mcp.md](references/mcp.md)
 - **Environment Configuration**: Strategies for build-time and runtime configuration. Read [environment-configuration.md](references/environment-configuration.md)

skills/dev-skills/angular-developer/references/service-workers.md

@@ -0,0 +1,75 @@
+# Angular Service Workers
+
+Angular service workers enable Progressive Web App features such as offline support, precaching, runtime caching, and update handling.
+
+## When to Use Service Workers
+
+Use service workers when you want to:
+
+- make an application available offline after first load,
+- precache the app shell and core assets,
+- cache API responses or static assets for faster repeat visits,
+- provide update prompts so users can refresh to the latest build.
+
+## Setup
+
+Prefer Angular's built-in service worker support over a custom implementation.
+
+1. Add the package with `ng add @angular/pwa` when needed.
+2. Register the service worker with `provideServiceWorker` in the app configuration.
+3. Review or create an `ngsw-config.json` file for asset and data groups.
+4. Build and deploy the app in production mode to test the worker behavior.
+
+## Recommended Patterns
+
+- Use `assetGroups` for static files such as JS, CSS, images, and fonts.
+- Use `dataGroups` for API requests that should be cached with a strategy like `networkFirst`.
+- Use `cacheFirst` or `staleWhileRevalidate` for assets that change infrequently.
+- Use `SwUpdate` to detect new versions and invite the user to refresh.
+
+## Update Handling with SwUpdate
+
+Use `SwUpdate` to react to available versions and activate updates with a modern Angular pattern:
+
+```ts
+import {Component, DestroyRef, inject, signal} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {SwUpdate} from '@angular/service-worker';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    @if (updatesAvailable()) {
+      <button type="button" (click)="reload()">Update available</button>
+    }
+  `,
+})
+export class AppComponent {
+  private readonly updates = inject(SwUpdate);
+  readonly updatesAvailable = signal(false);
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+
+    this.updates.versionUpdates.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => {
+      this.updatesAvailable.set(true);
+    });
+  }
+
+  reload(): void {
+    this.updates.activateUpdate().then(() => window.location.reload());
+  }
+}
+```
+
+## Avoid Common Pitfalls
+
+- Avoid caching sensitive or user-specific data unless that behavior is explicitly required.
+- Do not rely on service workers in development; test with a production build.
+- Keep caching policies narrow and versioned to avoid stale content.
+
+## Reference
+
+For full details, see the official Angular documentation:
+
+- https://angular.dev/ecosystem/service-workers