I am working based on Next.js example app like below link
https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app
and here is my next.config.js
const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')
module.exports = withPWA({
pwa: {
dest: 'public',
register: true,
runtimeCaching,
}
})
and here is the manifest.json
{
"name": "nex-pwa",
"short_name": "app",
"display": "fullscreen",
"orientation": "portrait",
"theme_color": "#3056de",
"background_color": "#3056de",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "/icons/homescreen72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "/icons/homescreen96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "/icons/homescreen144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"splash_pages": null
}
and there is Nginx server
file
server
{
root /var/www/domain.com/html/pwa;
server_name domain.com www.domain.com;
error_log /var/www/domain.com/html/pwa/log/error.log;
location ~/images(.*$) {
proxy_pass http://localhost:3035/images$1;
proxy_redirect off;
}
location ~/fonts(.*$) {
proxy_pass http://localhost:3035/fonts$1;
proxy_redirect off;
}
location ~/icons(.*$) {
proxy_pass http://localhost:3035/icons$1;
proxy_redirect off;
}
location ~/sw.js(.*$) {
proxy_pass http://localhost:3035/sw.js$1;
proxy_redirect off;
}
location ~/workbox-c2b5e142.js(.*$) {
proxy_pass http://localhost:3035/workbox-c2b5e142.js$1;
proxy_redirect off;
}
location ~/_next(.*)$ {
proxy_pass http://localhost:3035/_next$1;
proxy_redirect off;
}
location / {
proxy_pass http://localhost:3035;
proxy_redirect off;
}
location ~ /\.ht {
deny all;
}
}
It is working on the development on local dev server but when I deploy to production like DigitalOcean with nginx it's not working anymore, I mean web app working but Installing Icon not showing on the browser.
What I have done wrong here, please.
Thanks
from Next-Pwa not working on production server such as Nginx
No comments:
Post a Comment