猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

努力理解为什么我的服务工作者不工作

我一直在按照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 worker


const 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 cache

self.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);

    })

  );

});


我真的很挣扎，我的客户是一个慈善机构，所以我真的很想为他们做这项工作，任何帮助将不胜感激！


UYOU
浏览 176回答 2
2回答

慕尼黑的夜晚无繁华

如果您访问https://ovoc.netlify.com/，您应该会在 Chrome DevTools 的网络面板中看到以下内容：这表明软件正在向 URL 发出请求https://ovoc.netlify.com/[object%20Response]，它返回 404 响应。它还告诉您该请求源自pwabuilder-sw.js:17，即您的服务工作者脚本的第 17 行。该行对应于：return&nbsp;cache.add(new&nbsp;Response("TODO:&nbsp;Update&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;offlineFallbackPage&nbsp;constant&nbsp;in&nbsp;the&nbsp;serviceworker."));这似乎是您需要更新的一些占位符代码，以放入离线页面的实际 URL。此外，您<head>的 标签包括许多undefined网址：看起来这些是由 生成的ManUp.js，因此您应该确保正确配置。
0

HUH函数

这是在您的应用程序中缓存静态资产和动态资产的工作代码注意：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) {&nbsp; console.log('[Service Worker] Installing Service Worker ...', event);&nbsp; event.waitUntil(&nbsp; &nbsp; caches.open(CACHE_STATIC_NAME)&nbsp; &nbsp; &nbsp; .then(function(cache) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('[Service Worker] Precaching App Shell');&nbsp; &nbsp; &nbsp; &nbsp; cache.addAll([&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/index.html',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/js/app.js',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/js/feed.js',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/js/promise.js',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/js/fetch.js',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/js/material.min.js',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/css/app.css',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/css/feed.css',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '/src/images/main-image.jpg',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'https://fonts.googleapis.com/css?family=Roboto:400,700',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'https://fonts.googleapis.com/icon?family=Material+Icons',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'&nbsp; &nbsp; &nbsp; &nbsp; ]);&nbsp; &nbsp; &nbsp; })&nbsp; )});self.addEventListener('activate', function(event) {&nbsp; console.log('[Service Worker] Activating Service Worker ....', event);&nbsp; event.waitUntil(&nbsp; &nbsp; caches.keys()&nbsp; &nbsp; &nbsp; .then(function(keyList) {&nbsp; &nbsp; &nbsp; &nbsp; return Promise.all(keyList.map(function(key) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('[Service Worker] Removing old cache.', key);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return caches.delete(key);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; })&nbsp; );&nbsp; return self.clients.claim();});self.addEventListener('fetch', function(event) {&nbsp; event.respondWith(&nbsp; &nbsp; caches.match(event.request)&nbsp; &nbsp; &nbsp; .then(function(response) {&nbsp; &nbsp; &nbsp; &nbsp; if (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return fetch(event.request)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(function(res) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return caches.open(CACHE_DYNAMIC_NAME)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(function(cache) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cache.put(event.request.url, res.clone());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return res;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch(function(err) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; );});
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript