PWA

app/[locale]/Providers.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from "next-themes";
 import type { ReactNode } from "react";
 
 import { ReactQueryProvider } from "@/components/ReactQueryProvider";
+import { Toaster } from "@/components/ui/sonner";
 
 interface Props {
   locale: "en" | "pt";
@@ -20,6 +21,7 @@ function Providers({ locale, messages, children }: Props) {
         timeZone={"America/Sao_Paulo"}
       >
         <ThemeProvider attribute="class" defaultTheme="system">
+          <Toaster />
           {children}
         </ThemeProvider>
       </NextIntlClientProvider>

app/[locale]/_components/PromptPwa.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import {
+  CheckboxIcon,
+  DownloadIcon,
+  HomeIcon,
+  Share2Icon,
+} from "@radix-ui/react-icons";
+import { useTranslations } from "next-intl";
+import React, { SVGAttributes, useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export function PromptPwa() {
+  const t = useTranslations("promptPwa");
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const isIos = /iphone|ipad|ipod/.test(
+      window.navigator.userAgent.toLowerCase()
+    );
+    const sessionIsPwa = window.matchMedia(
+      "(display-mode: standalone)"
+    ).matches;
+
+    if (isIos && !sessionIsPwa) {
+      setShowModal(true);
+    }
+
+    function handleDownloadPwa(deferredPrompt: Event) {
+      if (!deferredPrompt) return;
+      // @ts-ignore
+      deferredPrompt.prompt();
+    }
+
+    const beforeInstallPrompt = (e: Event) => {
+      e.preventDefault();
+      if (sessionIsPwa) return;
+      toast(`🎉 ${t("title")}`, {
+        description: t("description"),
+        action: {
+          label: (
+            <>
+              <DownloadIcon className="mr-2 animate-bounce" />{" "}
+              {t("actionButton")}
+            </>
+          ),
+          onClick: () => {
+            handleDownloadPwa(e);
+          },
+        },
+        classNames: { actionButton: "!p-2 !h-auto" },
+        duration: 8000,
+      });
+    };
+
+    window.addEventListener("beforeinstallprompt", beforeInstallPrompt);
+    return () => {
+      window.removeEventListener("beforeinstallprompt", beforeInstallPrompt);
+    };
+  }, [t]);
+
+  return (
+    <Dialog open={showModal} onOpenChange={setShowModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            🎉 <span className="mx-2 ">{t("title")}</span> 🎉
+          </DialogTitle>
+          <DialogDescription>{t("description")}</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col divide-y [&>*]:py-4">
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300 ">
+            <div className="h-6 w-6">
+              <Share2Icon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.first")}</p>
+          </div>
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300">
+            <div className="h-6 w-6">
+              <PlusSquareIcon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.second")}</p>
+          </div>
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300">
+            <div className="h-6 w-6">
+              <CheckboxIcon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.third")}</p>
+          </div>
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300">
+            <div className="h-6 w-6">
+              <HomeIcon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.fourth")}</p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function PlusSquareIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M8 12h8" />
+      <path d="M12 8v8" />
+    </svg>
+  );
+}

app/[locale]/layout.tsx

@@ -2,19 +2,56 @@ import "./globals.css";
 
 import { Analytics } from "@vercel/analytics/react";
 import { GeistSans } from "geist/font/sans";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { useMessages } from "next-intl";
 
 import Footer from "@/components/Footer";
 import NavBar from "@/components/layout/navbar";
 import { locales } from "@/navigation";
 
+import { PromptPwa } from "./_components/PromptPwa";
 import UsernameDialog from "./_components/UsernameDialog";
 import Providers from "./Providers";
 
-export const metadata = {
-  title: "Festival Chooselife",
-  description: "Site oficial do festival Chooselife",
+const APP_NAME = "Chooselife";
+const APP_DEFAULT_TITLE = "Chooselife";
+const APP_TITLE_TEMPLATE = "%s - Chooselife";
+const APP_DESCRIPTION = "O aplicativo feito para o Highliner";
+
+export const metadata: Metadata = {
+  applicationName: APP_NAME,
+  title: {
+    default: APP_DEFAULT_TITLE,
+    template: APP_TITLE_TEMPLATE,
+  },
+  description: APP_DESCRIPTION,
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: APP_DEFAULT_TITLE,
+    // startUpImage: [],
+  },
+  formatDetection: {
+    telephone: false,
+  },
+  openGraph: {
+    type: "website",
+    siteName: APP_NAME,
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+  },
+  twitter: {
+    card: "summary",
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+  },
 };
 
 export default function RootLayout({
@@ -35,6 +72,7 @@ export default function RootLayout({
       <body className={`min-h-screen md:px-0 ${GeistSans.variable} font-sans`}>
         <Providers locale={locale} messages={messages}>
           <div className="relative flex h-full min-h-screen flex-col">
+            <PromptPwa />
             <NavBar />
             <main className="flex-1">
               <UsernameDialog />

app/manifest.ts

@@ -0,0 +1,56 @@
+import { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Chooselife",
+    short_name: "Chooselife",
+    description: "Next.js App",
+    start_url: "/",
+    display: "standalone",
+    orientation: "portrait",
+    background_color: "#fff",
+    theme_color: "#fff",
+    icons: [
+      {
+        src: "/icons/icon-72x72.png",
+        sizes: "72x72",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-96x96.png",
+        sizes: "96x96",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-128x128.png",
+        sizes: "128x128",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-144x144.png",
+        sizes: "144x144",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-152x152.png",
+        sizes: "152x152",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-384x384.png",
+        sizes: "384x384",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  };
+}

app/sw.ts

@@ -0,0 +1,18 @@
+import { defaultCache } from "@serwist/next/browser";
+import type { PrecacheEntry } from "@serwist/precaching";
+import { installSerwist } from "@serwist/sw";
+
+declare const self: ServiceWorkerGlobalScopeEventMap & {
+  // Change this attribute's name to your `injectionPoint`.
+  // `injectionPoint` is an InjectManifest option.
+  // See https://serwist.pages.dev/docs/build/inject-manifest/configuring
+  __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+};
+
+installSerwist({
+  precacheEntries: self.__SW_MANIFEST,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: true,
+  runtimeCaching: defaultCache,
+});