Question

我目前正在使用nextJS（带有react），并且运行良好。我还使用数据预取链接来预取应用程序中的链接，它的功能很棒。

我需要预取使用nextJs创建但作为独立应用程序运行的页面。我尝试使用rel = prefetch / rel = next标签，它们在chrome和firefox上可以正常工作，但Safari浏览器似乎不支持prefetch标签。

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

我还尝试使用服务工作者缓存api方法来查看这是否会迫使safari从缓存中呈现页面，并且可以看到发生了访存调用，但是当我单击目标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 ');
        });
        });
    }

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

Answer 1

最初的延迟加载方法与客户端支持的方法一样好。但是，在某些情况下，这还不足以创建出色的UIX。这就是下一步要遵循PWA路径的原因。

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

render（）。该方法必须专注于“呈现”所需的视图，而不是进行逻辑工作量或其他工作。出于测试的原因，我理解并且很好，请在需要时提供说明。如果您从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。

如何在野生动物园中预取外部HTML页面？

1 个答案: