Перейти к содержимому
Fubon

Next PWA

Установка

Окно терминала
npm i next-pwa

Настройки

./next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === "development",
})


module.exports = withPWA({
  // next.js config
});

Настройки ES

./next.config.js
/** @type {import('next').NextConfig} */


import withPWA from 'next-pwa'


const nextConfig = withPWA({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development',
})


export default nextConfig({})

Manifest Generator

simicart
manifest-gen
app-manifest

Manifest JSON

./public/manifest.json
{
  "name": "Fubon PWA",
  "short_name": "Fubon PWA",
  "description": "A PWA boilerplate with Next Js TypeScript",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#FFFFFF",
  "background_color": "#FFFFFF",
  "scope": "/",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}
./app/layout.tsx
export const metadata = {
  manifest: '/manifest.json',
}

Auto Generated PWA files

.gitignore
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map