fixing pwa

app/page.tsx

@@ -1,3 +1,4 @@
+import InstallPrompt from "@/components/install-promp";
 import BannerHumasNew from "@/components/landing/banner-new";
 import BodyLayout from "@/components/landing/BodyLayout";
 import AnalyticDrawer from "@/components/landing/drawer";
@@ -10,6 +11,7 @@ export default function Home() {
   return (
     <>
       <section className="flex flex-col">
+        {/* <InstallPrompt /> */}
         <NewsTicker />
         <AnalyticDrawer />
         <BannerHumasNew />

app/register-sw.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function RegisterSW() {
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      window.addEventListener("load", () => {
+        navigator.serviceWorker
+          .register("/sw.js")
+          .then((registration) => {
+            console.log("Service Worker registered: ", registration);
+          })
+          .catch((registrationError) => {
+            console.log(
+              "Service Worker registration failed: ",
+              registrationError
+            );
+          });
+      });
+    }
+  }, []);
+
+  return null;
+}

components/install-promp.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+function InstallPrompt() {
+  const [isIOS, setIsIOS] = useState(false);
+  const [isStandalone, setIsStandalone] = useState(false);
+
+  useEffect(() => {
+    setIsIOS(
+      /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
+    );
+
+    setIsStandalone(window.matchMedia("(display-mode: standalone)").matches);
+  }, []);
+
+  if (isStandalone) {
+    return null; // Don't show install button if already installed
+  }
+
+  return (
+    <div>
+      <h3>Install App</h3>
+      <button>Add to Home Screen</button>
+      {isIOS && (
+        <p>
+          To install this app on your iOS device, tap the share button
+          <span role="img" aria-label="share icon">
+            {" "}
+            ⎋{" "}
+          </span>
+          and then &quot;Add to Home Screen&quot;
+          <span role="img" aria-label="plus icon">
+            {" "}
+            +{" "}
+          </span>
+          .
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default InstallPrompt;

next.config.js

@@ -1,18 +1,61 @@
 // next.config.js
-const withPWA = require("next-pwa")({
+// const withPWA = require("next-pwa")({
-  dest: "public",
+//   dest: "public",
-  register: true,
+//   register: true,
-  skipWaiting: true,
+//   skipWaiting: true,
-  // disable: process.env.NODE_ENV === "development", // disable PWA di mode dev
+//   // disable: process.env.NODE_ENV === "development", // disable PWA di mode dev
-});
+// });
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "X-Content-Type-Options",
+            value: "nosniff",
+          },
+          {
+            key: "X-Frame-Options",
+            value: "DENY",
+          },
+          {
+            key: "Referrer-Policy",
+            value: "strict-origin-when-cross-origin",
+          },
+        ],
+      },
+      {
+        source: "/sw.js",
+        headers: [
+          {
+            key: "Content-Type",
+            value: "application/javascript; charset=utf-8",
+          },
+          {
+            key: "Cache-Control",
+            value: "no-cache, no-store, must-revalidate",
+          },
+          {
+            key: "Content-Security-Policy",
+            value: "default-src 'self'; script-src 'self'",
+          },
+        ],
+      },
+    ];
+  },
   eslint: {
     ignoreDuringBuilds: true,
   },
   experimental: {
     serverActions: true,
+    pwa: {
+      dest: "public",
+      register: true,
+      skipWaiting: true,
+    },
   },
   images: {
     remotePatterns: [
@@ -23,4 +66,5 @@ const nextConfig = {
   },
 };
 
-module.exports = withPWA(nextConfig);
+// module.exports = withPWA(nextConfig);
+module.exports = nextConfig;

package.json

@@ -48,7 +48,6 @@
     "js-cookie": "^3.0.5",
     "next": "15.3.0",
     "next-intl": "^3.26.0",
-    "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",
     "react": "19.1.0",

public/manifest.json

@@ -1,7 +1,8 @@
 {
   "name": "Konten Humas",
-  "short_name": "PWA",
+  "short_name": "HUMAS",
   "start_url": "/",
+  "description": "DIVISI HUMAS POLRI - Pengelola Informasi dan Dokumentasi Polri.",
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#000000",

public/sw.js

@@ -21,22 +21,20 @@ if (!self.define) {
 
   const singleRequire = (uri, parentUri) => {
     uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
+    return (
-      
+      registry[uri] ||
-        new Promise(resolve => {
+      new Promise((resolve) => {
-          if ("document" in self) {
+        if ("document" in self) {
-            const script = document.createElement("script");
+          const script = document.createElement("script");
-            script.src = uri;
+          script.src = uri;
-            script.onload = resolve;
+          script.onload = resolve;
-            document.head.appendChild(script);
+          document.head.appendChild(script);
-          } else {
+        } else {
-            nextDefineUri = uri;
+          nextDefineUri = uri;
-            importScripts(uri);
+          importScripts(uri);
-            resolve();
+          resolve();
-          }
+        }
-        })
+      }).then(() => {
-      
-      .then(() => {
         let promise = registry[uri];
         if (!promise) {
           throw new Error(`Module ${uri} didn’t register its module`);
@@ -47,54 +45,85 @@ if (!self.define) {
   };
 
   self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    const uri =
+      nextDefineUri ||
+      ("document" in self ? document.currentScript.src : "") ||
+      location.href;
     if (registry[uri]) {
       // Module is already loading or loaded.
       return;
     }
     let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
+    const require = (depUri) => singleRequire(depUri, uri);
     const specialDeps = {
       module: { uri },
       exports,
-      require
+      require,
     };
-    registry[uri] = Promise.all(depsNames.map(
+    registry[uri] = Promise.all(
-      depName => specialDeps[depName] || require(depName)
+      depsNames.map((depName) => specialDeps[depName] || require(depName))
-    )).then(deps => {
+    ).then((deps) => {
       factory(...deps);
       return exports;
     });
   };
 }
-define(['./workbox-e43f5367'], (function (workbox) { 'use strict';
+define(["./workbox-e43f5367"], function (workbox) {
+  "use strict";
 
   importScripts();
   self.skipWaiting();
   workbox.clientsClaim();
-  workbox.registerRoute("/", new workbox.NetworkFirst({
+  workbox.registerRoute(
-    "cacheName": "start-url",
+    "/",
-    plugins: [{
+    new workbox.NetworkFirst({
-      cacheWillUpdate: async ({
+      cacheName: "start-url",
-        request,
+      plugins: [
-        response,
+        {
-        event,
+          cacheWillUpdate: async ({ request, response, event, state }) => {
-        state
+            if (response && response.type === "opaqueredirect") {
-      }) => {
+              return new Response(response.body, {
-        if (response && response.type === 'opaqueredirect') {
+                status: 200,
-          return new Response(response.body, {
+                statusText: "OK",
-            status: 200,
+                headers: response.headers,
-            statusText: 'OK',
+              });
-            headers: response.headers
+            }
-          });
+            return response;
-        }
+          },
-        return response;
+        },
-      }
+      ],
-    }]
+    }),
-  }), 'GET');
+    "GET"
-  workbox.registerRoute(/.*/i, new workbox.NetworkOnly({
+  );
-    "cacheName": "dev",
+  workbox.registerRoute(
-    plugins: []
+    /.*/i,
-  }), 'GET');
+    new workbox.NetworkOnly({
+      cacheName: "dev",
+      plugins: [],
+    }),
+    "GET"
+  );
+});
 
-}));
+self.addEventListener("push", function (event) {
+  if (event.data) {
+    const data = event.data.json();
+    const options = {
+      body: data.body,
+      icon: data.icon || "/divhumas.png",
+      badge: "/divhumas.png",
+      vibrate: [100, 50, 100],
+      data: {
+        dateOfArrival: Date.now(),
+        primaryKey: "2",
+      },
+    };
+    event.waitUntil(self.registration.showNotification(data.title, options));
+  }
+});
+
+self.addEventListener("notificationclick", function (event) {
+  console.log("Notification click received.");
+  event.notification.close();
+  event.waitUntil(clients.openWindow("<https://kontenhumas.com>"));
+});