AgentSkillsCN

pwa-audit-sunnahsleep

对 SunnahSleep 的 PWA 特性进行审计与优化。适用于离线支持、Service Worker、清单文件、缓存机制，或安装流程的开发与维护时使用。涵盖 vite-plugin-pwa、Workbox，以及 PWA 的最佳实践。

SKILL.md
--- frontmatter
name: pwa-audit-sunnahsleep
description: Audits PWA aspects of SunnahSleep. Use when working on offline support, service worker, manifest, caching, or install flow. Covers vite-plugin-pwa, Workbox, and PWA best practices.

PWA Audit

Current Setup

  • •Build: vite-plugin-pwa
  • •Manifest: public/manifest.webmanifest (or generated)
  • •Service Worker: Workbox (via plugin)
  • •Offline: Quran audio cached

Audit Checklist

Manifest

  • • name, short_name, description
  • • icons: 192x192, 512x512
  • • start_url, display: standalone
  • • theme_color, background_color
  • • scope

Service Worker

  • • Precache app shell (HTML, JS, CSS)
  • • Runtime cache for API responses (prayer times—short TTL)
  • • Cache Quran audio (cdn.islamic.network)
  • • Offline fallback page
  • • Skip waiting / update prompt for new versions

Caching Strategy

ResourceStrategyNotes
App shellprecacheStaleWhileRevalidate
Quran audioruntime cacheCacheFirst, long TTL
Prayer APInetwork firstShort cache, fallback to stale
Imagescache firstStatic assets

Install

  • • beforeinstallprompt handled (if desired)
  • • /install page with platform-specific instructions
  • • Display mode: standalone works on home screen

Performance

  • • Lazy load routes where possible
  • • Image optimization (WebP, sizes)
  • • Font loading (Amiri, Inter) – preload critical

Common Issues

  1. •Cache invalidation – New deploy must update SW; use Workbox’s skipWaiting
  2. •API in SW – Fetch from SW can have different CORS behavior
  3. •Storage – localStorage available; IndexedDB for larger data if needed
  4. •Notifications – Require user permission; document in privacy policy