From e2ddf8a315480a2b1ff51b9d4c2ebd3bbf43d8c0 Mon Sep 17 00:00:00 2001 From: Olga Khoven Date: Tue, 12 Nov 2024 01:57:06 +0300 Subject: [PATCH] add sw --- package-lock.json | 83 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/index.ts | 2 +- src/sw.js | 54 ++++++++++++++++++++++++++++++ src/sw.ts | 79 -------------------------------------------- webpack.config.js | 8 ++++- 6 files changed, 146 insertions(+), 81 deletions(-) create mode 100644 src/sw.js delete mode 100644 src/sw.ts diff --git a/package-lock.json b/package-lock.json index efa5dd5..385346c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "@typescript-eslint/eslint-plugin": "^8.11.0", "@typescript-eslint/parser": "^8.11.0", "babel-plugin-rewire": "^1.2.0", + "copy-webpack-plugin": "^12.0.2", "css-loader": "^7.1.2", "eslint": "^9.13.0", "eslint-config-prettier": "^9.1.0", @@ -3235,6 +3236,88 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "license": "MIT" }, + "node_modules/copy-webpack-plugin": { + "version": "12.0.2", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-12.0.2.tgz", + "integrity": "sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.1", + "globby": "^14.0.0", + "normalize-path": "^3.0.0", + "schema-utils": "^4.2.0", + "serialize-javascript": "^6.0.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + } + }, + "node_modules/copy-webpack-plugin/node_modules/ajv": { + "version": "8.17.1", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", + "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "fast-uri": "^3.0.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3" + }, + "peerDependencies": { + "ajv": "^8.8.2" + } + }, + "node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true, + "license": "MIT" + }, + "node_modules/copy-webpack-plugin/node_modules/schema-utils": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", diff --git a/package.json b/package.json index 5d2f50c..2b8eb18 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@typescript-eslint/eslint-plugin": "^8.11.0", "@typescript-eslint/parser": "^8.11.0", "babel-plugin-rewire": "^1.2.0", + "copy-webpack-plugin": "^12.0.2", "css-loader": "^7.1.2", "eslint": "^9.13.0", "eslint-config-prettier": "^9.1.0", diff --git a/src/index.ts b/src/index.ts index c494386..b7c547b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -164,7 +164,7 @@ if (flag) { if ("serviceWorker" in navigator) { navigator.serviceWorker - .register("/src/sw.js", { scope: "/src/" }) + .register("/sw.js", { scope: "/" }) .then((reg) => { console.log("sw registered", reg); }) diff --git a/src/sw.js b/src/sw.js new file mode 100644 index 0000000..b262d97 --- /dev/null +++ b/src/sw.js @@ -0,0 +1,54 @@ +const CACHE_NAME = "cache-v1"; +const CACHE_URLS = [ + "/", +]; + +self.addEventListener("install", (event) => { + console.log("Installed"); + event.waitUntil( + caches.open(CACHE_NAME).then((cache) => { + console.log("Cashed:", CACHE_URLS); + return cache.addAll(CACHE_URLS); + }) + ); + self.skipWaiting(); + }); + + self.addEventListener("activate", (event) => { + console.log("Activated"); + event.waitUntil( + caches.keys().then((cacheNames) => + Promise.all( + cacheNames.filter((cacheName) => cacheName !== CACHE_NAME).map((cacheName) => caches.delete(cacheName)) + ) + ) + ); + self.clients.claim(); + }); + + +self.addEventListener("fetch", (event) => { + event.respondWith( + caches.match(event.request).then((cachedResponse) => { + if (cachedResponse) { + return cachedResponse; + } + + return fetch(event.request) + .then((response) => { + console.log("Status:", response.status); + if (!response.ok) { + console.warn("Network response not ok:", response.status); + return new Response("Failed to load resource"); + } + return response; + }) + .catch((error) => { + console.error("Fetch failed:", error); + return new Response("not cached"); + }); + }), + ); +}); + + diff --git a/src/sw.ts b/src/sw.ts deleted file mode 100644 index a3186d3..0000000 --- a/src/sw.ts +++ /dev/null @@ -1,79 +0,0 @@ -const CACHE_NAME = "cache-v1"; -const CACHE_URLS = [ - "/", - "/index.html", - "/src/index.js", - //"/src/auth/loginView.js", - //"/src/auth/signupView.js", - "/src/pages/home.js", - //"/src/pages/feed/feedView.js", - //"/src/pages/notification/notification.js", - //"/src/pages/profile/profileView.js", - //"/src/pages/settingsView.js", - //"/styles/style.css", -]; - -self.addEventListener("install", (event: ExtendableEvent) => { - console.log("Service Worker installing"); - event.waitUntil( - caches - .open(CACHE_NAME) - .then((cache) => { - console.log("Caching resources:", CACHE_URLS); - return cache.addAll(CACHE_URLS); - }) - .catch((error) => { - console.error("Error caching resources:", error); - }), - ); -}); - -self.addEventListener("activate", (event: ExtendableEvent) => { - console.log("Service Worker activated"); - event.waitUntil( - caches.keys().then((cacheNames) => { - return Promise.all( - cacheNames - .filter((cacheName) => cacheName !== CACHE_NAME) - .map((cacheName) => caches.delete(cacheName)), - ); - }), - ); -}); - -self.addEventListener("fetch", (event: FetchEvent) => { - console.log("Trying to fetch:", event.request.url); - event.respondWith( - caches.match(event.request).then((cachedResponse) => { - if (cachedResponse) { - console.log("Serving from cache:", event.request.url); - return cachedResponse; - } - - console.log("Fetching from network:", event.request.url); - return fetch(event.request) - .then((response) => { - console.log("Network response status:", response.status); - if (!response.ok) { - console.warn("Network response not ok:", response.status); - return new Response("Failed to load resource"); - } - return response; - }) - .catch((error) => { - console.error("Fetch failed:", error); - return new Response("Offline and not cached"); - }); - }), - ); -}); - -/* -fetch("/index.html").then((response) => { - if (response.ok) { - response.text().then((text) => console.log("Content:", text)); - } else { - console.error("Fetch error:", response.status); - } -}); -*/ diff --git a/webpack.config.js b/webpack.config.js index 0d961ed..b4fff1d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); const path = require("path"); module.exports = { @@ -28,6 +29,9 @@ module.exports = { filename: "index.html", inject: true, }), + new CopyWebpackPlugin({ + patterns: [{ from: "src/sw.js", to: "sw.js" }], + }), ], resolve: { extensions: [".ts", ".js"], @@ -36,7 +40,9 @@ module.exports = { static: path.join(__dirname, "dist"), open: true, port: 8090, - historyApiFallback: true, + historyApiFallback: { + rewrites: [{ from: /^\/sw\.js$/, to: "/sw.js" }], + }, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers":