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内置了一些限制。例如，必须在他们使用的域上为服务工作者提供服务 - 您不能使用CDN。
您需要使用next.js自定义服务器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 } ` )
} )
} )您可以在下一个文档中阅读有关自定义服务器的更多信息
如果您现在不托管，我可能会遵循现在的1.0方法，因为自定义服务器API可以启用大量功能，它根本无法与现在的2.0合作？♂️？♂️
因为现在2.0的工作方式与以前的版本差异很大，所以为服务工作者提供服务。有几种不同的方法可以做到这一点，但是我建议您查看此NOW 2示例应用程序。要注意的更改已在now.json和next.config.js中。
默认情况下， 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-Offline。
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( { dontAutoRegisterSw : true } ) 如果您是Wookbox的新手，我建议您阅读此快速指南 - workboxOpts内部的任何内容都将传递给workbox-webpack-plugin 。
在您的next.config.js中定义一个workboxOpts对象，并将其传递到Workbox-webpack-plugin。工作箱是next-offline在引擎盖下用来生成服务工作者的方法，您可以在此处了解更多有关它的信息。
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
workboxOpts : {
...
}
}
module . exports = withOffline ( nextConfig )除了工作箱选项之外，Next-offline还具有一些内置的旗帜，可为您提供更好的谷物控制，以控制您的服务工作者的生成。
| 姓名 | 类型 | 描述 | 默认 |
|---|---|---|---|
| 生成 | 布尔 | 如果是错误的，则Next-Offline不会生成服务工作者，而是尝试使用Workbox的[Inplove plugin]（https://developers.google.com/web/tool.com/web/tools/workbox/momodules/mmodules/workbox-webbback-webpack-ppack-pppack-ppplugin#plugin#plugestemanifest_plugugin-plugest_plugugin ），使用Workboxopts.swsrc中找到的文件。 | 真的 |
| dontautoregistersw | 布尔 | 如果是真的，Next-Offline不会自动将注册脚本推入应用程序代码。如果您使用运行时注册或自己处理注册，则需要这。 | 错误的 |
| DEVSWSRC | 细绳 | 在开发过程中由Next-Offline注册的路径。默认情况下，Next-Offline在开发过程中将注册NOOP | 错误的 |
| GenerateIndevMode | 布尔 | 如果是真的，服务工作者也将在开发模式下生成。否则将使用DevSWSRC中定义的服务工作者。 | 错误的 |
| registerswprefix | 细绳 | 如果您的服务工作者不在应用程序的根部级别，则可以帮助您前面的路径。如果您希望在foobar.com/my/long/path/service-worker.js上使用您的服务工作者。这会影响您服务工作者的[scope]（https://developers.google.com/web/ilt/pwa/introduction-to-service-worker-worker-worker-worker-workert_and_scope）。 | 错误的 |
| 范围 | 细绳 | 这将传递给自动注册的服务工作者，允许增加或减少服务工作者的控制权。 | “/” |
默认情况下， next-offline具有以下一揽子运行时缓存策略。如果您使用workboxOpts自定义next-offline ，则默认行为不会传递到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/Remote Origin中为服务人员提供服务？
默认情况下， next-offline将在所有Next.js webpack发射文件和用户定义的静态文件（内部/static ）中 - 本质上也是导出的所有内容。
如果您想包含更多内容或更改静态文件的来源，请使用给定的工作箱选项：
workboxOpts: {
modifyURLPrefix : {
'app' : assetPrefix ,
} ,
runtimeCaching : { ... }
} 默认情况下， next-offline将添加一个正在开发的NO-OP服务工作者。如果您想提供自己的通过Filepath到devSwSrc选项。例如，如果您想测试开发中的Web推送通知，这将特别有用。
// 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中的一些添加！
您可以在Next.js文档中阅读有关导出的更多信息，但下一个离线应该只能使用™跟。
如果您要升级到最新版本的next-offline我建议您查看5.x版本中的Wookbox内部添加/更改的内容以及4.0版本，其中包括Breaking Change。 Next Offline的API并没有改变，但是核心依赖性已有！
问题？反馈？请告诉我
next-offline是使用纱线工作区的Lerna MonorePo。克隆回购后，运行以下内容
$ yarn bootstrap这将确保您的Next-Offline的开发版本在示例和测试中与您链接，这应该使您可以快速进行更改！
WWWWWW||WWWWWW
W W W||W W W
||
( OO )__________
/ |
/o o| MIT
___/||_||__||_|| *
|| || || ||
_||_|| _||_||
(__|__|(__|__|
版权所有©2017-Present Jack Hanford，[email protected]
特此免费授予任何获得此软件副本和相关文档文件副本（“软件”）的人，以无限制处理该软件，包括不限于使用，复制，修改，合并，合并，发布，分发，分发，分发，撒下，sublicense和/或允许软件的副本，并允许对以下条件提供以下条件，以下是以下条件。
上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。
该软件是“按原样”提供的，没有任何形式的明示或暗示保证，包括但不限于适销性，适合特定目的和非侵害的保证。在任何情况下，作者或版权持有人都不应对任何索赔，损害赔偿或其他责任责任，无论是在合同，侵权的诉讼中还是其他责任，是由软件，使用或与软件中的使用或其他交易有关的。
