now builder for Next.js PWA. WARNING, This project is in experimental stage. APIs and others would be changed
now init nextjs
cd nextjs
import React, { useEffect } from 'react';
function Home() {
...
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(registration => {
console.log('service worker registration successful');
})
.catch(err => {
console.warn('service worker registration failed', err.message);
});
}
}, []);
return (
...
);
}
const Head = props => (
<NextHead>
<meta charSet="UTF-8" />
...
<link rel="icon" href="/static/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
...
</NextHead>
);
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "now-next-pwa",
"config": {
"workbox": {
"globPatterns": [],
"globIgnores": [],
"importScripts": [
"libs/sw-imports.js"
],
"offlineGoogleAnalytics": false
},
"manifest": {
"name": "NEXT-PWA-BASIC",
"short_name": "NEXT-PWA-BASIC",
"icons": [
{
"src": "/static/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
}
}
]
}
now
or you can test in development mode of now
now dev
MIT @ Jimmy Moon