使用Google的sw-precache構建的服務工作者真的可以成為networkFirst嗎？

Question

我運行運行Hugo的網站https://www.igluonline.com ，我最近在Google的sw-precache之后安裝了一名服務工作者。

這是Config文件：

module.exports = {
  staticFileGlobs: [
    'dist/css/**.css',
    'dist/**/*.html',
    'dist/images/**.*',
    'dist/js/**.js'
  ],
  skipWaiting: true,
  stripPrefix: 'dist',
  runtimeCaching: [{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]
};

注意事項：

雖然有時自動生成的代碼會遇到一些錯誤，但服務工作者可以正常工作並在Web和移動設備上提供離線體驗。

它還將cache-control設置為max-age=0 ，當我推送新代碼時，它會進行更新。

問題：

我設置了runtimeCaching handler ，以networkFirst並根據谷歌的sw-toolbox API （這是目前在sw-precache使用時runtimeCaching ）應該從HTTP調用最好讓頁面，如果沒有連接就應該退回到緩存。

但是當我刷新我的代碼並打開一個新窗口進行測試時（注意我在更新之前關閉了運行網站的所有選項卡和窗口），它將顯示緩存頁面。 它會自然地下載新的服務工作者，並在第二次重新加載更新頁面，但我不希望我的訪問者每次都要重新刷新我的主頁以獲取新內容。

我嘗試將runtimeCaching代碼更改為以下希望至少讓我的主頁直接從網絡加載，但我沒有運氣：

runtimeCaching: [{
    urlPattern: /\//,
    handler: 'networkOnly'
  },{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]

現在我不確定所需的PWA體驗是否如此 - 意味着用戶必須重新加載兩次或至少訪問兩頁以查看刷新的代碼 - 或者我是否犯了一些錯誤。 我真的很感激。

Answer 1

生成服務工作者時，獲取所需策略的最簡單方法是使用帶有sw-toolbox sw-precache 。

生成具有sw-precache的新服務工作程序時，您還可以通過傳遞正確的配置選項在生成的文件末尾獲取sw-toolbox代碼。

根據sw-precache文檔 ：

sw-precache模塊能夠將sw-toolbox代碼和配置與其自身配置一起包含在內。 在sw-precache使用runtimeCaching配置選項（ 見下文 ）是一種快捷方式，它通過在服務工作者中導入sw-toolbox並編寫自己的路由規則來完成手動操作。

這是sw-precache 文檔中顯示的runtimeCaching選項的示例：

runtimeCaching: [{
  urlPattern: /^https:\/\/example\.com\/api/,
  handler: 'networkFirst'
}, {
  urlPattern: /\/articles\//,
  handler: 'fastest',
  options: {
    cache: {
      maxEntries: 10,
      name: 'articles-cache'
    }
  }
}]

您可以在選擇的配置旁邊使用此選項。

例如，您可以使用配置文件中注明文檔 ：

支持使用--config傳遞復雜配置。 可以通過命令行標志覆蓋文件中的任何選項。 我們強烈建議通過module.exports傳遞一個定義配置的外部JavaScript文件。 例如，假設有一個路徑/到/ sw-precache-config.js文件，其中包含：

 module.exports = { staticFileGlobs: [ 'app/css/**.css', 'app/**.html', 'app/images/**.*', 'app/js/**.js' ], stripPrefix: 'app/', runtimeCaching: [{ urlPattern: /this\\\\.is\\\\.a\\\\.regex/, handler: 'networkFirst' }] }; 

該文件可以傳遞給命令行界面，同時還可以設置verbose選項

 $ sw-precache --config=path/to/sw-precache-config.js --verbose 

這提供了最大的靈活性，例如為runtimeCaching.urlPattern選項提供正則表達式。

或者您可以使用JSON文件：

我們還支持傳入--config的JSON文件，盡管這提供了較小的靈活性：

 { "staticFileGlobs": [ "app/css/**.css", "app/**.html", "app/images/**.*", "app/js/**.js" ], "stripPrefix": "app/", "runtimeCaching": [{ "urlPattern": "/express/style/path/(.*)", "handler": "networkFirst" }] } 

此示例使用JS文件作為配置選項：

$ sw-precache --config=path/to/sw-precache-config.js --verbose

執行該命令並使用此配置生成service-worker后，您可以比使用sw-precache更輕松地處理預緩存和策略。

您可以直接在文件中配置策略，也可以在service-worker代碼的底部手動添加它們。

以下是生成代碼底部的示例：

//sw-precache generated code...

// *** Start of auto-included sw-toolbox code. ***
/*
 Copyright 2016 Google Inc. All Rights Reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/ 
//(!function(e){if("object"==typeof exports&&"undefined"!=typeof module))...

// *** End of auto-included sw-toolbox code. ***

// Runtime cache configuration, using the sw-toolbox library.

toolbox.router.get(/this\\.is\\.a\\.regex/, toolbox.networkFirst, {});

toolbox.options.debug = true;

//Here you can configure your precache:

toolbox.precache([
    '/',
    '/assets/background.png',
    '/assets/logo.png',
    '/assets/application.css',
]);

//And here you can configure your policies for any route and asset:

toolbox.router.get('/', toolbox.fastest);
toolbox.router.get('/assets/background.png', toolbox.fastest);
toolbox.router.get('/assets/logo.png', toolbox.fastest);

//Here is the Network First example

toolbox.router.get('/myapp/index.html', toolbox.networkFirst);

我發現這比使用sw-precache更加有效和靈活。

在這里，您可以找到sw-toolbox使用指南 ，了解有關配置的更多信息。