Что такое ПВА?

PWA означает прогрессивные веб-приложения, механизм, который позволяет использовать веб-приложения как нативные приложения.

следующий-pwa

Next-pwa — это библиотека, упрощающая реализацию PWA с помощью Next.js, и она делает такие вещи, как кэширование за кулисами, которые реализованы с помощью serviceWorker.
Еще один известный — next-offline, но next- pwa обновляется чаще и проще в использовании лично для меня, поэтому я хотел бы использовать next-pwa.

1. Установка

Установите с помощью следующих команд. ("документ")

## npm
npm i next-pwa

## yarn
yarn add next-pwa

2. Отредактируйте next.config.js

Создайте next.config.js в корневом каталоге, и я написал следующее

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
})

module.exports = withPWA({
  // next.js config
  reactStrictMode: false,
  swcMinify: false,
})

В next-pwa модулей node_modules есть файл с именем cache.js, в котором прописаны настройки кеша. (По умолчанию кеш не кэшируется разработчиком пряжи.)

3. Отредактируйте файл manifest.json.

В каталоге /public отредактируйте manifest.json.

{
 "name": "PWA App",
  "short_name": "App",
 "description": "An example of a PWA using Next.js and TypeScript",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#FFFFFF",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Выше «src»: «/android-chrome-192x192.png» указывает изображение, помещенное в /public.

4. Создайте _document.tsx

Создайте _document.tsx в каталоге src/pages и загрузите иконки, manifest.json и т.д. в ‹Head›.

<link rel="manifest" href="/manifest.json" />

5. Настройка .gitignore

Если PWA успешно активирована,

  • sw.js.
  • sw.js.map
  • версель.svg
  • рабочий ящик***.js
  • рабочий ящик***.js.map

создаются в общей папке. Поскольку эти файлы постоянно обновляются, нет необходимости отправлять их на GitHub, поэтому их следует удалить.

Добавьте следующее в .gitignore

# PWA files
*/public/sw.js
**/public/workbox-.js
**/public/worker-.js
**/public/sw.js.map
**/public/workbox-.js.map
**/public/worker-.js.map

(Дополнительно) Отключение PWA в разработке

Вы можете отключить PWA в среде разработки, и в этом случае добавьте отключить в next.config.js.

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === "development",
})

module.exports = withPWA({
  // next.js config
  reactStrictMode: false,
  swcMinify: false,
})

Давайте на самом деле выполним это.

Выполните следующую команду, в моем случае

## npm
npm run build
npm run dev

Удачного кодирования!