我用 VueJS 创建了一个渐进式网络应用程序,文件由 vuecli 生成。所以我有默认的 registerServiceWorker.js 我只是评论环境条件:
/* eslint-disable no-console */
import { register } from 'register-service-worker'
// if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://...'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
// }
这是我的简单 service-worker.js
const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime';
// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
];
// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
event.waitUntil(
caches.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
);
});
// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches.keys().then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
}).then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
}));
}).then(() => self.clients.claim())
);
});
// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
// Skip cross-origin requests, like those for Google Analytics.
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME).then(cache => {
return fetch(event.request).then(response => {
// Put a copy of the response in the runtime cache.
return cache.put(event.request, response.clone()).then(() => {
return response;
});
});
});
})
);
}
});
当我启动我的应用程序时,如果我查看 chrome 控制台,另一个 service-worker.js 会覆盖我的。如果在我的项目中,我不明白这个服务人员是什么:
/* global self */
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// It is read and returned by a dev server middleware that is only loaded
// during development.
// In the production build, this file is replaced with an actual service worker
// file that will precache your site's local assets.
self.addEventListener('install', () => self.skipWaiting())
self.addEventListener('activate', () => {
self.clients.matchAll({ type: 'window' }).then(windowClients => {
for (const windowClient of windowClients) {
// Force open pages to refresh, so that they have a chance to load the
// fresh navigation response from the local dev server.
windowClient.navigate(windowClient.url)
}
})
})
我如何使用我的 Service Worker?
最佳答案
这似乎确实是故意的。如果你真的想测试你的服务 worker ,那么可以随意将文件名更改为与默认名称不同的名称:service-worker.js
,例如 service-worker- dev.js
。这样做的原因是在开发模式下使用服务 worker 会导致极其困惑的调试情况。
Note that there is a hint in the comment of the replacement service-worker:
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// It is read and returned by a dev server middleware that is only loaded
// during development.
// In the production build, this file is replaced with an actual service worker
// file that will precache your site's local assets.
一旦您对 service-worker 的工作感到满意,您就会喜欢这样一个事实,即您可以在开发模式下完全禁用它:-)希望这对您有所帮助!
关于javascript - VueJS service-worker.js 在我的 PWA 中被忽略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56074595/