服務人員回退接管React SSR

在聯機模式下，服務人員api回退接管服務器端呈現的頁面。當我第一次加載頁例如，在尋找源代碼，我的主頁呈現（因爲我在sw-precache選項定義/爲navigateFallback）：服務人員回退接管React SSR

我只當希望這種行爲我在離線模式下運行。

下面是我使用的選項：

{ 
    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' 
    }] 
}

來源

2017-06-03 Ha Ja

在sw-precache的navigateFallback預期的使用情況是提供一個能夠立即使用緩存優先策略來提供的靜態HTML文檔，而不必去反對網絡。這可以確保您網站上任何網址的請求可以幾乎立即實現，而不必等待網絡響應時間不確定。這假設您有一個可用於完成任何導航請求的通用HTML頁面（稱爲App Shell），並知道如何實現客戶端邏輯以檢查當前URL並動態插入適當的內容。如果您已經有支持單頁應用程序樣式導航的代碼，那通常就足夠了。

您可以read more about this architectural pattern，並且還有一個陣營爲基礎的PWA使用SSR初始導航（或不支持服務人員的客戶）的full example，然後升級到navigateFallback行爲一旦SW工作安裝。

如果您不想使用此型號，而是想要始終針對每個網頁的SSR版本使用網絡，並且在網絡請求失敗時僅使用緩存頁面，那麼navigateFallback選項不是正確的選擇。您可以在網上找到一些脫機回退的examples。

來源

2017-06-09 16:20:38

我要爲'sw-precache'文檔增加一些清晰度：https：//github.com/GoogleChrome/sw-precache/issues/310 –

服務人員回退接管React SSR

回答

相關問題