Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/cocoa/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js Nuxt pwa未注册服务工作者_Vue.js_Nuxt.js_Service Worker_Workbox - Fatal编程技术网

Vue.js Nuxt pwa未注册服务工作者

Vue.js Nuxt pwa未注册服务工作者,vue.js,nuxt.js,service-worker,workbox,Vue.js,Nuxt.js,Service Worker,Workbox,我正试图通过@Nuxt/pwa包在Nuxt中运行脱机缓存。当我检查chromedevtool/应用程序时,没有看到注册服务人员 我不确定我是否遗漏了什么。现在,我只在我的nuxt.config文件中添加了以下内容 pwa: { icon: { iconSrc: './static/logo.jpeg' }, manifest: { lang: 'en', short_name: 'P', name: 'Project',

我正试图通过@Nuxt/pwa包在Nuxt中运行脱机缓存。当我检查chromedevtool/应用程序时,没有看到注册服务人员

我不确定我是否遗漏了什么。现在,我只在我的nuxt.config文件中添加了以下内容

pwa: {
    icon: {
      iconSrc: './static/logo.jpeg'
    },
    manifest: {
      lang: 'en',
      short_name: 'P',
      name: 'Project',
      start_url: '/',
      display: 'standalone',
      theme_color: '#00b5ad'
    },
    workbox: {
      /* workbox options */
      dev: false,
      offlineStrategy: 'StaleWhileRevalidate',
      runtimeCaching: [
        {
          urlPattern: 'https://media.giphy.com/media/.*',
          handler: 'cacheFirst',
          method: 'GET',
          strategyOptions: {
            cacheName: 'giphy',
            cacheExpiration: {
              maxEntries: 100,
              maxAgeSeconds: 60 * 60 * 24 * 10
            }
          }
        }        
      ]
    }
  }
除此之外,我还在模块下添加了
'@nuxtjs/pwa'

我注意到在静态文件中生成了一个sw.js文件。但是,没有缓存任何内容

sw.js如下所示:

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

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

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

// 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://media.giphy.com/media/.*'), new workbox.strategies.CacheFirst ({"cacheName":"giphy","cacheExpiration":{"maxEntries":100,"maxAgeSeconds":864000}}), 'GET')    
workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({}), 'GET')
workbox.routing.registerRoute(new RegExp('/'), new workbox.strategies.StaleWhileRevalidate ({}), 'GET')

不建议在开发模式下测试workbox(
npm run dev

见文件:

您必须在生产模式下使用
localhost
hostname进行测试。
因此,请使用
npm run build和&npm run start运行您的应用程序,然后转到
http://localhost:3000/

然后,您应该在控制台面板中看到以下消息:

[workbox]欢迎来到workbox!——workbox core.dev.js:132

我可以看到正在生成一个sw.js文件。但是,没有缓存发生。