Question

我一直在尝试为我的 Vuejs PWA 实现一个 Service Worker，我的代码在我的本地主机 URL http://localhost:8080/ 的 fetch 事件之后立即在控制台中抛出这个错误>

未捕获（承诺）类型错误：无法获取

这是我在 sw.js 文件中的代码，我在根文件夹 (/public) 中还有 index.html 和 manifest.js。

self.addEventListener("install", function(event) {
    event.waitUntil(preLoad());
});

var preLoad = async function(){
    // console.log("Installing web app");
    return caches.open("offline").then(function(cache) {
        // console.log("caching index and important routes");
        return cache.addAll(["/"]);
    });
};

self.addEventListener("fetch", function(event) {
    // console.log('Fetching:', event.request.url);
    event.respondWith(checkResponse(event.request).catch(function() {
        // console.log(event.request);
        return returnFromCache(event.request);
    }));
    event.waitUntil(addToCache(event.request));
});
  
var checkResponse = function(request){
    return new Promise(function(fulfill, reject) {
        fetch(request).then(function(response){
            if(response.status !== 404) {
                fulfill(response);
            } else {
                reject();
            }
        }, reject);
    });
};
  
var addToCache = async function(request){
    return caches.open("offline").then(function (cache) {
        return fetch(request).then(function (response) {
            // console.log(response.url + " was cached");
            return cache.put(request, response);
        });
    });
};
  
var returnFromCache = async function(request){
    return caches.open("offline").then(function (cache) {
        return cache.match(request).then(function (matching) {
            if(!matching || matching.status == 404) {
                return cache.match("offline.html");
            } else {
                return matching;
            }
        });
    });
};

这是 index.html 文件：

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="theme-color" content="#296f9c"/>
    <meta name="description" content="Descubre más de 160 recetas de cócteles en el app de coctelería del Cantinero Kentubano.">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/cantinero-logo-apple-touch.png">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title>Cantinero App</title>
  </head>
  <body>
    <script>
      if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register("/sw.js").then(function(reg) {
          console.log("Service worker has been registered for scope: " + reg.scope);
        });
      }
    </script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

有人知道为什么会发生这种情况以及我该如何解决吗？

谢谢！

Service Worker Uncaught (in promise) TypeError: Failed to fetch in VueJS PWA

0 个答案: