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和/或允許軟件的副本，並允許對以下條件提供以下條件，以下是以下條件。
上述版權通知和此許可通知應包含在軟件的所有副本或大量部分中。
該軟件是“按原樣”提供的，沒有任何形式的明示或暗示保證，包括但不限於適銷性，適合特定目的和非侵害的保證。在任何情況下，作者或版權持有人都不應對任何索賠，損害賠償或其他責任責任，無論是在合同，侵權的訴訟中還是其他責任，是由軟件，使用或與軟件中的使用或其他交易有關的。
