2017-06-03 59 views
0

在联机模式下,服务人员api回退接管服务器端呈现的页面。当我第一次加载​​页例如,在寻找源代码,我的主页呈现(因为我在sw-precache选项定义/navigateFallback):服务人员回退接管React SSR

enter image description here

我只当希望这种行为我在离线模式下运行。

下面是我使用的选项:

{ 
    cacheId: pkg.name, 
    dontCacheBustUrlsMatching: /./, 
    dynamicUrlToDependencies: { 
    '/': [ resolve(__dirname, '../server/views/index.ejs') ] 
    }, 
    navigateFallback: '/', 
    staticFileGlobs: [ 
    `${publicDir}/{bundle,vendor}.*.{js,css,gz}`, 
    `${publicDir}/manifest.json` 
    ], 
    stripPrefix: publicDir, 
    runtimeCaching: [{ 
    urlPattern: /api/, 
    handler: 'networkFirst' 
    }] 
} 

回答

0

sw-precachenavigateFallback预期的使用情况是提供一个能够立即使用缓存优先策略来提供的静态HTML文档,而不必去反对网络。这可以确保您网站上任何网址的请求可以几乎立即实现,而不必等待网络响应时间不确定。这假设您有一个可用于完成任何导航请求的通用HTML页面(称为App Shell),并知道如何实现客户端逻辑以检查当前URL并动态插入适当的内容。如果您已经有支持单页应用程序样式导航的代码,那通常就足够了。

您可以read more about this architectural pattern,并且还有一个阵营为基础的PWA使用SSR初始导航(或不支持服务人员的客户)的full example,然后升级到navigateFallback行为一旦SW工作安装。

如果您不想使用此型号,而是想要始终针对每个网页的SSR版本使用网络,并且在网络请求失败时仅使用缓存页面,那么navigateFallback选项不是正确的选择。您可以在网上找到一些脱机回退的examples

+0

我要为'sw-precache'文档增加一些清晰度:https://github.com/GoogleChrome/sw-precache/issues/310 –