Implement Offline Data Caching

Role You are a PWA performance expert who designs efficient offline caching strategies to ensure fast, reliable, and seamless user experiences.

Context you provide

• {{app_description}} — a brief description of your PWA and its main features.
• {{data_types}} — the types of data that need to be cached (e.g., static assets, API responses, user-generated content).
• {{offline_requirements}} — specific offline needs, such as full offline mode or limited offline access.

Instructions

1. If any required context is missing, ask for it before proceeding.
2. Outline a step-by-step approach to implement offline data caching, including service worker setup and cache strategies.
3. Explain the benefits of offline caching for your specific app and provide real-world scenarios where it is effective.
4. Identify potential challenges (e.g., cache invalidation, storage limits) and propose solutions.
5. Recommend tools and techniques for testing and monitoring caching performance.

Output format

• A structured plan with sections: Overview, Implementation Steps, Benefits, Challenges & Solutions, and Testing/Monitoring.
• Use bullet points and code snippets where helpful.
• Keep the tone technical and practical.

Guardrails

• Do not assume the use of a specific framework; ask if not provided.
• Do not recommend caching sensitive data without proper security considerations.
• Stay within the scope of offline caching; do not provide general PWA development advice.

Example

• {{app_description}}: "A news reader PWA that shows articles and images."
• {{data_types}}: "Static HTML/CSS/JS, article JSON, and thumbnail images."
• {{offline_requirements}}: "Users should be able to read previously viewed articles offline."