javascript - 服务人员。如何在低连接下使用缓存

Question

现在我的 sw.js 看起来像这样:

importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn@4.3.1/workbox/workbox-sw.js')

// --------------------------------------------------
// Configure
// --------------------------------------------------

// Set workbox config
workbox.setConfig({
  "debug": true
})

// Start controlling any existing clients as soon as it activates
workbox.core.clientsClaim()

// Skip over the SW waiting lifecycle stage
workbox.core.skipWaiting()

workbox.precaching.cleanupOutdatedCaches()

// --------------------------------------------------
// Precaches
// --------------------------------------------------

// Precache assets

// --------------------------------------------------
// Runtime Caching
// --------------------------------------------------

// Register route handlers for runtimeCaching
workbox.routing.registerRoute(new RegExp('https://fonts.googleapis.com/.*'), new workbox.strategies.CacheFirst({
  "cacheableResponse": {
    "statuses": [0, 200]
  }
}), 'GET')
workbox.routing.registerRoute(new RegExp('https://fonts.gstatic.com/.*'), new workbox.strategies.CacheFirst({
  "cacheableResponse": {
    "statuses": [0, 200]
  }
}), 'GET')
workbox.routing.registerRoute(new RegExp('https://.*.tile.osm.org/.*'), new workbox.strategies.CacheFirst({
  "cacheableResponse": {
    "statuses": [0, 200]
  }
}), 'GET')
workbox.routing.registerRoute(new RegExp('https://cdn.jsdelivr.net/npm/.*'), new workbox.strategies.CacheFirst({
  "cacheableResponse": {
    "statuses": [0, 200]
  }
}), 'GET')
workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.NetworkFirst({}), 'GET')
workbox.routing.registerRoute(new RegExp('/'), new workbox.strategies.NetworkFirst({}), 'GET')

如预期的那样完美离线工作。

但是当我在线并且我的连接很弱时(例如，我离 WI-FI 路由器很远)，然后我继续通过网络接收数据，但是下载当然非常慢。

我仍然找不到在连接不佳或服务器响应时间长的情况下使用缓存的方法。

如有任何帮助，我将不胜感激。

Answer 1

我觉得您需要实现的唯一更改是更改 /_nuxt/ 和 / 的路由处理程序以同时使用 CacheFirst() 策略而不是当前的 NetworkFirst():

workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst({}), 'GET')
workbox.routing.registerRoute(new RegExp('/'), new workbox.strategies.CacheFirst({}), 'GET')

我不确定您是否可以根据用户的当前连接使该策略动态化，但您可以通过以下方式检查用户的连接速度 navigator.connection.effectiveType，其值为['4g', '3g', '2g', 'slow-2g']之一，然后启动缓存基于此的策略。

注意! 我不确定这种对初始加载的一次性检查是否是一个好的做法/想法，因为用户可以很容易地提高他们的连接速度，然后在那种情况下你可能希望他们从 NetworkFirst() 策略中受益。

有关更详细的示例，您可以查看 Cloudinary 的自定义工作箱插件 here和一个伟大的tutorial关于这个问题。