Redirect Service Worker Error

[realsrikar]

Introduction

iOS 12 Safari shows an error saying “response server by service worker has redirections” and refuses to open the page. This happens after the service worker has been installed i.e. after the first couple visits.

Error

How to Reproduce

1. Visit v8.dev and bookmark the site
2. Close the tab and then close the browser
3. Reopen safari and open the bookmark. If the error doesn’t appear, repeat this step.

Edit

I forgot to mention that I had ServiceWorkers enabled which is an experimental option in safari. So this is likely a safari bug. To turn on service workers: Settings>Safari>Advanced>Experimental Features>ServiceWorker>ON.

[mathiasbynens]

Thanks for filing this.

This sounds like a Safari bug… I’ll try to get my hands on an iOS device and run some tests.

[jeffposnick]

FWIW, there is some special logic in Workbox to deal with redirected responses due to security restrictions in the service worker specification.

[realsrikar]

I’m closing the issue for now assuming this is a safari bug. If this is not a safari bug feel free to reopen this issue.

[mathiasbynens]

I agree it does smell like a Safari bug. Would you mind reporting this to Apple? https://bugs.webkit.org/

[realsrikar]

@jeffposnick so I’m assuming it’s a general bug for any site that uses workbox? Or is there anything more specific that only affects v8 et al?

[jeffposnick]

Sorry, I'm not implying that this is a bug for any site that uses Workbox. I'm also not sure what kind of redirects, if any, actually happen with https://v8.dev.

I just wanted to point out that there is some special considerations around redirects which Workbox attempts to account for.

[mathiasbynens]

Just browsing the website, you wouldn’t run into any redirects on https://v8.dev/. (We have some redirects set up, but we don’t link to them anywhere.)

[realsrikar]

Definitely a safari bug which affects workbox sites then.

[realsrikar]

Issue has been filed https://bugs.webkit.org/show_bug.cgi?id=190041

[mathiasbynens]

Thank you, @realsrikar!

[youennf]

I did some debugging and put some information in
https://bugs.webkit.org/show_bug.cgi?id=190041#c3

The service worker is fetching "https://v8.dev/index.html" which redirects to "https://v8.dev".
The load is thus failing as per spec.
It seems to me the service worker or the server should be updated here.

[mathiasbynens]

@jeffposnick How can we prevent this in Workbox? Instead of /index.html, we want to fetch just /.

• sw.js: https://github.com/v8/v8.dev/blob/master/src/sw.js
• workbox-config.js: https://github.com/v8/v8.dev/blob/master/workbox-config.js Should I just replace index.html with /?

[realsrikar]

I haven’t ever used workbox, but when I visit v8.dev/sw.js it shows a revision hash (which means it’s calculating the hash using file path provided in workbox-config.js (?)). And because index.html is a file but / isn’t, how would workbox calculate the hash?

Probably would use index.html

[youennf]

I had a second look and I think there is a bug in Safari which prevents index.html to be served from cache. This then triggers the bug from workbox.
workbox-precaching.prod.js could be made more robust by changing the following line:
let r = caches.open(g).then(e => e.match(n)).then(e => e || fetch(n));
to:
let r = caches.open(g).then(e => e.match(n)).then(e => e || fetch(t.request.url));

[caleb531]

For what it's worth, I just tried Workbox 3.6.3 and it did not fix this issue (which implies to me that GoogleChrome/workbox#1677 and this issue) are not one in the same.

For Workbox users looking for a solution to this iOS/Workbox bug, adding templatedUrls in my workbox-build config fixed this iOS issue perfectly without any consequences (as far as I can tell, having used it a week or two):

workboxBuild.generateSW({
  // make sure that index.html is not matched by your globPatterns
  globPatterns: ['**\/*.{js,css,png}'],
  templatedUrls: {
    // '.' must be used instead of '/' in my case because my app is not served from the
    // root of the domain (but rather, from a subdirectory); using '.' will work
    // in either case
    '.': ['index.html']
  }
});

[mathiasbynens]

@caleb531 +1 This solved the issue for us too, although in our case we could use / instead of ..

[datapolitical]

For someone not using the Webpack plugin, where does the templatedurls code go? I just have a regular workbox install.

[caleb531]

@datapolitical I built my project with Gulp, so I put my templatedUrls code in my gulpfile.js as part of a gulp task that was using workbox-build. In your case, I would think that whatever you are using to build your project, that is where the templatedUrls code should go.

[datapolitical]

So I'm using Jekyll, with this plugin: https://github.com/bmeurer/jekyll-workbox-plugin. I've read all the relevant files and it doesn't seem like there's an obvious place to put that templatedurls code. But I'm also not that familiar with Workbox.

If you have any ideas how to update service-worker.js or sw.js or change the plugin to include or get the same result as the templatedurls I'd be very, very appreciative. :-)