如何使用Service Worker缓存外部URL? [英] How can I cache external URLs using service worker?

问题描述

我一直在使用Google Web Starter Kit( https://github.com/google/web-starter-kit )，并且可以使用一些渐进式网络应用程序，但存在一件事:从外部CDN缓存静态文件.例如.我正在使用来自 https://fonts.googleapis.com/icon?family=的MDL图标Material + Icons 我看不到缓存请求的方法，因为服务工作者仅响应我的应用程序域内的URL.

I've been playing with the Google Web Starter Kit (https://github.com/google/web-starter-kit) and have got a little progressive web app working but am stuck on one thing: caching static files from external CDNs. E.g. I'm using MDL icons from https://fonts.googleapis.com/icon?family=Material+Icons I can't see a way to cache the request as the service worker only responds to URLs within my app domain.

我看到的选项:1.下载文件并将其放在供应商文件夹中.优点:易于设置SW缓存.缺点:文件不会随着新图标的添加而保持最新(尽管这并不重要，因为我的代码只会使用可用的图标).

Options I see: 1. Download the file and put it in a vendor folder. Advantages: easy to set up SW cache. Disadvantages: file won't stay up to date as new icons are added (though that won't really matter as my code will only use the icons available).

1. 使用NPM存储库: https://www.npmjs.com/package/material-design-icons 并使用构建步骤从node_modules复制CSS文件.优点:允许从NPM自动更新.缺点:设置稍微复杂一些.

1. Use the NPM repo: https://www.npmjs.com/package/material-design-icons and use build step to copy CSS file from node_modules. Advantages: will allow auto-updating from NPM. Disadvantages: slightly more complex to set up.

一些新颖的代理方法，使我可以使用SW来缓存外部URL.例如myapp.com/loadExternal?url= https://fonts.googleapis.com/icon?family=材料+图标

Some fancy proxy method that would allow me to use the SW to cache an external URL. e.g. myapp.com/loadExternal?url=https://fonts.googleapis.com/icon?family=Material+Icons

我现在倾向于2，但是知道是否有3可能会很酷.

I'm leaning towards 2 right now but would be cool to know if 3 is possible.

推荐答案

我已阅读

I had a read of the sw-toolbox docs and figured out how to do it. Just had to add this to my runtime caching:

// cache fonts hosted on google CDN
global.toolbox.router.get(/googleapis/, global.toolbox.fastest);

这篇关于如何使用Service Worker缓存外部URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！