zoukankan      html  css  js  c++  java
  • [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 registerRoutemethod, 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 || [])
  • 相关阅读:
    LINQ学习心得分享(一)LINQ简介和基础学习
    线程实用解析(三)线程的同步
    线程实用解析(一)线程初识
    线程实用解析(四)异步操作
    Serialization全解析
    常用排序算法解析
    正则表达式全解析+常用示例
    线程实用解析(二)创建调用有参函数的线程和线程池简介
    线程实用解析(五)BackgroundWorker和Timer
    metro 拖动元素 元素 GIS
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10192881.html
Copyright © 2011-2022 走看看