next offline
1.0.0
Используйте рабочую коробку с Next.js и
Легко включить функциональность в автономном режиме в вашем приложении!
$ npm install --save next-offline$ yarn add next-offline Есть две важные вещи, которые нужно настроить, сначала нам нужна next-offline , чтобы обернуть вашу следующую конфигурацию.
Если вы еще этого не сделали, создайте next.config.js в вашем проекте.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
...
}
module . exports = withOffline ( nextConfig )Затем нам нужно убедиться, что наше приложение правильно обслуживает работника службы, эта настройка зависит от того, как вы размещаете свое приложение. Есть документация ниже. Если вы не используете сейчас 2.0, пример теперь 1,0 должен работать в большинстве случаев.
Поскольку работники обслуживания настолько сильны, у API есть некоторые ограничения.
Вы захотите использовать API Next.js Custom Server API. Самый простой способ сделать это - создать 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
// handle GET request to /service-worker.js
if ( pathname === '/service-worker.js' ) {
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 } ` )
} )
} )Вы можете прочитать больше о пользовательских серверах в следующих документах.
Если вы не хостите сейчас, я бы, вероятно, следовал подходу NOW 1.0, потому что пользовательский серверный API может обеспечить много функциональности, он просто не работает с Now 2,0? ♂️
Потому что теперь 2.0 работает так отличается от предыдущей версии, так же как и обслуживание работника. Есть несколько разных способов сделать это, но я бы порекомендовал проверить это приложение Now2. Изменения, о которых следует знать, в настоящее время.
По умолчанию next-offline будет зарегистрировать обслуживающего работника при приведенном ниже сценарии, он автоматически добавляется в ваш клиентский пакет на стороне, когда вы используете withOffline .
if ( 'serviceWorker' in navigator ) {
window . addEventListener ( 'load' , function ( ) {
navigator . serviceWorker . register ( '/service-worker.js' , { scope : '/' } ) . then ( function ( registration ) {
console . log ( 'SW registered: ' , registration )
} ) . catch ( function ( registrationError ) {
console . log ( 'SW registration failed: ' , registrationError )
} )
} )
} Альтернатива временю компиляции, вы можете взять контроль над регистрацией/нерегистрированием в коде вашего приложения с помощью модуля next-offline/runtime .
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
register ( )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
}Вы можете при необходимости пройти путь и область применения.
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
/**
* Default service worker path is '/service-worker.js'
* Refer https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register for default scope rules
*
*/
register ( '/sub_folder/service-worker.js' , { scope : '/sub_folder' } )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
} Если вы занимаетесь регистрацией самостоятельно, передайте dontAutoRegisterSw к следующему отделению.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( { dontAutoRegisterSw : true } ) Если вы новичок в Workbox, я бы порекомендовал прочитать это быстрое руководство-что-либо внутри workboxOpts будет передано в workbox-webpack-plugin .
Определите объект workboxOpts в вашем next.config.js , и он будет передаваться в Workbox-Webpack-Plugin. Workbox-это то, что использует next-offline под капюшоном для генерации работника службы, вы можете узнать больше об этом здесь.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
workboxOpts : {
...
}
}
module . exports = withOffline ( nextConfig )Помимо вариантов рабочей коробки, в Next Offline есть несколько вариантов, встроенных в флаги, чтобы предоставить вам более тонкий контроль зерна над тем, как генерируется ваш обслуживающий работник.
| Имя | Тип | Описание | По умолчанию |
|---|---|---|---|
| генерирует | Логический | Если FALSE, Next Office не будет генерировать обслуживающего работника и вместо этого попытается изменить файл, найденный в Workboxopts.swsrc, используя Workbox [плагин inject] (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-lugin#incemantemanifest_plugin) | истинный |
| Dontautoregistersw | Логический | Если True, Next Office не будет автоматически вточить сценарий регистрации в код приложения. Это требуется, если вы используете регистрацию времени выполнения или занимаетесь регистрацией самостоятельно. | ЛОЖЬ |
| Devswsrc | Нить | Путь, который будет зарегистрирован следующим официальным линией во время разработки. По умолчанию Next Office зарегистрирует NOOP во время разработки | ЛОЖЬ |
| GenerateIndevMode | Логический | Если это правда, обслуживающий работник также будет генерироваться в режиме разработки. В противном случае будет использоваться работник службы, определенный в DevSWSRC. | ЛОЖЬ |
| Registerswprefix | Нить | Если ваш обслуживающий работник не находится на корне вашего приложения, это может помочь вам префикс пути. Это полезно, если вы хотите, чтобы ваш сервисный работник на foobar.com/my/long/path/service-worker.js. Это влияет на [Scope] (https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope) вашего работника службы. | ЛОЖЬ |
| объем | Нить | Это передается автоматически зарегистрированному работнику службы, позволяя увеличить или уменьшить то, что обслуживающий работник контролирует. | "/" |
По умолчанию next-offline есть следующая стратегия кэширования среды. Если вы настраиваете next-offline с workboxOpts , поведение по умолчанию не будет передано в workbox-webpack-plugin . Эта статья отлично разбивает различные рецепты кэша.
{
runtimeCaching : [
{
urlPattern : / ^https?.* / ,
handler : 'NetworkFirst' ,
options : {
cacheName : 'offlineCache' ,
expiration : {
maxEntries : 200
}
}
}
]
} // next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
workboxOpts : {
runtimeCaching : [
{
urlPattern : / .png$ / ,
handler : 'CacheFirst'
} ,
{
urlPattern : / api / ,
handler : 'NetworkFirst' ,
options : {
cacheableResponse : {
statuses : [ 0 , 200 ] ,
headers : {
'x-test' : 'true'
}
}
}
}
]
}
} ) Если ваше приложение не живет в корне вашего домена, вы можете использовать registerSwPrefix . Это полезно, если ваше приложение находится на domain.com/my/custom/path, потому что по умолчанию next-offline предполагает, что ваше приложение находится на Domain.com и попытается зарегистрировать Domain.com/service-worker.js. Мы не можем поддержать использование assetPrefix , потому что работники обслуживания должны быть обслуживались в корневом домене. Для технического разрыва этого ограничения см. Ссылку: возможно ли обслуживать работников обслуживания из CDN/удаленного происхождения?
По умолчанию next-offline будет предварительно пройти все излучаемые файлы Webpack Next.js и пользовательские статические (внутри /static )-по сути, все, что экспортируется и.
Если вы хотите включить еще немного или изменить происхождение ваших статических файлов. Используйте заданные параметры рабочей коробки:
workboxOpts: {
modifyURLPrefix : {
'app' : assetPrefix ,
} ,
runtimeCaching : { ... }
} По умолчанию next-offline добавит в разработку неоперационного работника. Если вы хотите предоставить свой собственный пропуск его FilePath в devSwSrc опцию. Это особенно полезно, если вы хотите проверить, например, уведомления о веб -push в разработке.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
devSwSrc : '/path/to/my/dev/service-worker.js'
} ) Вы можете отключить это поведение, установив опцию generateInDevMode на true .
На следующей [email protected] мы переписали функциональность экспорта, чтобы работать в большем количестве случаев, более надежно, с меньшим кодом благодаря некоторым дополнениям в следующем 7.0.0!
Вы можете прочитать больше об экспорте в Docs Next.js, но следующий офлайн должен просто работать ™.
Если вы обновляетесь до последней версии next-offline я рекомендую взглянуть на то, что было добавлено/изменено внутри рабочей коробки в выпусках 5.x вместе с выпуском 4.0, который включал в себя нарушающие изменения. API Next Offline не изменился, но основная зависимость имеет!
Вопросы? Обратная связь? пожалуйста, дайте мне знать
next-offline это Lerna Monorepo, которая использует рабочие пространства пряжи. После клонирования репо, запустите следующее
$ yarn bootstrapЭто гарантирует, что ваша версия следующего офиса будет сочувствовать примерам и тестам, которые должны позволить вам быстро вносить изменения!
WWWWWW||WWWWWW
W W W||W W W
||
( OO )__________
/ |
/o o| MIT
___/||_||__||_|| *
|| || || ||
_||_|| _||_||
(__|__|(__|__|
Copyright © 2017-Present Jack Hanford, [email protected]
Настоящим предоставляется разрешение, бесплатно, любому лицу, получающему копию этого программного обеспечения и связанные с ними файлы документации («Программное обеспечение»), чтобы иметь дело в программном обеспечении без ограничений, включая, без ограничения, права на использование, копирование, изменение, объединение, публикацию, распределение, сублиценность и/или продавать копии программного обеспечения и разрешения лиц, которым программное обеспечение подходит для того, чтобы поступить так, чтобы поступить на следующие условия: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: к следующим условиям: на следующие условия: на следующие условия.
Вышеуказанное уведомление об авторском праве и это уведомление о разрешении должно быть включено во все копии или существенные части программного обеспечения.
Программное обеспечение предоставляется «как есть», без гарантии любого рода, явного или подразумеваемого, включая, помимо прочего, гарантии товарной пригодности, пригодности для определенной цели и нераствования. Ни в коем случае авторы или владельцы авторских прав не будут нести ответственность за любые претензии, убытки или другую ответственность, будь то в действии контракта, деликт или иным образом, возникающие из или в связи с программным обеспечением или использованием или другими сделками в программном обеспечении.
