Swavoti next pwa docs
@swavoti/next-pwa provides the industrial-grade foundation for Progressive Web Applications in the Next.js ecosystem. Zero-configuration by default, yet infinitely extensible for high-traffic production environments.
Installation
Install the package using your preferred package manager.
npm
npm install @swavoti/next-pwapnpm
pnpm add @swavoti/next-pwayarn
yarn add @swavoti/next-pwaCore Implementation
To enable PWA support, wrap your configuration object in the withPWA higher-order function.
// next.config.ts or next.config.js
import { withPWA } from '@swavoti/next-pwa';
const nextConfig = {
reactStrictMode: true,
// Your standard Next.js configuration
};
export default withPWA(nextConfig);Turbopack Configuration
Enable or disable Turbopack in your package.json scripts.
// package.json scripts
// To ENABLE Turbopack (Default for Next.js 15+)
"dev": "next dev --turbopack"
// To DISABLE Turbopack (Revert to standard Webpack)
"dev": "next dev"Modern Runtimes (Bun & Deno)
Full compatibility with Bun and Deno.
Using Bun
bun add @swavoti/next-pwaUsing Deno
deno install npm:@swavoti/next-pwaBackground Sync
This package includes boilerplate support for Background Sync. Register a sync tag to defer actions until connectivity is restored. The service worker is pre-configured to listen for the 'sync-data' tag.
// Registration for Background Sync
// The service worker is configured to listen for the 'sync-data' tag.
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready.then((registration) => {
return registration.sync.register('sync-data');
}).catch((err) => {
console.error('Background Sync registration failed:', err);
});
}Performance Enhancement
1. Asset Pre-caching
Only pre-cache critical assets. Use the publicExcludes option to manage cache size.
2. Stale-While-Revalidate
Provide an instant UI feel by serving cached content while updating in the background.
Advanced Configuration
// next.config.ts advanced setup
import { withPWA } from '@swavoti/next-pwa';
export default withPWA({
dest: 'public',
register: true,
skipWaiting: true,
disable: process.env.NODE_ENV === 'development',
runtimeCaching: [
{
urlPattern: /^https://fonts\.(?:googleapis|gstatic)\.com\/.*/i,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts',
expiration: {
maxEntries: 10,
maxAgeSeconds: 365 * 24 * 60 * 60 // 1 Year
}
}
}
]
});