29149

Service worker doesn't return file from cache

Question:

I'm trying to cache a single page webapp with a service worker. It should get all it's files from the cache and update that cache only when a new service worker-version is published.

With a precache function i'm writing some files to the cache as follows:

function precache() { return caches.open(CACHE).then(function(cache) { return cache.addAll([ 'index.html', 'js/script.js', 'img/bg.png', 'img/logo.svg', ... ]); }); }

(I've tried to cache with and without "/" before the paths, and even with absolute paths. Makes no difference)

In Chrome's Cache Storage, the content of all those files is exactly as it should be. But when I try to serve the files from cache on reload of the page, none of the requests match with the cache, they all get rejected, even when I'm still online.

self.addEventListener('fetch', function(evt) { evt.respondWith( caches.match(evt.request).then(function(response) { if(response){ return response; } else { reject('no result'); } }).catch(function(){ if(evt.request.url == 'https://myurl.com'){ return caches.match('/index.html'); } }); ) });

The index.html from the catch-function gets served correctly, and in turn requests the other files, like /js/script.js. Those request show up like this in the console:

<blockquote>

Request { method: 'GET', url: '<a href="https://myurl.com/js/script.js" rel="nofollow">https://myurl.com/js/script.js</a>', ... referrer: '<a href="https://myurl.com" rel="nofollow noreferrer">https://myurl.com</a>' }

</blockquote>

But they do not return a response, only a notice like this shows:

<blockquote>

The FetchEvent for "<a href="https://myurl.com/js/script.js" rel="nofollow">https://myurl.com/js/script.js</a>" resulted in a network error response: an object that was not a Response was passed to respondWith().

</blockquote>

Am I missing something here?

Answer1:

Thanks to the link from Rajit <a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache/match" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/Cache/match</a> I've found that the caches.match() function accepts an options-object.

I've updated that line in my service worker to

caches.match(evt.request,{cacheName:CACHE,ignoreVary:true}).then(function(response) {

so it includes the cache-name and an ignores VARY header matching, and now it returns the correct files.

Recommend

  • Why are Google search results in UIWebView not triggering webViewDidFinishLoad?
  • Remove 2 vertical borders from HTML table - how?
  • D3 Tree layout visualization - Inherit child with multiple parents
  • AOT and JIT with build-optimizer
  • How to get or calculate size of Azure File/Share or Service
  • Creating interactive SVG maps for a web portal
  • When interface inheritance in Java is useful?
  • Where to save the local DB created for iphone app?
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • get passwords from chrome
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Iterate twice through a DataReader
  • Does the Azure table storage API cache results?
  • Mercurial: Identify file name after rename
  • d3.js selection conditional rendering
  • Making header act like google chrome mobile app address bar
  • How to rotate the dial in a gauge chart? Using python plotly
  • File extension of zlib zipped html page?
  • HttpClient: disabling chunked encoding
  • Clear fused location provider's location for testing
  • Floated image with variable width and heading with background image
  • android.support.v7.widget.Toolbar VectorDrawableCompat IllegalStateException when using support lib
  • Java color detection
  • Is playing sound in Javascript performance heavy?
  • zope_i18n_compile_mo_files doesn't work on a Zeo configuration
  • OOP Javascript - Is “get property” method necessary?
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • How to have background script and something similar to a default popup?
  • Python urlparse: small issue
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Scrapy recursive link crawler
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Javascript convert timezone issue
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • GridView Sorting works once only
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API