vscode 1.56.2
Debugger for Chrome 4.12.12
yarn install
vscode run 'vuejs' and 'vuejs: chrome'
->exception 'Uncaught (in promise) DOMException: Entry already exists.'
yarn add @vue/cli
yarn vue create sw-chrome-debug
? Please pick a preset
? Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies
? Use Yarn
$ cd sw-chrome-debug
$ mkdir config
$ touch config/index.js
devtool: 'source-map',
$ mkdir .vscode
$ touch .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "vuejs",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"serve"
],
"console": "integratedTerminal",
"trace": true,
},
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
},
"trace": true,
},
]
}
src/main.js
add
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
touch public/service-worker.js
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js'
)
if (workbox) {
console.log(`Yay! Workbox is loaded `)
} else {
console.log(`Boo! Workbox didn't load `)
}
const precacheController = new workbox.precaching.PrecacheController()
const files = ['/v.jpg']
const precacheManifest = files.map((element) => {
return { url: element, revision: '1234' }
})
precacheController.addToCacheList(precacheManifest)
addEventListener('install', (event) => {
// Uncaught (in promise) DOMException: Entry already exists.
event.waitUntil(precacheController.install(event))
})
addEventListener('activate', (event) => {
event.waitUntil(precacheController.activate(event))
})
↓
Uncaught (in promise) DOMException: Entry already exists.