How to prefetch external HTML pages in safari?

Question

I am currently using nextJS (with react) and its working great. I am also using data prefetch link to prefetch links within the application and it works awesome.

I have a requirement to prefetch couple of pages created using nextJs but running as a separate application. I tried using rel=prefetch / rel=next tag and those work fine on chrome and firefox but it looks like safari doesn't support prefetch tags.

I then tried using npmjs package but even this couldn't force safari to use the page from disk cache. The interesting part is, I can see the prefetch (via fetch) calls going in network tab on safari (on page load) but when I click the target html link it still gets the data from network and not from disk cache.

I also tried using service workers cache api methods to see if that would force safari to render page from cache and I can see the fetch calls happening but safari is not using the data from cache when I click the target URL.

render(){
    const cacheName = 'testcache';
    const deviceURL = this.props.device.PDPPageURL.toString().replace(/^.*\.com/g, "");
    if(typeof(window) !== 'undefined' && window){
    if ('caches' in window) {
        caches.open(cacheName).then(cache => {
        cache.add(deviceURL).then(() => {
            console.log('\n  Apple urls Added to cache ');
        });
        });
    }

Is there a workaround to implement this requirement across all browsers?

score 0 · Answer 1 · answered Jul 09 '19 at 17:18

The initial lazy load approach is okay as much as the client supports it. However there are scenarios where that's not enough to create a great UIX. That's why to follow the PWA path is the next step.

I see 2 things here that per my understanding on React and SW you probably are not applying correctly.

render() . The method have to be focused in "render" the desired view rather than doing logical workload or other stuff. For testing reasons I understood and is fine, just a note in case needed. If you check those examples from the official site and among other resources (using jsx or not), there's no pollution on it. I have seen a kind of large render views but if You observer carefully, there's no more than "rendering" code. Check this course.
Cache API. The piece of code You are showing only is storing/saving but not sure if You have the other part when using the match method to look for a resource and force to fetch it from the Cache as you said needed. On top of this, the Cache has a versioning system so, the easiest way to create a fresh Cache is to update the version of it.

The Cache API is not obligated to be used with SW API, so if not needed probably only focus on use it separately. However, the purpose of integrate both is to make an app available in offline mode, what is the final purpose of a WPA app.
```
self.addEventListener('fetch', function(event) {
console.log(event.request.url);
event.respondWith(
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
);
```
});

You can find here a good walk-through of the integration of React with the cache api but is using SW as well to create a PWA.

How to prefetch external HTML pages in safari?

1 Answers1