Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: pwa #38

Merged
merged 7 commits into from
Aug 27, 2024
Merged

feat: pwa #38

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2e2f5a1
feat: pwa
lewxdev Aug 27, 2024
7269454
fix(installability): icon in manifest
lewxdev Aug 27, 2024
6d1116f
refactor: use dynamifest
lewxdev Aug 27, 2024
994bcf1
refactor: clean things up
lewxdev Aug 27, 2024
513adf8
feat: dynamic theme color
lewxdev Aug 27, 2024
2900734
fix: export constants individually
lewxdev Aug 27, 2024
be65154
fix: rsc missing env and refactor bad types
lewxdev Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
.next
out

# serwist
public/sw*
public/swe-worker*

# typescript
*.tsbuildinfo
next-env.d.ts
32 changes: 21 additions & 11 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,43 @@
import type { Metadata } from "next";
import type { Metadata, Viewport } from "next";
import { GeistSans } from "geist/font/sans";
import { ThemeProvider } from "next-themes";
import { Header } from "@/components/header";
import { SocketProvider } from "@/components/socket-provider";
import { app } from "@/utils/const";
import "@/globals.css";

const title = "mmmines!";
const description = "an endless, massive multiplayer minesweeper game";

export const metadata: Metadata = {
title,
description,
title: app.NAME,
description: app.DESCRIPTION,
icons: {
icon: [
{ url: "/icon-light.svg" },
{ url: "/icon-dark.svg", media: "(prefers-color-scheme: dark)" },
],
},
metadataBase: new URL(process.env["BASE_URL"]!),
appleWebApp: {
capable: true,
title: app.NAME,
statusBarStyle: "default",
},
metadataBase: app.URL,
openGraph: {
title,
description,
siteName: title,
url: "https://mmmines.fly.dev",
title: app.NAME,
description: app.DESCRIPTION,
siteName: app.NAME,
url: app.URL,
locale: "en_US",
type: "website",
},
};

export const viewport: Viewport = {
themeColor: [
{ color: app.THEME_COLOR_LIGHT, media: "(prefers-color-scheme: light)" },
{ color: app.THEME_COLOR_DARK, media: "(prefers-color-scheme: dark)" },
],
};

export default function RootLayout(props: Readonly<React.PropsWithChildren>) {
return (
<html lang="en" className={GeistSans.variable} suppressHydrationWarning>
Expand Down
29 changes: 29 additions & 0 deletions app/manifest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import type { MetadataRoute } from "next";
import { app } from "./utils/const";

export default function manifest(): MetadataRoute.Manifest {
return {
name: app.NAME,
short_name: app.NAME,
theme_color: app.THEME_COLOR_DARK,
background_color: app.THEME_COLOR_DARK,
display: "standalone",
orientation: "any",
scope: "/",
start_url: "/",
icons: [
{
src: "icon-maskable.svg",
sizes: "any",
type: "image/svg+xml",
purpose: "any maskable" as "maskable",
lewxdev marked this conversation as resolved.
Show resolved Hide resolved
},
{
src: "icon-monochrome.svg",
sizes: "any",
type: "image/svg+xml",
purpose: "monochrome",
},
],
};
}
29 changes: 29 additions & 0 deletions app/sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/// <reference lib="webworker" />
/// <reference types="@serwist/next/typings" />

// see: https://serwist.pages.dev/docs/next/getting-started#writing-a-sw

import { defaultCache } from "@serwist/next/worker";
import { Serwist, type PrecacheEntry, type SerwistGlobalConfig } from "serwist";

// This declares the value of `injectionPoint` to TypeScript.
// `injectionPoint` is the string that will be replaced by the
// actual precache manifest. By default, this string is set to
// `"self.__SW_MANIFEST"`.
declare global {
interface WorkerGlobalScope extends SerwistGlobalConfig {
__SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
}
}

declare const self: ServiceWorkerGlobalScope;

const serwist = new Serwist({
precacheEntries: self.__SW_MANIFEST!,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: defaultCache,
});

serwist.addEventListeners();
7 changes: 7 additions & 0 deletions app/utils/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const app = {
lewxdev marked this conversation as resolved.
Show resolved Hide resolved
NAME: "mmmines!",
DESCRIPTION: "an endless, massive multiplayer minesweeper game",
URL: new URL(process.env["BASE_URL"]!),
lewxdev marked this conversation as resolved.
Show resolved Hide resolved
THEME_COLOR_DARK: "#020617",
THEME_COLOR_LIGHT: "#ffffff",
};
10 changes: 7 additions & 3 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
import withSerwistInit from "@serwist/next";

export default nextConfig;
const withSerwist = withSerwistInit({
swSrc: "app/sw.ts",
swDest: "public/sw.js",
});

export default withSerwist();
Loading