我试图通过@nuxtpwa包在Nuxt中运行离线缓存。当我检查chrome devtoolapplication时,它没有看到注册服务工作者。
我不知道我是否遗漏了什么。目前,我只在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/[email protected]/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')
不建议在开发模式下测试工作箱 (npm run dev
)见文档。https:/pwa.nuxtjs.orgmodulesworkbox.html#dev。
你必须在生产模式下用 localhost
主机名。所以,运行你的应用程序时,要用 npm run build && npm run start
而去 http://localhost:3000/
然后你应该在控制台面板上看到以下信息。[workbox] Welcome to Workbox! --- workbox-core.dev.js:132