next offline
1.0.0
next.jsとworkboxを使用します
アプリケーションでオフライン機能を簡単に有効にしてください！
$ npm install --save next-offline$ yarn add next-offlineセットアップする2つの重要なことがあります。まず、次の構成をラップするには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 } ` )
} )
} )next.js docsでカスタムサーバーの詳細を読むことができます
あなたが今ホスティングをしていないなら、私はおそらくカスタムサーバーAPIが多くの機能を有効にすることができるので、おそらく今1.0アプローチに従うでしょう。
現在、2.0は以前のバージョンとは大きく異なるため、サービスワーカーにサービスを提供するからです。これを行うにはいくつかの異なる方法がありますが、このNow2の例アプリをチェックすることをお勧めします。注意すべき変更は、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.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( { dontAutoRegisterSw : true } ) Workboxを初めて使用する場合は、このクイックガイドを読むことをお勧めします。Workboxoptsの内部はすべてworkboxOpts workbox-webpack-pluginに渡されます。
next.config.jsでworkboxOptsオブジェクトを定義すると、workbox-webpack-pluginに渡されます。 Workboxはnext-offlineがボンネットの下で使用してサービスワーカーを生成するものです。ここで詳細をご覧ください。
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
workboxOpts : {
...
}
}
module . exports = withOffline ( nextConfig )Workboxオプションに加えて、Next-Offlineには、サービスワーカーがどのように生成されるかをより細かい穀物制御を提供するためのフラグにいくつかのオプションが組み込まれています。
| 名前 | タイプ | 説明 | デフォルト |
|---|---|---|---|
| 生成されます | ブール | falseの場合、次のオフラインはサービスワーカーを生成せず、代わりにworkboxopts.swsrcで見つかったファイルをWorkboxの[Inject Plugin]（https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injinjedmanifest_pluginを変更しようとします。 | 真実 |
| dontautoregistersw | ブール | Trueの場合、Next-Offlineは登録スクリプトをアプリケーションコードに自動的にプッシュしません。これは、ランタイム登録を使用している場合、または自分で登録を処理している場合に必要です。 | 間違い |
| devswsrc | 弦 | 開発中に登録されるパス。デフォルトでは、Next-Offlineは開発中にNOOPを登録します | 間違い |
| geneatedevmode | ブール | Trueの場合、サービスワーカーも開発モードで生成されます。それ以外の場合、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には、次のブランケットランタイムキャッシュ戦略があります。 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使用できます。デフォルトでは、 next-offlineアプリケーションがdomain.comにあると仮定し、domain.com/service-worker.jsを登録しようとするため、アプリケーションがdomain.com/my/custom/pathにある場合に役立ちます。サービスワーカーをルートドメインで提供する必要があるため、 assetPrefixの使用をサポートすることはできません。その制限に関する技術的な内訳については、次のリンクを参照してください。CDN/リモートオリジンのサービスワーカーにサービスを提供することは可能ですか？
デフォルトでは、 next-offline次のすべてのnext.js WebパックをEmitedファイルとユーザー定義の静的なファイル（内/static ）をすべてPrecacheします。
いくつかのいくつかを含めるか、静的ファイルの原点を変更したい場合は、指定されたWorkboxオプションを使用します。
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 docsでエクスポートの詳細を読むことができますが、次のオフラインでは、Just Work™ピーンが必要です。
最新バージョンのnext-offlineにアップグレードしている場合は、Workboxの内部に追加/変更されたものを5.xリリースで、Breaking Changesを含む4.0リリースをじっと見つめることをお勧めします。次のオフラインのAPIは変更されていませんが、コア依存関係があります！
質問？フィードバック？私にお知らせください
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]
このソフトウェアと関連するドキュメントファイル（「ソフトウェア」）のコピーを入手する人に、これにより許可が無料で許可されます。
上記の著作権通知とこの許可通知は、ソフトウェアのすべてのコピーまたはかなりの部分に含まれるものとします。
このソフトウェアは、商品性、特定の目的への適合性、および非侵害の保証を含むがこれらに限定されない、明示的または黙示的ないかなる種類の保証なしに「現状のまま」提供されます。いかなる場合でも、著者または著作権所有者は、契約、不法行為、またはその他の訴訟、ソフトウェアまたはソフトウェアの使用またはその他の取引に関連する、またはその他の契約、またはその他の請求、またはその他の責任について責任を負いません。
