Chrome windows cache workaround (#454)

js 3.1.0

* Disable browser caching on chrome on windows [#442]
* work around for chromium issue: https://issues.chromium.org/issues/40542704

js/examples/leaflet.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8"/>
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
         <script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
-        <script src="https://unpkg.com/pmtiles@3.0.7/dist/pmtiles.js"></script>
+        <script src="https://unpkg.com/pmtiles@3.1.0/dist/pmtiles.js"></script>
         <style>
             body, #map {
                 height:100vh;

js/examples/maplibre.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8"/>
         <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
-        <script src="https://unpkg.com/pmtiles@3.0.7/dist/pmtiles.js"></script>
+        <script src="https://unpkg.com/pmtiles@3.1.0/dist/pmtiles.js"></script>
         <style>
             body {
                 margin: 0;

js/examples/maplibre_raster_dem.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8"/>
         <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
-        <script src="https://unpkg.com/pmtiles@3.0.7/dist/pmtiles.js"></script>
+        <script src="https://unpkg.com/pmtiles@3.1.0/dist/pmtiles.js"></script>
         <style>
             body {
                 margin: 0;

js/index.ts

@@ -359,11 +359,24 @@ export class FetchSource implements Source {
   customHeaders: Headers;
   /** @hidden */
   mustReload: boolean;
+  /** @hidden */
+  chromeWindowsNoCache: boolean;
 
   constructor(url: string, customHeaders: Headers = new Headers()) {
     this.url = url;
     this.customHeaders = customHeaders;
     this.mustReload = false;
+    let userAgent = "";
+    if ("navigator" in globalThis) {
+      //biome-ignore lint: cf workers
+      userAgent = (globalThis as any).navigator.userAgent || "";
+    }
+    const isWindows = userAgent.indexOf("Windows") > -1;
+    const isChromiumBased = /Chrome|Chromium|Edg|OPR|Brave/.test(userAgent);
+    this.chromeWindowsNoCache = false;
+    if (isWindows && isChromiumBased) {
+      this.chromeWindowsNoCache = true;
+    }
   }
 
   getKey() {
@@ -404,6 +417,8 @@ export class FetchSource implements Source {
     let cache: string | undefined;
     if (this.mustReload) {
       cache = "reload";
+    } else if (this.chromeWindowsNoCache) {
+      cache = "no-store";
     }
 
     let resp = await fetch(this.url, {

js/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pmtiles",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pmtiles",
-      "version": "3.0.7",
+      "version": "3.1.0",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@types/leaflet": "^1.9.8",

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmtiles",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "description": "PMTiles archive decoder for browsers",
   "type": "module",
   "exports": {

js/test/v3.test.ts

@@ -1,6 +1,6 @@
 import fs from "fs";
 import assert from "node:assert";
-import { test } from "node:test";
+import { afterEach, beforeEach, describe, it, test } from "node:test";
 import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 
@@ -23,6 +23,7 @@ import {
 class MockServer {
   etag?: string;
   numRequests: number;
+  lastCache?: string;
 
   reset() {
     this.numRequests = 0;
@@ -37,6 +38,7 @@ class MockServer {
       http.get(
         "http://localhost:1337/example.pmtiles",
         ({ request, params }) => {
+          this.lastCache = request.cache;
           this.numRequests++;
           const range = request.headers.get("range")?.substr(6).split("-");
           if (!range) {
@@ -415,3 +417,21 @@ test("pmtiles get TileJSON", async () => {
   assert.equal("test_fixture_1.pmtiles", tilejson.name);
   assert.equal("2", tilejson.version);
 });
+
+describe("user agent", async () => {
+  beforeEach(() => {
+    // @ts-ignore
+    global.navigator = { userAgent: "Windows Chrome" };
+  });
+
+  afterEach(() => {
+    // @ts-ignore
+    global.navigator.userAgent = undefined;
+  });
+
+  it("works around caching bug on chrome on windows", async () => {
+    const p = new PMTiles("http://localhost:1337/example.pmtiles");
+    await p.getZxy(0, 0, 0);
+    assert.equal("no-store", mockserver.lastCache);
+  });
+});