Docs / Utvecklare

Next.js, Vue och andra SPA:er

Alla ramverk använder samma snippet. en-sdk.js laddas från EngageNudge, så den enda filen ni lägger i ramverkets public-mapp är en-sw.js. Kör inte npm install @engagenudge/sdk. Det paketet är inte publikt.

Ladda ner en-sw.js från fliken Integrationer i dashboarden. Snippeten där innehåller redan er sajtnyckel, VAPID-nyckel, API-URL, tenant-id och sajt-id.

Chrome kräver fortfarande /en-sw.js på er egen origin. En URL till ett externt CMS registrerar inte workern.

Klientnavigering

Sidbyten i Next.js, Vue Router och SvelteKit sker utan full sidladdning. SDK:t fångar dem automatiskt: varje pushState, replaceState och bakåt/framåt-navigering räknas som en sidvisning och promptreglerna utvärderas på nytt, så en trigger på minsta antal sidvisningar fungerar även när besökaren aldrig laddar om sidan. Ingen router-integration behövs.

Next.js (App Router)

Kopiera en-sw.js till public/.
Ladda snippeten i app/layout.tsx med next/script och strategy="afterInteractive", eller med ett rent <script> i rotlayouten.

tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="sv">
      <body>
        {children}
        <Script
          src="https://engagenudge.com/sdk/v1/en-sdk.js"
          strategy="afterInteractive"
          data-site-key="ER_SAJTNYCKEL"
          data-vapid="ER_PUBLIKA_VAPID_NYCKEL"
          data-api="https://api.engagenudge.com"
          data-tenant-id="ERT_TENANT_ID"
          data-site-id="ERT_SAJT_ID"
        />
      </body>
    </html>
  );
}

Vue (Vite / Nuxt)

Kopiera en-sw.js till public/. Klistra in dashboardens snippet i index.html före </body>, eller lägg den i Nuxt i app.vue eller i app.head.script i nuxt.config.

Andra SPA:er (React/Vite, SvelteKit)

Samma sak: public/ plus rot-HTML eller rotlayout. Sökvägen till service workern är fortfarande /en-sw.js.

Next.js, Vue och andra SPA:er

Klientnavigering

Next.js (App Router)

Vue (Vite / Nuxt)

Andra SPA:er (React/Vite, SvelteKit)

Relaterat