使用sw-precache高速緩存外部資源

我試圖讓sw-precache預先高速緩存外部CDN資源，但生成的service-worker.js不包含precacheConfig數組中的CDN url。使用sw-precache高速緩存外部資源

這是我在我的gulpfile：

staticFileGlobs: [ 
    'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', 
    'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}' 
]

我的本地client/assets文件夾中的文件被添加到precacheConfig陣列，但外部字體真棒CSS是沒有的。有沒有辦法做到這一點？

來源

2016-11-14 zeosamaster

sw-precache只能預緩存並保持最新的本地資產，例如與您使用的client/assets/**/*...模式相匹配的資產。這並不意味着使用通過CDN訪問的遠程資產。

你有幾個辦法：

使用npm（或包管理器或您選擇）來下載資源的本地副本（即font-awesome），然後一起部署第三方資源的第一方資產。如果第三方代碼是通過staticFileGlobs傳遞的模式拾取的，則可以像其他任何本地一樣預先緩存和版本化第三方代碼。
使用運行時緩存來處理CDN上的資源。由於您的特定資產的URL包含4.0.3版本控制字符串，因此假設基礎內容永不改變，並且策略可能安全。

您可以通過修改sw-precache配置，如下所示：

{ 
    staticFileGlobs: [ 
    'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}' 
    ], 
    runtimeCaching: [{ 
    urlPattern: /^https:\/\/netdna\.bootstrapcdn\.com\//, 
    handler: 'cacheFirst' 
    }], 
    // ...any other config options... 
}

該配置很寬，足以拿起任何服務關閉該CDN，高速緩存，然後滿足它緩存第一一次在隨後的訪問。

請注意，例如使用的http:協議的CDN的網址，你會需要使用https:，以獲得與服務人員緩存很好地起到了響應。

來源

2016-11-14 20:28:26

感謝您的回覆。我已經有一個像你建議的runtimeCaching urlPattern，我的問題發生在用戶第一次訪問我的pwa（在staticFileGlobs中預先緩存所有內容），然後在第二次訪問時離線訪問它。 font-awesome從來沒有被服務工作人員下載過，因爲瀏覽器下載的唯一時間是服務人員仍在安裝（即runtimeCaching尚未使用）。 – zeosamaster

我已經考慮過使用本地副本，但想知道是否有辦法避免它。就像你所建議的那樣，我會用這種方法。感謝您的注意，我還沒有意識到:) – zeosamaster

@zeodamaster通過在服務工作者安裝後加載隱藏的包含頁面的iframe來解決這個問題 – oligofren

使用sw-precache高速緩存外部資源

回答

相關問題