Fix SW register

jarvis394 · jarvis394 · commit b3a17923f26b · 2025-03-28T21:41:43.000+03:00
diff --git a/.env b/.env
@@ -1 +1,2 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+PUBLIC_URL=https://geekr.vercel.app
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <link
       href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
       rel="stylesheet"
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "tinycolor2": "^1.6.0",
     "typescript": "latest",
     "vite": "latest",
+    "vite-plugin-pwa": "^0.21.2",
     "vite-tsconfig-paths": "^4.0.5",
     "workbox-build": "^6.1.1"
   },
@@ -89,7 +90,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.13.14",
     "@types/react": "^18.2.42",
     "@types/react-color": "^3.0.4",
     "@types/react-detect-offline": "^2.4.5",
@@ -109,5 +110,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "8.0.3",
     "prettier": "^3.0.3"
-  }
-}
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
diff --git a/src/components/blocks/UpdateNotification.tsx b/src/components/blocks/UpdateNotification.tsx
@@ -86,7 +86,7 @@ const UpdateNotification = () => {
 
   useEffect(() => {
     const receiveMessage = (event: MessageEvent<string>) => {
-      if (event.origin === import.meta.url) {
+      if (event.origin === import.meta.env.BASE_URL) {
         if (event.data === 'showUpdateNotification') {
           setIsShown(true)
         } else if (event.data === 'showUpdateSuccessNotification') {
diff --git a/src/pages/Post/Statistics.tsx b/src/pages/Post/Statistics.tsx
@@ -556,7 +556,7 @@ const Statistics = ({ post }: { post: Post }) => {
   const share = () => {
     const shareData = {
       title,
-      url: import.meta.url + '/post/' + id,
+      url: window.location.origin + '/post/' + id,
     }
 
     navigator.share(shareData).catch((e) => {
diff --git a/src/service-worker.ts b/src/service-worker.ts
@@ -46,7 +46,7 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true
   },
-  createHandlerBoundToURL(import.meta.url + '/index.html')
+  createHandlerBoundToURL(import.meta.env.BASE_URL + '/index.html')
 )
 
 setCacheNameDetails({
@@ -93,9 +93,7 @@ const newResponse = (
 
 const cacheHeaderPlugin = [
   {
-    // TODO: fix types
-    //@ts-expect-error temporary fix
-    cacheWillUpdate: ({ response }) =>
+    cacheWillUpdate: ({ response }: { response: Response }) =>
       newResponse(response.clone(), (headers: Headers) => {
         headers.set('x-sw-cache', new Date().getTime().toString())
         return headers
diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts
@@ -26,12 +26,9 @@ const isLocalhost = Boolean(
 )
 
 export function register(config?: Config): void {
-  if (
-    import.meta.env.PROD &&
-    'serviceWorker' in navigator
-  ) {
+  if (import.meta.env.PROD && 'serviceWorker' in navigator) {
     window.addEventListener('load', () => {
-      const swUrl = `${import.meta.url}/service-worker.js`
+      const swUrl = '/service-worker.js'
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.
diff --git a/src/serviceWorkerConfig.ts b/src/serviceWorkerConfig.ts
@@ -11,7 +11,7 @@ const config: Config = {
     registration
       .unregister()
       .then(() => {
-        window.postMessage('showUpdateNotification', import.meta.url)
+        window.postMessage('showUpdateNotification', import.meta.env.BASE_URL)
         localStorage.setItem(NEEDS_UPDATE_KEY, 'true')
         console.log(
           '%c[info] %cSent showUpdateNotification message from SW',
@@ -29,7 +29,7 @@ const config: Config = {
       )
   },
   onSuccess: () => {
-    window.postMessage('showUpdateSuccessNotification', import.meta.url)
+    window.postMessage('showUpdateSuccessNotification', window.location.origin)
     console.log(
       '%c[success] %cService worker succeed in registration.',
       'color: #00e676;',
diff --git a/src/utils/formatLdJsonSchema.ts b/src/utils/formatLdJsonSchema.ts
@@ -15,8 +15,8 @@ export default (post: Post) => {
 
   if (!schema.mainEntityOfPage) return
 
-  schema.mainEntityOfPage['@id'] = import.meta.url + getPostLink(post)
-  schema.url = import.meta.url + getPostLink(post)
+  schema.mainEntityOfPage['@id'] = window.location.origin + getPostLink(post)
+  schema.url = window.location.origin + getPostLink(post)
   schema.image = schema.image?.filter(
     (e) => !e.startsWith('https://habr.com/share/publication')
   )
diff --git a/tsconfig.json b/tsconfig.json
@@ -20,6 +20,6 @@
     "types": ["vite/client"]
   },
   "exclude": ["node_modules", "dist"],
-  "include": ["src"],
+  "include": ["src", "src/service-worker.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vercel.json b/vercel.json
@@ -1,8 +1,64 @@
 {
-    "rewrites": [
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "headers": [
+    {
+      "source": "/(.*).html",
+      "headers": [
         {
-            "source": "/(.*)",
-            "destination": "/"
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
         }
-    ]
+      ]
+    },
+    {
+      "source": "/sw.js",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/manifest.webmanifest",
+      "headers": [
+        {
+          "key": "Content-Type",
+          "value": "application/manifest+json"
+        }
+      ]
+    },
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
+        },
+        {
+          "key": "X-Frame-Options",
+          "value": "DENY"
+        },
+        {
+          "key": "X-XSS-Protection",
+          "value": "1; mode=block"
+        }
+      ]
+    }
+  ],
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,10 +1,22 @@
 import react from '@vitejs/plugin-react'
 import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig(() => {
   return {
-    plugins: [react()],
+    plugins: [
+      react(),
+      VitePWA({
+        srcDir: 'src',
+        filename: 'service-worker.ts',
+        injectRegister: false,
+        manifest: false,
+        workbox: {
+          maximumFileSizeToCacheInBytes: 1024 * 1024 * 3,
+        },
+      }),
+    ],
     build: {
       sourcemap: false,
     },
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-SKIP_PREFLIGHT_CHECK=true`
	`1`	`+SKIP_PREFLIGHT_CHECK=true`
	`2`	`+PUBLIC_URL=https://geekr.vercel.app`
Original file line number	Diff line number	Diff line change
`@@ -556,7 +556,7 @@ const Statistics = ({ post }: { post: Post }) => {`
`556`	`556`	`const share = () => {`
`557`	`557`	`const shareData = {`
`558`	`558`	`title,`
`559`		`- url: import.meta.url + '/post/' + id,`
	`559`	`+ url: window.location.origin + '/post/' + id,`
`560`	`560`	`}`
`561`	`561`
`562`	`562`	`navigator.share(shareData).catch((e) => {`
Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,8 @@ export default (post: Post) => {`
`15`	`15`
`16`	`16`	`if (!schema.mainEntityOfPage) return`
`17`	`17`
`18`		`- schema.mainEntityOfPage['@id'] = import.meta.url + getPostLink(post)`
`19`		`- schema.url = import.meta.url + getPostLink(post)`
	`18`	`+ schema.mainEntityOfPage['@id'] = window.location.origin + getPostLink(post)`
	`19`	`+ schema.url = window.location.origin + getPostLink(post)`
`20`	`20`	`schema.image = schema.image?.filter(`
`21`	`21`	`(e) => !e.startsWith('https://habr.com/share/publication')`
`22`	`22`	`)`