URLs like https://example.com/page.html?param=val in offline PWA

Question

I did not think very much about using a rather complicated PWA offline. But now I want to try it. However I am using links like this (inside the PWA so to say):

https://example.com/page.html?param=val

When clicking on a link like that offline in the PWA I get "This site can't be reached". This link however works fine:

https://example.com/page.html

The parameters are all handled in JavaScript in the web browser. What options do I have to handle this? Is the best perhaps to rewrite it as # links? Or do that get me into other troubles?

https://example.com/page.html#param=val

Can you add your manifest.json file and the code you used for caching GET Requests? — Francesco
– Francesco, Commented Aug 19, 2019 at 11:35
@Francesko Thanks, but I don't think it matters here. But maybe I should be more clear. The exact URL is cached in my case. And I think I could rewrite that in the service worker for more generic caching. However the second way might be much more easy. But I'm a bit worried about the implied scrolling (to a label named "#param"). — Leo
– Leo, Commented Aug 19, 2019 at 12:41
@none I don't think so, but please explain why you think that. — Leo
– Leo, Commented Aug 19, 2019 at 14:33

Peter · Accepted Answer · 2019-11-03 21:53:31Z

3

The problem came from the cache. In your sw.js, you give the list of files you want to cache but you give the name of the file without the parameter. Which is logical as in many cases you can't know the full value of the parameters.

So in your case you cache "https://example.com/page.html" but when you call "https://example.com/page.html?param=val" the comparison fail and you get the error message.

The way to solve that is to tell the retreivng function in your sw.js file, to ignore parameter. Rather than

    caches.match(event.request)

just use

    caches.match(event.request, {ignoreSearch: true})

answered Nov 3, 2019 at 21:53

Peter

1,37621 silver badges36 bronze badges

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

1 Comment

Leo Over a year ago

Ah, thanks! I vaguely remember I did something like that at first, but I rewrote the whole caching because I had so much trouble knowing if I was doing something wrong or Chrome did not behave as I expected. So I guess the search parameters are still given to the page (i e location.href etc)?

Collectives™ on Stack Overflow

URLs like https://example.com/page.html?param=val in offline PWA

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related