如何解决PWA 应用重新运行未检测到匹配的 Service Worker
当我尝试在 github 上托管 pwa 时出现此错误，豌豆在本地运行良好，但在 github 上却没有，为什么？
失败原因
未检测到匹配的 Service Worker。您可能需要重新加载页面，或检查当前页面的 Service Worker 范围是否包含清单中的范围和起始 URL。
和控制台中的这个错误：
我的仓库名称：PWAPP
我的项目结构
+- index.html
+- PWA *folder
| +- sw.js
| +- manifest.json
+- icon *folder has png image
// service-worker.js
//////////////////////////////////////////////////
var APP_PREFIX = 'ApplicationName_' // Identifier for this app (this needs to be consistent across every cache update)
var VERSION = 'version_01' // Version of the off-line cache (change this value everytime you want to update cache)
var CACHE_NAME = APP_PREFIX + VERSION
var URLS = [ // Add URL you want to cache in this list.
'/PWAPP/',// If you have separate JS/CSS files,'/PWAPP/index.html' // add path to those files here
]
// Respond with cached resources
self.addEventListener('fetch',function(e) {
console.log('fetch request : ' + e.request.url)
e.respondWith(
caches.match(e.request).then(function(request) {
if (request) { // if cache is available,respond with cache
console.log('responding with cache : ' + e.request.url)
return request
} else { // if there are no cache,try fetching request
console.log('file is not cached,fetching : ' + e.request.url)
return fetch(e.request)
}
// You can omit if/else for console.log & put one line below like this too.
// return request || fetch(e.request)
})
)
})
// Cache resources
self.addEventListener('install',function(e) {
e.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
console.log('installing cache : ' + CACHE_NAME)
return cache.addAll(URLS)
})
)
})
// Delete outdated caches
self.addEventListener('activate',function(e) {
e.waitUntil(
caches.keys().then(function(keyList) {
// `keyList` contains all cache names under your username.github.io
// filter out ones that has this app prefix to create white list
var cacheWhitelist = keyList.filter(function(key) {
return key.indexOf(APP_PREFIX)
})
// add current cache name to white list
cacheWhitelist.push(CACHE_NAME)
return Promise.all(keyList.map(function(key,i) {
if (cacheWhitelist.indexOf(key) === -1) {
console.log('deleting cache : ' + keyList[i])
return caches.delete(keyList[i])
}
}))
})
)
})/* manifest.json */
/* ---------------------------------------------- */
{
"name": "App Name","short_name": "App","start_url": "../","icons": [
{
"src": "../icons/manifest-icon-192.png","sizes": "192x192","type": "image/png","purpose": "maskable any"
},{
"src": "../icons/manifest-icon-512.png","sizes": "512x512","purpose": "maskable any"
}
],"theme_color": "#3367D6","background_color": "#3367D6","display": "fullscreen","orientation": "portrait"
}<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<!-- Meta -->
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Prograssive Web App -->
<link rel="manifest" href="PWA/manifest.json">
<link rel="canonical" href="https://hasanqari.github.io/PWAPP/">
<!-- BS Style -->
<link rel="stylesheet" href="asset/css/BScss/bootstrap.min.css">
<link rel="stylesheet" href="asset/css/BScss/bootstrap.css">
<!-- Main Style -->
<link rel="stylesheet" href="asset/css/app.css">
<!-- App Icon -->
<link rel="shortcut icon" href="res/img/icon.svg" type="image/x-icon">
<!-- Title -->
<title>Document</title>
</head>
<body>
<main>
<div id="content-area-start-page" class="container mb-5">
<div id="frame-start-page" class="text-center align-content-center flex-column mt-5 py-3 px-4" style="border: 3px solid #ccc; border-radius: 50%;">
<img id="logo-start-page" src="res/img/icon.svg" alt="logo" class="img-fluid" width="70%">
<h5 id="app-name-start-page" class="mb-3">App Name</h6>
<p id="app-description-start-page">مرحبا بكم في [اسم التطبيق] سهل وسريع</p>
<a id="btn-next-start-page" class="btn btn-primary" href="">التالي</a>
</div>
</div>
</main>
<!-- BS Js -->
<script src="asset/js/BSjs/bootstrap.min.js"></script>
<script src="asset/js/BSjs/bootstrap.js"></script>
<!-- Main Js -->
<script src="asset/js/app.js"></script>
<!-- Extra Js -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('PWAPP/service-worker.js',{
scope: '/PWAPP/'
})
// ('/service-worker.js')
.then(function(registration) {
console.log("success load");
console.log(registration);
})
.catch(function(err) {
console.log(err);
});
}
</script>
</body>
</html>有人可以帮我吗？
非常感谢你
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
