How does it handle API caching?

It provides standardized patterns for NetworkFirst and StaleWhileRevalidate strategies to ensure data freshness while maintaining offline availability.

Is background synchronization supported?

Yes, the skill includes implementation patterns for the Workbox Background Sync plugin to queue and retry API requests once a connection is restored.

Can I use this skill with Vite projects?

Yes, it includes specific integration patterns for VitePWA, making it easy to configure manifest files and runtime caching in modern frontend environments.

What version of Workbox does this skill support?

This skill is optimized for Workbox 7.x, providing the latest patterns for service worker management and lifecycle control.

Does it include UI components for offline states?

While it focuses on logic, it provides essential React hooks for detecting online status and handling the 'beforeinstallprompt' event for custom UI triggers.

Progressive Web App Patterns

Name: Progressive Web App Patterns
Author: yonatangross

byyonatangross

•

Mobile Development

Implements robust offline-first strategies and service worker lifecycles using Workbox 7.x for modern web applications.

This skill provides comprehensive, production-ready patterns for building Progressive Web Apps (PWAs). It equips developers with standardized Workbox 7.x configurations, efficient caching strategies such as NetworkFirst and CacheFirst, and essential React hooks for managing installation prompts and online status. Whether you are integrating PWA features via Vite or manually configuring service workers, this skill ensures best practices for offline support, background synchronization, and app-like experiences while avoiding common pitfalls like storage bloat and security risks.

주요 기능

01VitePWA integration and Web App Manifest configurations

02Standardized caching strategies including CacheFirst, NetworkFirst, and StaleWhileRevalidate

03Background synchronization patterns for reliable offline API data submission

04Ready-to-use React hooks for offline status and installation prompts

05Workbox 7.x service worker lifecycle management and generation patterns

0669 GitHub stars

사용 사례

01Adding offline-first functionality to an existing React or Vite web application

02Implementing native-like 'Add to Home Screen' prompts and install logic

03Optimizing asset delivery and performance through advanced service worker caching

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit pwa-patterns

For use in Claude.ai and ChatGPT

Download Skill