Merged in r2-2822-theme-caching (pull request #6743)

R2-2822: Dynamically caching theme and manifest in workbox

Approved-by: Alberto Espinoza

Author: jtoliver-quoin

app/javascript/libs/load-external-theme.js

@@ -4,7 +4,9 @@ const themePromise =
   process.env.NODE_ENV !== "test"
     ? await (async () => {
         if (window.useTheme) {
-          const { default: importedTheme } = await import(/* webpackIgnore: true */ `${window.location.origin}/theme`);
+          const { default: importedTheme } = await import(
+            /* webpackIgnore: true */ `${window.location.origin}/theme?__WB_REVISION__=${window.themeRevision}`
+          );
 
           return importedTheme;
         }

app/javascript/worker.js

@@ -73,6 +73,19 @@ registerRoute(
   METHODS.GET
 );
 
+registerRoute(
+  /\/(?:theme|manifest).*$/,
+  new CacheFirst({
+    cacheName: "theme",
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 2
+      })
+    ]
+  }),
+  METHODS.GET
+);
+
 // Api Endpoints
 Object.values(METHODS).forEach(method => {
   registerRoute(/\/api\/.*/, new NetworkOnly(), method);
@@ -89,16 +102,7 @@ const manifest = self.__WB_MANIFEST.map(entry => {
   return entry;
 });
 
-const revision = manifest?.filter(({ url }) => url === "/")?.[0]?.revision;
-
-const themeFiles = ["theme", "manifest.json"].map(asset => {
-  return {
-    url: `${self.location.origin}/${asset}`,
-    revision
-  };
-});
-
-precacheAndRoute([...manifest, ...themeFiles]);
+precacheAndRoute(manifest);
 
 setCatchHandler(({ event }) => {
   if (isNav(event)) return caches.match(getCacheKeyForURL("/"));

app/models/theme.rb

@@ -28,7 +28,8 @@ class Theme < ApplicationRecord
 
   PICTORIAL_SIZES = %w[144 192 256].freeze
 
-  store_accessor :data, :site_description, :site_title, :colors, :use_contained_nav_style, :show_powered_by_primero
+  store_accessor :data, :site_description, :site_title, :colors, :use_contained_nav_style, :show_powered_by_primero,
+                 :revision
 
   has_one_attached :login_background
   has_one_attached :logo
@@ -47,6 +48,12 @@ class Theme < ApplicationRecord
   validates :favicon, presence: true
   # rubocop:enable Naming/VariableNumber
 
+  before_save :generate_new_revision
+
+  def generate_new_revision
+    self.revision = SecureRandom.uuid
+  end
+
   def valid_html_colors
     return unless colors.present?
 

app/views/layouts/application.html.erb

@@ -12,7 +12,7 @@
   <meta name="google" value="notranslate" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title><%= @theme&.site_title || 'Primero' %></title>
-  <link rel="manifest" href="/manifest.json">
+  <link rel="manifest" href="/manifest.json?__WB_REVISION__=<%= @theme.revision %>">
   <link rel="icon" type="image/x-icon" href="<%= @theme&.favicon.present? ? rails_blob_path(@theme&.favicon, only_path: true) : '/favicon.ico' %>" />
   <!-- jss-insertion-point -->
   <%= stylesheet_bundle_tag 'application', skip_pipeline: true, manifest: :application, nonce: true %>
@@ -22,6 +22,7 @@
   <%= javascript_tag nonce: true do %>
     window.locationManifest = <%= available_locations %>
     window.useTheme = <%= @theme.present? %>
+    window.themeRevision = "<%= @theme.revision %>"
   <% end %>
   <%= javascript_include_tag '/javascripts/i18n.js', nonce: true %>