next 16 update, security fixes and pwa update

Author: riofriz

app/_components/FeatureComponents/PWA/PWAInstallPrompt.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, type JSX } from "react";
 
 type BeforeInstallPromptEvent = Event & {
   prompt: () => Promise<void>;

app/_components/FeatureComponents/PWA/ServiceWorkerRegister.tsx

@@ -13,7 +13,10 @@ export const ServiceWorkerRegister = (): null => {
           r.scope.endsWith("/")
         );
         if (alreadyRegistered) return;
-        await navigator.serviceWorker.register("/sw.js", { scope: "/" });
+        await navigator.serviceWorker.register("/serwist/sw.js", {
+          scope: "/",
+          updateViaCache: "none",
+        });
       } catch (_err) {}
     };
     register();

app/api/cronjobs/[id]/execute/route.ts

@@ -4,10 +4,8 @@ import { executeJob } from "@/app/_server/actions/cronjobs";
 
 export const dynamic = "force-dynamic";
 
-export async function GET(
-  request: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const authError = await requireAuth(request);
   if (authError) return authError;
 

app/api/cronjobs/[id]/route.ts

@@ -8,10 +8,8 @@ import {
 
 export const dynamic = "force-dynamic";
 
-export async function GET(
-  request: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const authError = await requireAuth(request);
   if (authError) return authError;
 
@@ -40,10 +38,8 @@ export async function GET(
   }
 }
 
-export async function PATCH(
-  request: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function PATCH(request: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const authError = await requireAuth(request);
   if (authError) return authError;
 
@@ -79,10 +75,8 @@ export async function PATCH(
   }
 }
 
-export async function DELETE(
-  request: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function DELETE(request: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const authError = await requireAuth(request);
   if (authError) return authError;
 

app/layout.tsx

@@ -33,7 +33,7 @@ export const metadata: Metadata = {
   icons: {
     icon: "/favicon.png",
     shortcut: "/logo.png",
-    apple: "/logo.png",
+    apple: "/logo-pwa.png",
   },
 };
 

app/serwist/[path]/route.ts

@@ -0,0 +1,7 @@
+import { createSerwistRoute } from "@serwist/turbopack";
+
+const { GET } = createSerwistRoute({
+  swSrc: "app/sw.ts",
+});
+
+export { GET };

app/sw.ts

@@ -0,0 +1,89 @@
+import type { PrecacheEntry, SerwistGlobalConfig } from "serwist";
+import {
+  Serwist,
+  NetworkFirst,
+  CacheableResponsePlugin,
+  ExpirationPlugin,
+  StaleWhileRevalidate,
+  CacheFirst,
+} from "serwist";
+import { cleanupOutdatedCaches } from "serwist/internal";
+
+declare global {
+  interface WorkerGlobalScope extends SerwistGlobalConfig {
+    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+  }
+}
+
+declare const self: WorkerGlobalScope;
+
+const pageStrategy = new NetworkFirst({
+  cacheName: "pages",
+  matchOptions: { ignoreVary: true },
+  networkTimeoutSeconds: 5,
+  plugins: [
+    new CacheableResponsePlugin({ statuses: [200] }),
+    new ExpirationPlugin({
+      maxEntries: 128,
+      maxAgeSeconds: 30 * 24 * 60 * 60,
+    }),
+  ],
+});
+
+cleanupOutdatedCaches();
+
+const serwist = new Serwist({
+  precacheEntries: self.__SW_MANIFEST,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: false,
+  runtimeCaching: [
+    {
+      matcher: ({ request }) => request.mode === "navigate",
+      handler: pageStrategy,
+    },
+    {
+      matcher: ({ request, sameOrigin }) =>
+        request.headers.get("RSC") === "1" && sameOrigin,
+      handler: pageStrategy,
+    },
+    {
+      matcher: /\/_next\/static.+\.js$/i,
+      handler: new CacheFirst({
+        cacheName: "static-js",
+        plugins: [
+          new ExpirationPlugin({
+            maxEntries: 64,
+            maxAgeSeconds: 30 * 24 * 60 * 60,
+          }),
+        ],
+      }),
+    },
+    {
+      matcher: /\.(?:css|woff|woff2|ttf|eot|otf)$/i,
+      handler: new StaleWhileRevalidate({
+        cacheName: "static-assets",
+        plugins: [
+          new ExpirationPlugin({
+            maxEntries: 64,
+            maxAgeSeconds: 30 * 24 * 60 * 60,
+          }),
+        ],
+      }),
+    },
+    {
+      matcher: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+      handler: new StaleWhileRevalidate({
+        cacheName: "images",
+        plugins: [
+          new ExpirationPlugin({
+            maxEntries: 128,
+            maxAgeSeconds: 30 * 24 * 60 * 60,
+          }),
+        ],
+      }),
+    },
+  ],
+});
+
+serwist.addEventListeners();

eslint.config.mjs

@@ -0,0 +1,18 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+
+const eslintConfig = [
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.