web-dev-qa-db-ja.com

特定のURLのみを除外するようにService Workerを設定する

デフォルトでサービスワーカーが含まれるcreate reactを使用してアプリを構築しました。静的コンテンツのセットを提供している/ blog /にアクセスする場合を除き、誰かが指定されたURLを入力するたびにアプリを実行したい。アプリでリアクションルーターを使用して、異なるURLをキャッチします。

/ blog /を提供するnginxのセットアップがあり、誰かが最初に反応アプリにアクセスせずに/ blog /にアクセスした場合は正常に動作します。ただし、Service Workerのスコープは./であるため、誰かが/ blog /以外のURLにアクセスすると、アプリはService Workerを読み込みます。その時点から、サービスワーカーはサーバーへの接続をバイパスし、/ blog /は静的コンテンツの代わりに反応アプリをロードします。

/ blog /を除くすべてのURLでService Workerをロードする方法はありますか？

service-workercreate-react-app
16
user3577166

そのため、サービスワーカーに関連するコードを投稿していないことを考慮すると、ifのコードブロック内に単純なfetch条件を追加することを検討できます。

このコードブロックは、サービスワーカー内に既に存在する必要があります。条件を追加するだけです

self.addEventListener( 'fetch', function ( event ) {

    if ( event.request.url.match( '^.*(\/blog\/).*$' ) ) {
        return false;
    }
     // OR

    if ( event.request.url.indexOf( '/blog/' ) !== -1 ) {
        return false;
    }
    //    **** rest of your service worker code ****

注正規表現またはプロトタイプメソッドindexOfを使用できます。あなたの気まぐれごと。

上記は、URLが/blog/に一致する場合に何もしないようにサービスワーカーに指示します

21
Schrodinger's cat

blacklistURLの別の方法、つまり、 WorkboxregisterNavigationRoute で実現できます：

workbox.routing.registerNavigationRoute("/index.html", {
  blacklist: [/^\/api/,/^\/admin/],
});

上記の例は、 [〜＃〜] spa [〜＃〜] でこれを示しています。この場合、index.htmlまたは/apiで始まるURLを除き、すべてのルートがキャッシュされ、/adminにマップされます。

4
F Lekschas

sw-precache library を使用して、キャッシュ戦略を実行している現在のservice-worker.jsファイルを上書きしてみてください。最も重要な部分は、構成ファイルのセットアップです（下のcreate-react-appで使用したものを貼り付けます）。

  1. インストールyarn sw-precache
  2. キャッシュしないURLを示す構成ファイルを作成して指定します
  3. ビルドスクリプトコマンドを変更して、sw-precacheが実行され、ビルド出力ディレクトリのデフォルトservice-worker.jsファイルが上書きされるようにします。

構成ファイルに名前を付けましたsw-precache-config.jsは、package.jsonのビルドスクリプトコマンドで指定しました。ファイルの内容は次のとおりです。特に注意を払う部分は、runtimeCachingキー/オプションです。 "build": "NODE_ENV=development react-scripts build && sw-precache --config=sw-precache-config.js"

構成ファイル：sw-precache-config.js

module.exports = {
    staticFileGlobs: [
        'build/*.html',
        'build/manifest.json',
        'build/static/**/!(*map*)',
    ],
    staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
    swFilePath: './build/service-worker.js',
    stripPrefix: 'build/',
    runtimeCaching: [
        {
            urlPattern: /dont_cache_me1/,
            handler: 'networkOnly'
        }, {
            urlPattern: /dont_cache_me2/,
            handler: 'networkOnly'
        }
    ]
}
2
Tope

最新のCRAバージョンで機能するものを次に示します。

// serviceWorker.js

window.addEventListener('load', () => {
  if (isAdminRoute()) {
    console.info('unregistering service worker for admin route')
    unregister()
    console.info('reloading')
    window.location.reload()
    return false
  }

管理領域に別のアプリを使用しているため、サーバーワーカーから/adminの下のすべてのルートを除外します。もちろん、好きなように変更できます。ファイルの下部にある関数を次に示します。

function isAdminRoute() {
  return window.location.pathname.startsWith('/admin')
}
2
goldylucks