i have try o convert laravel+vue.js to pwa. i have create manifest.json used workbox-cli for service worker. all install correctly but got error No matching service worker detected even though I have a service worker. below are my code
manifest.json
{
"name": "stocky PWA",
"short_name": "stocky PWA",
"id":"/",
"icons": [
{
"src": "/images/logo.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#000",
"description": "You favorite recipe app",
"dir": "ltr",
"lang": "en-US"
}I link the meta in harder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel=icon href=/images/favicon.ico>
<link rel="stylesheet" href="/css/master.css">
<title>Stocky | Ultimate Inventory With POS</title>
<link rel="manifest" href="/public/manifest.json"/>
</head>
<body class="text-left">
<noscript>
<strong>
We're sorry but Stocky doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<!-- built files will be auto injected -->
<div class="loading_wrap" id="loading_wrap">
<div class="loader_logo">
<img src="/images/logo.png" class="" alt="logo" />
</div>
<div class="loading"></div>
</div>
<div id="app">
</div>
<script src="/js/main.min.js?v=4.0.4">
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/public/sw.js', { scope: '/' }).then(function (registration) {
// Registration was successful
console.log('Signage Lab PWA: ServiceWorker registration successful with scope: ', registration.scope);
});
})}
</script>
</body>
</html>workbox-config.js
module.exports = {
globDirectory: 'public/',
globPatterns: [
'**/*.{css,js,eot,svg,ttf,woff,woff2,wav,ico,png,jpg,jpeg,gif,csv,php,json,txt,lock}'
],
swDest: '/public/sw.js',
ignoreURLParametersMatching: [
/^utm_/,
/^fbclid$/,
]
};this error et I got
