如何在 Safari 中预取外部 HTML 页面？答案

【问题标题】：How to prefetch external HTML pages in safari?如何在 Safari 中预取外部 HTML 页面？
【发布时间】：2019-11-07 14:27:48
【问题描述】：

我目前正在使用 nextJS（带有 react），它的工作非常好。我还使用数据预取链接来预取应用程序中的链接，效果非常好。

我需要预取几个使用 nextJs 创建但作为单独应用程序运行的页面。我尝试使用 rel=prefetch / rel=next 标签，这些标签在 chrome 和 firefox 上运行良好，但看起来 safari 不支持预取标签。

然后我尝试使用npmjs package，但即使这样也不能强制 safari 使用磁盘缓存中的页面。有趣的是，我可以在 safari 的网络选项卡中看到预取（通过 fetch）调用（在页面加载时），但是当我单击目标 html 链接时，它仍然从网络而不是从磁盘缓存获取数据。

我还尝试使用服务工作者缓存 api 方法来查看这是否会强制 safari 从缓存中呈现页面，我可以看到 fetch 调用正在发生，但是当我单击目标 URL 时，safari 没有使用缓存中的数据。

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 ');
        });
        });
    }

是否有一种解决方法可以在所有浏览器中实现此要求？

【问题讨论】：

标签： reactjs safari next.js prefetch link-prefetch

【解决方案1】：

只要客户端支持，初始延迟加载方法就可以了。但是，在某些情况下，这还不足以创建出色的 UIX。这就是为什么下一步要遵循 PWA 路径。

我在这里看到两件事，根据我对 React 和 SW 的理解，你可能没有正确应用。

渲染（）。该方法必须专注于“渲染”所需的视图，而不是执行逻辑工作负载或其他内容。出于测试原因，我理解并且很好，只是在需要时做一个说明。如果您从 official site 和其他资源（使用或不使用 jsx）中查看这些示例，则不会造成任何污染。我见过一种大型的渲染视图，但如果你仔细观察，就只有“渲染”代码。 Check this course.
缓存 API。您仅显示的代码段是存储/保存，但不确定您在使用 match 方法查找资源并 force 获取它时是否有另一部分如您所说，从缓存中获取。最重要的是，缓存有一个版本控制系统，因此，创建新缓存的最简单方法是更新它的版本。

The Cache API 没有义务与 SW API 一起使用，因此如果不需要，可能只专注于单独使用它。但是，两者集成的目的是使应用程序在离线模式下可用，WPA 应用程序的最终目的是什么。
```
self.addEventListener('fetch', function(event) {
console.log(event.request.url);
event.respondWith(
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
);
```
});

您可以找到 here 一个很好的演示，了解 React 与 cache api 的集成，但同时也使用 SW 来创建 PWA。

【讨论】：