Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes

When i export a large document (e.g.: WIR IM SPORT 2021-08 E-Magazin - Titel - Impfen Ja klar! (lsb.nrw) and visit it on a Samsung S10 / 21 with an updated chrome browser i get the following failure:
When i first load the site some graphics are missing. When i reload the page, the graphic's will be reloaded visible. The effect is there with and without the manifest.cache.

This only happens on Samsung with chrome. The Samsung Browser and firefox browser on the same mobile handled it correct. Any suggestions? 

Thanks Stephan

in bugs by (570 points)
  

1 Answer

+1 vote

First, try updating to the latest version of in5, v3.7.18.

Then, try appending the following code to in5.config.js:

var useCache = true;
var supportSW = 'serviceWorker' in navigator;
var manifestAttribute = document.documentElement.getAttribute("manifest");
if (supportSW && manifestAttribute && useCache) {
  navigator.serviceWorker.register("in5.serviceworker.js", { scope: "./" }).then(
    function (registration) {
      console.log("Service worker registration succeeded:", registration);
    },
    function (error) {
      console.log("Service worker registration failed:", error);
    }
  );
} else {
  console.log("Service workers are not supported.");
}

And save the following code as in5.serviceworker.js and place it at the same level as the index.html file. 

let cacheName;
let assets = [];

function getHash(text) {
  var hash = 0,
    i,
    chr;
  for (i = 0; i < text.length; i++) {
    chr = text.charCodeAt(i);
    hash = (hash << 5) - hash + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return "c" + hash.toString();
}

function parseManifest(rawManifest) {
  const cache = ["/"];
  const trimmedLines = rawManifest.split(/\r|\n/).map(function (line) {
    return line.trim();
  });
  for (const line of trimmedLines) {
    if (line.startsWith("CACHE MANIFEST") || line.startsWith("#") || line === "") {
      continue;
    }
    if (line.endsWith(":")) {
      break;
    }
    cache.push("assets/" + line);
  }
  return cache;
}

async function getManifest() {
  const manifestUrl = new URL("assets/manifest.appcache", location.href).href;
  const init = {
    cache: "reload", // always get uncached version of manifest
    credentials: "include",
    headers: [["X-Use-Fetch", "true"]],
  };
  const manifestRequest = new Request(manifestUrl, init);
  const manifestResponse = await fetch(manifestRequest);
  const manifestContents = await manifestResponse.text();
  return { manifestUrl, manifestContents };
}

async function cacheAssets() {
  const { manifestUrl, manifestContents } = await getManifest();
  const newCacheName = getHash(manifestUrl + manifestContents);
  if (newCacheName === cacheName) return; // manifest did not change
  cacheName = newCacheName;
  assets = parseManifest(manifestContents);
  return addCache(assets);
}

function addCache(cacheAssets) {
  return caches.open(cacheName).then(function (cache) {
    return Promise.all(
      cacheAssets.map(function (url) {
        return cache.add(url).catch(function (reason) {
            console.warn([url + "failed: " + String(reason)]);
        });
      })
    );
});
}

function removeCache() {
  return caches.keys().then(function (cacheNames) {
    return Promise.all(
      cacheNames.map(function (cache) {
        if (cache !== cacheName) {
          return caches.delete(cache);
        }
      })
    );
  });
}

self.addEventListener("install", function (e) {
  e.waitUntil(
    cacheAssets().then(function () {
      self.skipWaiting();
    })
  );
});

self.addEventListener("activate", function (e) {
  e.waitUntil(removeCache());
});

self.addEventListener("fetch", function (e) {
  e.respondWith(
    caches.match(e.request).then(function (response) {
      if (response) {
        return response;
      }
      return fetch(e.request);
    })
  );

  // check for update only once per page load
  if (e.request.url.includes(assets[1])) {
    e.waitUntil(
      cacheAssets().then(function () {
        removeCache();
      })
    );
  }
});

If you have additional questions or issues, please reach out to us: https://ajarproductions.com/pages/contact.php?category=in5

by (26.1k points)
thanks. I will test this the next days.
Is it possible to intecreate the script and service worker in a further release?

Thanks Stephan

Typically, a hot fix like this will get integrated into an upcoming version of in5.

You can see when there's a new version of in5 by doing one of the following:

  • Go to in5 > Info & Updates and click the Check now... button
  • Go to Download/Update in5 on the Ajar Productions website
  • Go to the Changelog to get a link to the download and see which fixes were included in an update
Would the above script take care of an iOS issue too?