[PWA] Cache Third Party Resources from a CDN in a React PWA
Posted answer1215
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[PWA] Cache Third Party Resources from a CDN in a React PWA相关的知识,希望对你有一定的参考价值。
Our service worker caches our static assets - but only those assets that are included in our React App. This means that assets like Bootstrap, which we‘re including from a third-party CDN, won‘t be included in the cache, because they‘re not available at webpack compile time.
We‘ll change the service worker to add caching for those assets by using workbox‘s registerRoute
method, and a regular expression to match the entire URL of the asset. We‘ll pick the staleWhileRevalidate
cache strategy, though cacheFirst
, or networkFirst
would also be valid choices.
Finally, we‘ll change the name of the cache they are stored by supplying a cacheName
parameter.
For some CDN files we also want to cache them:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
To do that, we can update our sw.js config:
workbox.skipWaiting(); workbox.clientsClaim(); // Cache the files from CDN workbox.routing.registerRoute( new RegExp(‘https:.*min.(css|js)‘), workbox.strategies.staleWhileRevalidate() ) // Cache all static files workbox.precaching.precacheAndRoute(self.__precacheManifest || [])
It‘s very important when registering a route that it matches the entire URL of the resource that we‘re trying to cache, otherwise it won‘t work.
The second argument to register a route tells workbox
what strategy to use when caching that resource. Common strategies could be cache
first or network
first. For Bootstrap we‘ll use staleWhileRevalidate
. This will serve Bootstrap as first as possible from the cache first. Then update the cache in the background by making the network call also. We can also give a cache name so that we can indentify from the Dev tool.
workbox.skipWaiting(); workbox.clientsClaim(); workbox.routing.registerRoute( new RegExp(‘https:.*min.(css|js)‘), workbox.strategies.staleWhileRevalidate({ cacheName: ‘cdn-cache‘ }) ) workbox.precaching.precacheAndRoute(self.__precacheManifest || [])
以上是关于[PWA] Cache Third Party Resources from a CDN in a React PWA的主要内容,如果未能解决你的问题,请参考以下文章
E - Third-Party Software - 2 Gym - 102215E (贪心)
mac下python环境及third-party库的安装位置
cmake Can‘t find third_party/gtest
SyntaxError: Unexpected reserved word => prettier/third-party.js