Vue.js Nuxt pwa未注册服务工作者
我正试图通过@Nuxt/pwa包在Nuxt中运行脱机缓存。当我检查chromedevtool/应用程序时,没有看到注册服务人员 我不确定我是否遗漏了什么。现在,我只在我的nuxt.config文件中添加了以下内容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',
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文件。但是,没有缓存发生。