next pwa
5.6.1
Этот плагин работает на Workbox и других хороших вещах.
Поделитесь своим потрясающим проектом PWA здесь
Функции
next-i18nextblitz.config.js ).module.js , когда для next.config.js для experimental.modern установлено значение trueПРИМЕЧАНИЕ 1. Версия
next-pwa2.0.0+ должна работать только сnext.js9.1+, а статические файлы следует обслуживать только черезpublicкаталог. Это упростит задачу.ПРИМЕЧАНИЕ 2. Если вы столкнулись с ошибкой
TypeError: Cannot read property **'javascript' of undefined**во время сборки, рассмотрите возможность обновления до webpack5 в файлеnext.config.js.
Если вы новичок в
next.jsилиreact.js, возможно, вам стоит сначала изучить документ next.js или next.js. Затем начните с простого примера или примера прогрессивного веб-приложения в репозитории next.js.
yarn add next-pwa Обновите или создайте next.config.js с помощью
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
} )
module . exports = withPWA ( {
// next.js config
} ) После запуска next build в вашем public будут созданы два файла: workbox-*.js и sw.js , которые будут автоматически обслуживаться статически.
Если вы используете Next.js версии 9 или новее, пропустите приведенные ниже параметры и перейдите к шагу 2.
Если вы используете Next.js старше версии 9, вам нужно будет выбрать вариант ниже, прежде чем переходить к шагу 2.
Скопируйте файлы на свой хостинг статических файлов, чтобы они были доступны по следующим путям: https://yourdomain.com/sw.js и https://yourdomain.com/workbox-*.js .
Одним из примеров является использование службы хостинга Firebase для статического размещения этих файлов. Вы можете автоматизировать этап копирования с помощью сценариев в рабочем процессе развертывания.
По соображениям безопасности вы должны размещать эти файлы непосредственно из своего домена. Если контент доставляется с использованием перенаправления, браузер откажется запускать сервис-воркера.
При получении HTTP-запроса проверьте, запрошены ли эти файлы, а затем верните эти статические файлы.
Пример server.js
const { createServer } = require ( 'http' )
const { join } = require ( 'path' )
const { parse } = require ( 'url' )
const next = require ( 'next' )
const app = next ( { dev : process . env . NODE_ENV !== 'production' } )
const handle = app . getRequestHandler ( )
app . prepare ( ) . then ( ( ) => {
createServer ( ( req , res ) => {
const parsedUrl = parse ( req . url , true )
const { pathname } = parsedUrl
if ( pathname === '/sw.js' || / ^/(workbox|worker|fallback)-w+.js$ / . test ( pathname ) ) {
const filePath = join ( __dirname , '.next' , pathname )
app . serveStatic ( req , res , filePath )
} else {
handle ( req , res , parsedUrl )
}
} ) . listen ( 3000 , ( ) => {
console . log ( `> Ready on http://localhost: ${ 3000 } ` )
} )
} )Следующая настройка не имеет ничего общего с плагином
next-pwa, и вы, вероятно, уже настроили его. Если нет, то настройте их.
Создайте файл manifest.json в своей public папке:
{
"name" : " PWA App " ,
"short_name" : " App " ,
"icons" : [
{
"src" : " /icons/android-chrome-192x192.png " ,
"sizes" : " 192x192 " ,
"type" : " image/png " ,
"purpose" : " any maskable "
},
{
"src" : " /icons/android-chrome-384x384.png " ,
"sizes" : " 384x384 " ,
"type" : " image/png "
},
{
"src" : " /icons/icon-512x512.png " ,
"sizes" : " 512x512 " ,
"type" : " image/png "
}
],
"theme_color" : " #FFFFFF " ,
"background_color" : " #FFFFFF " ,
"start_url" : " / " ,
"display" : " standalone " ,
"orientation" : " portrait "
} Добавьте следующее в _document.jsx или _app.tsx в :
< meta name =" application-name " content =" PWA App " />
< meta name =" apple-mobile-web-app-capable " content =" yes " />
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " />
< meta name =" apple-mobile-web-app-title " content =" PWA App " />
< meta name =" description " content =" Best PWA App in the world " />
< meta name =" format-detection " content =" telephone=no " />
< meta name =" mobile-web-app-capable " content =" yes " />
< meta name =" msapplication-config " content =" /icons/browserconfig.xml " />
< meta name =" msapplication-TileColor " content =" #2B5797 " />
< meta name =" msapplication-tap-highlight " content =" no " />
< meta name =" theme-color " content =" #000000 " />
< link rel =" apple-touch-icon " href =" /icons/touch-icon-iphone.png " />
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" /icons/touch-icon-ipad.png " />
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" /icons/touch-icon-iphone-retina.png " />
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" /icons/touch-icon-ipad-retina.png " />
< link rel =" icon " type =" image/png " sizes =" 32x32 " href =" /icons/favicon-32x32.png " />
< link rel =" icon " type =" image/png " sizes =" 16x16 " href =" /icons/favicon-16x16.png " />
< link rel =" manifest " href =" /manifest.json " />
< link rel =" mask-icon " href =" /icons/safari-pinned-tab.svg " color =" #5bbad5 " />
< link rel =" shortcut icon " href =" /favicon.ico " />
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:300,400,500 " />
< meta name =" twitter:card " content =" summary " />
< meta name =" twitter:url " content =" https://yourdomain.com " />
< meta name =" twitter:title " content =" PWA App " />
< meta name =" twitter:description " content =" Best PWA App in the world " />
< meta name =" twitter:image " content =" https://yourdomain.com/icons/android-chrome-192x192.png " />
< meta name =" twitter:creator " content =" @DavidWShadow " />
< meta property =" og:type " content =" website " />
< meta property =" og:title " content =" PWA App " />
< meta property =" og:description " content =" Best PWA App in the world " />
< meta property =" og:site_name " content =" PWA App " />
< meta property =" og:url " content =" https://yourdomain.com " />
< meta property =" og:image " content =" https://yourdomain.com/icons/apple-touch-icon.png " />
Совет: поместите метатег заголовка области
viewportв_app.jsа не в_document.jsесли он вам нужен.
< meta
name = 'viewport'
content = 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/ > Резервные варианты в автономном режиме полезны, когда не удалось получить данные как из кеша, так и из сети: обслуживается предварительно кэшированный ресурс, а не отображается ошибка браузера.
Чтобы начать, просто добавьте страницу /_offline , например pages/_offline.js или pages/_offline.jsx или pages/_offline.ts или pages/_offline.tsx . Тогда все готово! Когда пользователь находится в автономном режиме, все страницы, которые не кэшируются, перейдут в состояние «/_offline».
Используйте этот пример, чтобы увидеть его в действии
next-pwa помогает вам предварительно кэшировать эти ресурсы при первой загрузке, а затем внедрить резервный обработчик в плагин handlerDidError во все конфигурации runtimeCaching , чтобы предварительно кэшированные ресурсы обслуживались в случае сбоя выборки.
Вы также можете настроить precacheFallback.fallbackURL в записи конфигурации runtimeCaching для реализации аналогичной функциональности. Разница в том, что описанный выше метод основан на типе ресурса, а этот метод основан на сопоставлении шаблона URL-адреса. Если эта конфигурация задана в записи конфигурации runtimeCaching, резервный вариант на основе типа ресурса будет автоматически отключен для этого конкретного шаблона URL-адреса во избежание конфликта.
Существуют параметры, которые вы можете использовать для настройки поведения этого плагина, добавив объект pwa в следующую конфигурацию в next.config.js :
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
// disable: process.env.NODE_ENV === 'development',
// register: true,
// scope: '/app',
// sw: 'service-worker.js',
//...
} )
module . exports = withPWA ( {
// next.js config
} )falsedisable: false , чтобы он создавал сервисного работника как в dev , так и в proddisable: true , чтобы полностью отключить PWAdev , вы можете disable: process.env.NODE_ENV === 'development'truefalse если вы хотите самостоятельно обрабатывать работника службы регистрации, это можно сделать в componentDidMount вашего корневого приложения. в качестве примера вы можете рассмотреть файл Register.js.basePath в next.config.js или //app , чтобы путь в /app был PWA, а другие — нет./sw.jspublic папке из предварительного кэширования.['!noprecache/**/*'] — это означает, что поведение по умолчанию будет предварительно кэшировать все файлы внутри вашей public папки, кроме файлов внутри папки /public/noprecache . Вы можете просто поместить файлы в эту папку, чтобы не кэшировать их без этой настройки.['!img/super-large-image.jpg', '!fonts/not-used-fonts.otf'].next/static (или вашей пользовательской сборки).[][/chunks/images/.*$/] — не кэшировать файлы в папке .next/static/chunks/images (настоятельно рекомендуется это для работы с плагином next-optimized-images )truetruecacheStartUrl установлено значение true/login , рекомендуется настроить этот перенаправленный URL-адрес для лучшего взаимодействия с пользователем.undefineddynamicStartUrlRedirect установлено значение true/_offline , например pages/_offline.js , и все готово, настройка не требуется.objectfallbacks.document — резервный маршрут для документа (страницы), по умолчанию /_offline если вы создали эту страницу.fallbacks.image — резервный маршрут для изображения, по умолчанию нет.fallbacks.audio — резервный маршрут для аудио, по умолчанию нет.fallbacks.video — резервный маршрут для видео, по умолчанию нет.fallbacks.font — резервный маршрут для шрифта, по умолчанию нет.next/link на внешнем интерфейсе. Ознакомьтесь с этим примером, чтобы узнать, почему это реализовано.false"" - т.е. по умолчанию без префикса/subdomain , если приложение размещено на example.com/subdomainlocation.reload() для обновления приложения.truenext-pwa ищет реализацию пользовательского рабочего процесса для добавления к сервисному работнику, созданному рабочим ящиком. Для получения дополнительной информации ознакомьтесь с примером пользовательского рабочего процесса.worker next-pwa использует workbox-webpack-plugin , другие параметры, которые также можно поместить в объект pwa можно найти В ДОКУМЕНТАЦИИ для GenerateSW и InjectManifest. Если вы укажете swSrc , будет использоваться плагин InjectManifest , в противном случае для создания сервис-воркера будет использоваться GenerateSW .
next-pwa использует кэш.js среды выполнения по умолчанию.
Существует большая вероятность, что вы захотите настроить свои собственные правила кэширования во время выполнения. Пожалуйста, скопируйте файл cache.js по умолчанию.js и настройте правила по своему усмотрению. Не забудьте добавить конфигурации в конфигурацию pwa в next.config.js .
Вот документ о том, как писать конфигурации кэширования во время выполнения, включая функции фоновой синхронизации, широковещательного обновления и многое другое!
{command: 'doSomething', message: ''} при postMessage для сервисного работника. Чтобы прослушиватель мог выполнять несколько разных задач, используя if...else... .clean application cache , чтобы уменьшить количество случайных ошибок.runtimeCaching , например, options.cacheableResponse.statuses=[200,302] .sw.js , чтобы выяснить, что происходит на самом деле.next-pwa создать производственную сборку рабочего блока, указав mode: 'production' в разделе pwa файла next.config.js . Хотя next-pwa автоматически генерирует сборку рабочей коробки во время разработки (путем запуска next ) и производственную сборку рабочей коробки во время производства (путем запуска next build и next start ). Вы все равно можете принудительно запустить производственную сборку даже во время разработки вашего веб-приложения по следующей причине:self.__WB_DISABLE_DEV_LOGS = true в свой worker/index.js (создайте его, если у вас его нет).userAgent , чтобы определить, используют ли пользователи Safari/iOS/MacOS или какую-либо другую платформу. Для этой цели хорошо подойдет библиотека ua-parser-js. Массачусетский технологический институт
