Что такое ПВА?
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
Удачного кодирования!