Safari: ws cache busting (#27945)

Author: naltatis

assets/js/views/App.vue

@@ -172,15 +172,11 @@ export default defineComponent({
 				return;
 			}
 
-			const loc = window.location;
-			const protocol = loc.protocol == "https:" ? "wss:" : "ws:";
-			const uri =
-				protocol +
-				"//" +
-				loc.hostname +
-				(loc.port ? ":" + loc.port : "") +
-				loc.pathname +
-				"ws";
+			const loc = new URL("ws", window.location.href);
+			loc.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+			// force Safari to use a fresh connection
+			loc.searchParams.set("t", String(Date.now()));
+			const uri = loc.href;
 
 			this.ws = new WebSocket(uri);
 			this.ws.onerror = () => {

tests/ws.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from "@playwright/test";
 import { start, stop, baseUrl } from "./evcc";
 
+const wsPattern = /\/ws\?/;
+
 test.use({ baseURL: baseUrl() });
 test.describe.configure({ mode: "parallel" });
 
@@ -12,7 +14,7 @@ test.afterEach(async () => {
 });
 
 test("show loadpoint with connect websocket", async ({ page }) => {
-  await page.routeWebSocket("/ws", (ws) => {
+  await page.routeWebSocket(wsPattern, (ws) => {
     const server = ws.connectToServer();
     ws.onMessage((message) => {
       server.send(message);
@@ -28,15 +30,15 @@ test("show loadpoint with connect websocket", async ({ page }) => {
 });
 
 test("show no config screen while startup", async ({ page }) => {
-  await page.routeWebSocket("/ws", () => {
+  await page.routeWebSocket(wsPattern, () => {
     // connect, but don't send any messages
   });
   await page.goto("/");
   await expect(page.getByRole("link", { name: "Let's start configuration" })).toBeHidden();
 });
 
 test("show offline when websocket is closed", async ({ page }) => {
-  await page.routeWebSocket("/ws", (ws) => {
+  await page.routeWebSocket(wsPattern, (ws) => {
     ws.close();
   });
   await page.goto("/");