2

我目前正在使用 nextJS (with react) 并且它工作得很好。我还使用数据预取链接来预取应用程序中的链接，它工作得很棒。

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

然后我尝试使用npmjs 包，但即使这样也不能强制 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 ');
        });
        });
    }

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

4

1 回答 1

0

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

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

  1. 使成为（） 。该方法必须专注于“渲染”所需的视图，而不是执行逻辑工作负载或其他工作。出于测试原因，我理解并且很好，只是在需要时做一个说明。如果您从官方网站和其他资源（使用或不使用 jsx）中查看这些示例，则不会有任何污染。我见过一种大型的渲染视图，但如果你仔细观察，那只不过是“渲染”代码。检查本课程。

  2. 缓存 API。您仅显示的代码段是存储/保存，但不确定您在使用match方法查找资源并按照您所说的需要强制从缓存中获取它时是否有另一部分。最重要的是，缓存有一个版本控制系统，因此，创建新缓存的最简单方法是更新它的版本。

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

    });

    您可以在此处找到React 与缓存api 集成的一个很好的演练，但同时也使用SW来创建 PWA。

于 2019-07-09T17:18:44.060 回答