Merge pull request #880 from ONEARMY/hotfix/cache-all-images

Hotfix/cache all images

config/webpack.config.js

@@ -563,8 +563,8 @@ module.exports = function(webpackEnv) {
           // NOTE 2020-01-14 CC - Add support to cache firebase storage and map tiles
           runtimeCaching: [
             {
-              urlPattern: /.*\.(?:png|gif|jpg|jpeg|webp|svg).*/gi,
-              handler: 'cacheFirst',
+              urlPattern: new RegExp(/.*\.(?:png|gif|jpg|jpeg|webp|svg).*/gi),
+              handler: 'StaleWhileRevalidate',
               options: {
                 cacheName: 'oa-images',
                 fetchOptions: {
@@ -574,20 +574,44 @@ module.exports = function(webpackEnv) {
                 backgroundSync: {
                   name: 'oa-images-background',
                   options: {
-                    maxRetentionTime: 60 * 24,
+                    maxRetentionTime: 60 * 60 * 24,
                   },
                 },
                 expiration: {
-                  maxAgeSeconds: 60 * 24 * 7 * 30,
+                  maxAgeSeconds: 60 * 60 * 24 * 365,
                   maxEntries: 1000,
                 },
+                matchOptions: {
+                  ignoreSearch: true,
+                },
               },
             },
+            {
+              urlPattern: new RegExp(
+                '^https://firebasestorage\\.googleapis\\.com/',
+              ),
+              handler: 'StaleWhileRevalidate',
+              options: {
+                cacheName: 'oa-other',
+                fetchOptions: {
+                  credentials: 'same-origin',
+                  mode: 'cors',
+                },
+                matchOptions: {
+                  ignoreSearch: true,
+                },
+              },
+            },
+            {
+              urlPattern: new RegExp('^https://firestore\\.googleapis\\.com/'),
+              handler: 'NetworkOnly',
+            },
           ],
           // end update 2020-01-14
           exclude: [/\.map$/, /asset-manifest\.json$/],
           importWorkboxFrom: 'cdn',
           navigateFallback: publicUrl + '/index.html',
+          navigateFallbackWhitelist: [/^(?!\/__)/],
           navigateFallbackBlacklist: [
             // Exclude URLs starting with /_, as they're likely an API call
             new RegExp('^/_'),

firebase.json

@@ -26,6 +26,30 @@
           }
         ]
       }
+    ],
+    "headers": [
+      {
+        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
+        "headers": [
+          {
+            "key": "Access-Control-Allow-Origin",
+            "value": "*"
+          }
+        ]
+      },
+      {
+        "source": "**/*.@(jpg|jpeg|gif|png)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=604800, s-maxage=3600"
+          },
+          {
+            "key": "Access-Control-Allow-Origin",
+            "value": "*"
+          }
+        ]
+      }
     ]
   },
   "functions": {

package.json

@@ -15,9 +15,6 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "analyze": "npm run build -- --stats & npx webpack-bundle-analyzer ./build/bundle-stats.json",
-    "prod:serve": "npm run prod:copy && npm run build && npm run prod:restore && firebase serve",
-    "prod:copy": "cp .env .env-default && cp ./.env-prod ./.env",
-    "prod:restore": "cp .env-default .env && rm .env-default",
     "start:ci": "cross-env SITE_VARIANT=test-ci BROWSER=none PORT=3456 npm run start",
     "cy:run": "cross-env TZ='Europe/London' cypress run",
     "cy:open": "cross-env TZ='Europe/London' npx cypress open",
@@ -190,7 +187,7 @@
     "webpack": "4.28.3",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3"
+    "workbox-webpack-plugin": "4.3.1"
   },
   "resolutions": {
     "@types/react": "16.8.4"