0

I've been following the instructions at https://www.pwabuilder.com to make my site available offline. In the console log I'm getting messages stating the PWA has been installed, and is cached offline but I'm getting the error in the title.

I've been to numerous stackoverflow threads and other sites and nothing I am trying is working. This isn't my forte I'm a UX/UI designer who can code simple static pages but this is a little above my skill level at the moment.

I'm really struggling to figure out how to fix the issue as (to me) the error is quite vague. I'm assuming its something simple ive missed. The site url is https://ovoc.netlify.com/ but I will also link the manifest and service worker below

manifest.json

{ "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" }] }

And here is the service worker

// 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); }) ); }); // If any fetch fails, it will look for the request in the cache and serve it from there first self.addEventListener("fetch", function (event) { if (event.request.method !== "GET") return; event.respondWith( fetch(event.request) .then(function (response) { console.log("[PWA Builder] add page to offline cache: " + response.url); // If request was success, add or update it in the cache event.waitUntil(updateCache(event.request, response.clone())); return response; }) .catch(function (error) { console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error); return fromCache(event.request); }) ); }); function fromCache(request) { // Check to see if you have it in the cache // Return response // If not in the cache, then return error page return caches.open(CACHE).then(function (cache) { return cache.match(request).then(function (matching) { if (!matching || matching.status === 404) { return Promise.reject("no-match"); } return matching; }); }); } function updateCache(request, response) { return caches.open(CACHE).then(function (cache) { return cache.put(request, response); }); }

I'm really struggling and my client is a charity so I really want to make this work for them, any help would be gratefully appreciated!

Improve this question

2 Answers 2

Reset to default
1

If you visit https://ovoc.netlify.com/, you should see the following in the Network panel of Chrome DevTools:

network panel screenshott

This indicates that the SW is making a request for the URL https://ovoc.netlify.com/[object%20Response], which returns a 404 response.

It also tells you that this request originates from pwabuilder-sw.js:17, i.e. line 17 of your service worker script.

That line corresponds to:

return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));

That appears to be some placeholder code that you need to update, to put in an actual URL for an offline page.

Additionally, your <head>'s tags include a number of undefined URLs:

enter image description here

It looks like those are generated by ManUp.js, so you should make sure you're configuring that properly.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I updated that request with "index.html" and I'm still getting the same error. Also, when I go into my network panel in devtools it doesn't list which line of the js file the error is being caused by. Any other ideas?
I added some more info.
0

@AdamElsbury, here is the working code for caching static assets and dynamic assets in your application Note: 1) when installing service worker it installs all the static html, css, js files 2) Replace all the static file names with the files available in your application 3) Dynamic caching is for caching images which updates frequently 4) If you release a new version which requires update to user, just change the CACHE_STATIC_NAME to 1 version up

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) { }); } }) ); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.