问题描述
我一直在使用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).
-
使用NPM存储库: https://www.npmjs.com/package/material-design-icons 并使用构建步骤从node_modules复制CSS文件.优点:允许从NPM自动更新.缺点:设置稍微复杂一些.
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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！