update fix (#994)

* update trigger change * try catch delete cache * remove font from app worker cache * put back update when service worker is activated * remove css preload * add back font to service worker cache * Update http.go * clam client when update * load root from network first * Update http_test.go * try fix mobile scrolling * add apple-mobile-web-app-capable meta tag * remove root bypass * defer google analytic * update service worker sooner * Update engine.go * Revert "update service worker sooner" This reverts commit b242351. * prioritize service worker update * Update engine_test.go
maxence-charriere · Oct 2, 2024 · 34ebbe9 · 34ebbe9
1 parent 127803b
commit 34ebbe9
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 50 deletions.
diff --git a/pkg/analytics/google-analytics.go b/pkg/analytics/google-analytics.go
@@ -10,7 +10,7 @@ import (
 // field to initialize Google Analytics.
 func GoogleAnalyticsHeader(propertyID string) string {
 	return fmt.Sprintf(`<!-- Global site tag (gtag.js) - Google Analytics -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=%s"></script>
+	<script defer src="https://www.googletagmanager.com/gtag/js?id=%s"></script>
 	<script>
 	  window.dataLayer = window.dataLayer || [];
 	  function gtag(){dataLayer.push(arguments);}

diff --git a/pkg/app/engine.go b/pkg/app/engine.go
@@ -340,7 +340,7 @@ func (e *engineX) Encode(w *bytes.Buffer, document HTMLHtml) error {
 	children = append(children, body.body()...)
 	body.setBody(children)
 
-	w.WriteString("<!DOCTYPE html>\n")
+	w.WriteString("<!doctype html>\n")
 	e.nodes.Encode(e.baseContext(), w, document)
 	return nil
 }

diff --git a/pkg/app/engine_test.go b/pkg/app/engine_test.go
@@ -266,7 +266,7 @@ func TestEngineEncode(t *testing.T) {
 			),
 		))
 		require.NoError(t, err)
-		require.Equal(t, "<!DOCTYPE html>\n<html>\n  <body>\n    <span></span>\n    bye\n  </body>\n</html>", b.String())
+		require.Equal(t, "<!doctype html>\n<html>\n  <body>\n    <span></span>\n    bye\n  </body>\n</html>", b.String())
 	})
 }
 

diff --git a/pkg/app/gen/app-worker.js b/pkg/app/gen/app-worker.js
@@ -4,28 +4,41 @@
 const cacheName = "app-" + "{{.Version}}";
 const resourcesToCache = {{.ResourcesToCache}};
 
-self.addEventListener("install", (event) => {
-  console.log("installing app worker {{.Version}}");
-  event.waitUntil(installWorker());
+self.addEventListener("install", async (event) => {
+  try {
+    console.log("installing app worker {{.Version}}");
+    await installWorker();
+    await self.skipWaiting();
+  } catch (error) {
+    console.error("error during installation:", error);
+  }
 });
 
 async function installWorker() {
   const cache = await caches.open(cacheName);
   await cache.addAll(resourcesToCache);
-  await self.skipWaiting(); // Use this new service worker
 }
 
-self.addEventListener("activate", (event) => {
-  event.waitUntil(deletePreviousCaches());
-  console.log("app worker {{.Version}} is activated");
+self.addEventListener("activate", async (event) => {
+  try {
+    await deletePreviousCaches(); // Await cache cleanup
+    await self.clients.claim(); // Ensure the service worker takes control of the clients
+    console.log("app worker {{.Version}} is activated");
+  } catch (error) {
+    console.error("error during activation:", error);
+  }
 });
 
 async function deletePreviousCaches() {
   keys = await caches.keys();
   keys.forEach(async (key) => {
     if (key != cacheName) {
-      console.log("deleting", key, "cache");
-      await caches.delete(key);
+      try {
+        console.log("deleting", key, "cache");
+        await caches.delete(key);
+      } catch (err) {
+        console.error("deleting", key, "cache failed:", err);
+      }
     }
   });
 }
@@ -35,11 +48,11 @@ self.addEventListener("fetch", (event) => {
 });
 
 async function fetchWithCache(request) {
-  cachedResponse = await caches.match(request);
+  const cachedResponse = await caches.match(request);
   if (cachedResponse) {
     return cachedResponse;
   }
-  return fetch(request);
+  return await fetch(request);
 }
 
 // -----------------------------------------------------------------------------

diff --git a/pkg/app/gen/app.js b/pkg/app/gen/app.js
@@ -31,18 +31,16 @@ goappInitWebAssembly();
 // -----------------------------------------------------------------------------
 async function goappInitServiceWorker() {
   if ("serviceWorker" in navigator) {
-    window.addEventListener("load", async () => {
-      try {
-        const registration = await navigator.serviceWorker.register(
-          "{{.WorkerJS}}"
-        );
-        goappServiceWorkerRegistration = registration;
-        goappSetupNotifyUpdate(registration);
-        goappSetupPushNotification();
-      } catch (err) {
-        console.error("goapp service worker registration failed: ", err);
-      }
-    });
+    try {
+      const registration = await navigator.serviceWorker.register(
+        "{{.WorkerJS}}"
+      );
+      goappServiceWorkerRegistration = registration;
+      goappSetupNotifyUpdate(registration);
+      goappSetupPushNotification();
+    } catch (err) {
+      console.error("goapp service worker registration failed: ", err);
+    }
   }
 }
 
@@ -64,10 +62,11 @@ function goappSetupNotifyUpdate(registration) {
       if (!navigator.serviceWorker.controller) {
         return;
       }
-      if (newSW.state != "activated") {
-        return;
+
+      switch (newSW.state) {
+        case "installed":
+          goappOnUpdate();
       }
-      goappOnUpdate();
     });
   });
 }

diff --git a/pkg/app/http.go b/pkg/app/http.go
@@ -347,12 +347,12 @@ func (h *Handler) makeAppWorkerJS() []byte {
 		"/app.js",
 		"/manifest.webmanifest",
 		"/wasm_exec.js",
-		"/",
 		"/web/app.wasm",
+		"/",
 	)
+	setResources(h.Fonts...)
 	setResources(h.Icon.Default, h.Icon.Large, h.Icon.Maskable)
 	setResources(h.Styles...)
-	setResources(h.Fonts...)
 	setResources(h.Scripts...)
 	setResources(h.CacheableResources...)
 
@@ -361,7 +361,7 @@ func (h *Handler) makeAppWorkerJS() []byte {
 		resourcesTocache = append(resourcesTocache, h.Resources.Resolve(k))
 	}
 	sort.Slice(resourcesTocache, func(a, b int) bool {
-		return strings.Compare(resourcesTocache[a], resourcesTocache[b]) < 0
+		return strings.Compare(resourcesTocache[a], resourcesTocache[b]) > 0
 	})
 
 	var b bytes.Buffer
@@ -647,7 +647,10 @@ func (h *Handler) servePage(w http.ResponseWriter, r *http.Request) {
 					Content(h.ThemeColor),
 				Meta().
 					Name("viewport").
-					Content("width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover"),
+					Content("width=device-width, initial-scale=1, viewport-fit=cover"),
+				Meta().
+					Name("apple-mobile-web-app-capable").
+					Content("yes"),
 				Meta().
 					Property("og:url").
 					Content(resolveOGResource(h.Domain, h.Resources.Resolve(page.URL().Path))),
@@ -706,15 +709,6 @@ func (h *Handler) servePage(w http.ResponseWriter, r *http.Request) {
 					}
 					return nil
 				}),
-				Range(h.Styles).Slice(func(i int) UI {
-					if resource := parseHTTPResource(h.Styles[i]); resource.URL != "" {
-						return resource.toLink().
-							Type("text/css").
-							Rel("preload").
-							As("style")
-					}
-					return nil
-				}),
 				Link().
 					Rel("icon").
 					Href(icon),

diff --git a/pkg/app/http_test.go b/pkg/app/http_test.go
@@ -263,8 +263,8 @@ func TestHandlerServeAppWorkerJSWithLocalDir(t *testing.T) {
 	body := w.Body.String()
 	require.Equal(t, http.StatusOK, w.Code)
 	require.Equal(t, "application/javascript", w.Header().Get("Content-Type"))
-	require.Contains(t, body, `self.addEventListener("install", (event) => {`)
-	require.Contains(t, body, `self.addEventListener("activate", (event) => {`)
+	require.Contains(t, body, `self.addEventListener("install", async (event) => {`)
+	require.Contains(t, body, `self.addEventListener("activate", async (event) => {`)
 	require.Contains(t, body, `self.addEventListener("fetch", (event) => {`)
 	require.Contains(t, body, `"/web/hello.css"`)
 	require.Contains(t, body, `"/web/hello.js"`)
@@ -294,8 +294,8 @@ func TestHandlerServeAppWorkerJSWithRemoteBucket(t *testing.T) {
 	body := w.Body.String()
 	require.Equal(t, http.StatusOK, w.Code)
 	require.Equal(t, "application/javascript", w.Header().Get("Content-Type"))
-	require.Contains(t, body, `self.addEventListener("install", (event) => {`)
-	require.Contains(t, body, `self.addEventListener("activate", (event) => {`)
+	require.Contains(t, body, `self.addEventListener("install", async (event) => {`)
+	require.Contains(t, body, `self.addEventListener("activate", async (event) => {`)
 	require.Contains(t, body, `self.addEventListener("fetch", (event) => {`)
 	require.Contains(t, body, `"https://storage.googleapis.com/go-app/web/hello.css"`)
 	require.Contains(t, body, `"https://storage.googleapis.com/go-app/web/hello.js"`)
@@ -325,8 +325,8 @@ func TestHandlerServeAppWorkerJSWithGitHubPages(t *testing.T) {
 	body := w.Body.String()
 	require.Equal(t, http.StatusOK, w.Code)
 	require.Equal(t, "application/javascript", w.Header().Get("Content-Type"))
-	require.Contains(t, body, `self.addEventListener("install", (event) => {`)
-	require.Contains(t, body, `self.addEventListener("activate", (event) => {`)
+	require.Contains(t, body, `self.addEventListener("install", async (event) => {`)
+	require.Contains(t, body, `self.addEventListener("activate", async (event) => {`)
 	require.Contains(t, body, `self.addEventListener("fetch", (event) => {`)
 	require.Contains(t, body, `"/go-app/web/hello.css"`)
 	require.Contains(t, body, `"/go-app/web/hello.js"`)

diff --git a/pkg/app/scripts.go b/pkg/app/scripts.go