我一直在按照https://www.pwabuilder.com上的说明使我的网站可离线使用。在控制台日志中，我收到消息，指出 PWA 已安装，并已离线缓存，但我在标题中收到错误消息。我去过许多 stackoverflow 线程和其他网站，但我正在尝试的任何东西都不起作用。这不是我的强项，我是一名 UX/UI 设计师，可以编写简单的静态页面，但目前这略高于我的技能水平。我真的很难弄清楚如何解决这个问题，因为（对我来说）这个错误很模糊。我假设它是我错过的一些简单的东西。网站 url 是https://ovoc.netlify.com/但我也会链接下面的清单和服务工作者清单文件{ "dir": "ltr", "lang": "en", "name": "Our voice our community | Get involved in de…", "scope": "/", "display": "fullscreen", "start_url": "https://ovoc.netlify.com/", "short_name": "OVOC", "theme_color": "transparent", "description": "Our voice our community is a project run by BGC Wales to empower young people to engage in community decision making", "orientation": "any", "background_color": "transparent", "related_applications": [], "prefer_related_applications": false, "icons": [{ "src": "assets/icons/logo.png", "sizes": "192x192", "type": "image/png" }]}这是服务人员// This is the "Offline copy of pages" service workerconst CACHE = "pwabuilder-offline";// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "index.html";const offlineFallbackPage = "index.html";// Install stage sets up the index page (home page) in the cache and opens a new cacheself.addEventListener("install", function (event) { console.log("[PWA Builder] Install Event processing"); event.waitUntil( caches.open(CACHE).then(function (cache) { console.log("[PWA Builder] Cached offline page during install"); if (offlineFallbackPage === "index.html") { return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker.")); } return cache.add(offlineFallbackPage); }) );});我真的很挣扎，我的客户是一个慈善机构，所以我真的很想为他们做这项工作，任何帮助将不胜感激！
2 回答
慕尼黑的夜晚无繁华
TA贡献1864条经验 获得超6个赞
如果您访问https://ovoc.netlify.com/，您应该会在 Chrome DevTools 的网络面板中看到以下内容：
这表明软件正在向 URL 发出请求https://ovoc.netlify.com/[object%20Response]，它返回 404 响应。
它还告诉您该请求源自pwabuilder-sw.js:17，即您的服务工作者脚本的第 17 行。
该行对应于：
return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));这似乎是您需要更新的一些占位符代码，以放入离线页面的实际 URL。
此外，您<head>的 标签包括许多undefined网址：
看起来这些是由 生成的ManUp.js，因此您应该确保正确配置。
HUH函数
TA贡献1836条经验 获得超4个赞
这是在您的应用程序中缓存静态资产和动态资产的工作代码注意：1）安装服务工作者时，它会安装所有静态 html、css、js 文件 2）将所有静态文件名替换为可用的文件您的应用程序 3) 动态缓存用于缓存经常更新的图像 4) 如果您发布了需要更新到用户的新版本，只需将 CACHE_STATIC_NAME 更改为 1 个版本
var CACHE_STATIC_NAME = 'static-v1';
var CACHE_DYNAMIC_NAME = 'dynamic-v1';
self.addEventListener('install', function(event) {
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open(CACHE_STATIC_NAME)
.then(function(cache) {
console.log('[Service Worker] Precaching App Shell');
cache.addAll([
'/',
'/index.html',
'/src/js/app.js',
'/src/js/feed.js',
'/src/js/promise.js',
'/src/js/fetch.js',
'/src/js/material.min.js',
'/src/css/app.css',
'/src/css/feed.css',
'/src/images/main-image.jpg',
'https://fonts.googleapis.com/css?family=Roboto:400,700',
'https://fonts.googleapis.com/icon?family=Material+Icons',
'https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'
]);
})
)
});
self.addEventListener('activate', function(event) {
console.log('[Service Worker] Activating Service Worker ....', event);
event.waitUntil(
caches.keys()
.then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
console.log('[Service Worker] Removing old cache.', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
} else {
return fetch(event.request)
.then(function(res) {
return caches.open(CACHE_DYNAMIC_NAME)
.then(function(cache) {
cache.put(event.request.url, res.clone());
return res;
})
})
.catch(function(err) {
});
}
})
);
});
添加回答
举报
0/150
提交
取消