Merge pull request #389 from jamerrq/pwa-support

PWA Support

astro.config.ts

@@ -2,22 +2,44 @@ import tailwind from "@astrojs/tailwind"
 import vercel from "@astrojs/vercel/serverless"
 import { defineConfig } from "astro/config"
 
+import sitemap from "@astrojs/sitemap"
+import { VitePWA } from "vite-plugin-pwa"
+
+// Helper imports
+import { manifest, seoConfig } from "./src/utils/seoConfig"
+
 // https://astro.build/config
 export default defineConfig({
-	integrations: [tailwind()],
+	integrations: [tailwind(), sitemap()],
 	adapter: vercel({
 		webAnalytics: { enabled: true },
 	}),
 	build: {
 		inlineStylesheets: "always",
 	},
 	output: "hybrid",
+	site: seoConfig.baseURL,
 	vite: {
 		build: {
 			cssMinify: "lightningcss",
 		},
 		ssr: {
 			noExternal: ["path-to-regexp"],
 		},
+		plugins: [
+			VitePWA({
+				registerType: "autoUpdate",
+				manifest,
+				workbox: {
+					globDirectory: "dist",
+					globPatterns: [
+						"**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}"
+					],
+					// Don't fallback on document based (e.g. `/some-page`) requests
+					// This removes an errant console.log message from showing up.
+					navigateFallback: null
+				}
+			})
+		]
 	},
 })

package.json

@@ -23,9 +23,11 @@
   "devDependencies": {
     "@antfu/eslint-config": "0.43.1",
     "@astrojs/check": "0.5.6",
+    "@astrojs/sitemap": "^3.1.1",
     "@astrojs/tailwind": "5.1.0",
     "@astrojs/vercel": "7.3.5",
     "@midudev/tailwind-animations": "0.0.7",
+    "astro-seo": "^0.8.3",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-astro": "0.31.4",
@@ -38,6 +40,7 @@
     "prettier-plugin-astro": "0.13.0",
     "prettier-plugin-tailwindcss": "0.5.12",
     "tailwindcss": "3.4.1",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "vite-plugin-pwa": "^0.19.2"
   }
 }

public/browserconfig.xml

@@ -0,0 +1,12 @@
+
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+	<msapplication>
+		<tile>
+			<square70x70logo src="/favicon-70x70.png"/>
+			<square150x150logo src="/favicon-150x150.png"/>
+			<square310x310logo src="/favicon-310x310.png"/>
+			<TileColor>#ffffff</TileColor>
+		</tile>
+	</msapplication>
+</browserconfig>

public/img/icons/manifest.json

@@ -0,0 +1,60 @@
+{
+	"name": "La Velada",
+	"description": "Web Oficial de La Velada del Año IV, evento de boxeo entre streamers y creadores de contenido, organizado por Ibai Llanos.",
+	"short_name": "La Velada",
+	"icons": [
+		{
+			"src": "/favicon-72x72.png",
+			"type": "image/png",
+			"sizes": "72x72",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "/favicon-96x96.png",
+			"type": "image/png",
+			"sizes": "96x96",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "/favicon-128x128.png",
+			"type": "image/png",
+			"sizes": "128x128",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "/favicon-144x144.png",
+			"type": "image/png",
+			"sizes": "144x144",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "/favicon-152x152.png",
+			"type": "image/png",
+			"sizes": "152x152",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "/favicon-192x192.png",
+			"type": "image/png",
+			"sizes": "192x192",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "/favicon-384x384.png",
+			"type": "image/png",
+			"sizes": "384x384",
+			"purpose": "any maskable"
+		},
+		{
+			"src": "/favicon-512x512.png",
+			"type": "image/png",
+			"sizes": "512x512",
+			"purpose": "any maskable"
+		}
+	],
+	"scope": "/",
+	"start_url": "/?source=pwa",
+	"display": "standalone",
+	"theme_color": "#d5ff00",
+	"background_color": "#d5ff00"
+}

src/components/SEO.astro

@@ -48,4 +48,38 @@ const { title, description, preloadImgLCP } = Astro.props
 <meta name="robots" content="index, follow" />
 <meta name="googlebot" content="index, follow" />
 
+<!-- PWA Support -->
+
+<!-- Favicons. -->
+<!-- 16 -->
+<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png" />
+<!-- 20 -->
+<link rel="icon" type="image/png" sizes="20x20" href="/img/icons/favicon-20x20.png" />
+<!-- 24 -->
+<link rel="icon" type="image/png" sizes="24x24" href="/img/icons/favicon-24x24.png" />
+<!-- 48 -->
+<link rel="icon" type="image/png" sizes="48x48" href="/img/icons/favicon-48x48.png" />
+<!-- 64 -->
+<link rel="icon" type="image/png" sizes="64x64" href="/img/icons/favicon-64x64.png" />
+<!-- 128 -->
+<link rel="icon" type="image/png" sizes="128x128" href="/img/icons/favicon-128x128.png" />
+<!-- 144 -->
+<link rel="icon" type="image/png" sizes="144x144" href="/img/icons/favicon-144x144.png" />
+<!-- 256 -->
+<link rel="icon" type="image/png" sizes="256x256" href="/img/icons/favicon-256x256.png" />
+<!-- 512 -->
+<link rel="icon" type="image/png" sizes="512x512" href="/img/icons/favicon-512x512.png" />
+<link rel="shortcut icon" type="image/x-icon" href="/img/icons/favicon.ico" />
+
+<!-- Sitemap -->
+<meta name="msapplication-config" content="/browserconfig.xml" />
+
+<!-- Worker Registration -->
+{
+  !import.meta.env.DEV && (
+    <script is:inline src="/registerSW.js"></script>
+    <link rel="manifest" href="/manifest.webmanifest" />
+  )
+}
+
 <RichResults />

src/layouts/Layout.astro

@@ -18,7 +18,7 @@ const { title, description, preloadImgLCP } = Astro.props
 <!doctype html>
 <html lang="es">
 	<head>
-		<SEO title={title} description={description} preloadImgLCP={preloadImgLCP} />
+		<SEO title={title} description={description} preloadImgLCP={preloadImgLCP!} />
 	</head>
 
 	<body

src/utils/seoConfig.ts

@@ -0,0 +1,53 @@
+// Type imports
+import type { ManifestOptions } from "vite-plugin-pwa"
+
+/**
+ * Defines the default SEO configuration for the website.
+ */
+export const seoConfig = {
+	baseURL: "https://lavelada.es/", // Production URL.
+	description:
+		"Web Oficial de La Velada del Año IV, evento de boxeo entre streamers y creadores de contenido, organizado por Ibai Llanos.",
+	type: "website",
+	image: {
+		url: "https://lavelada.es/og.png",
+		alt: "La Velada",
+		width: 705,
+		height: 606,
+	},
+	siteName: "La Velada",
+	twitter: {
+		card: "summary_large_image",
+	},
+}
+
+/**
+ * Defines the configuration for PWA webmanifest.
+ */
+export const manifest: Partial<ManifestOptions> = {
+	name: "La Velada",
+	short_name: "La Velada",
+	description:
+		"Web Oficial de La Velada del Año IV, evento de boxeo entre streamers y creadores de contenido, organizado por Ibai Llanos.",
+	theme_color: "#d5ff00",
+	background_color: "#d5ff00",
+	display: "fullscreen",
+	icons: [
+		{
+			src: "/img/icons/favicon-192x192.png",
+			sizes: "192x192",
+			type: "image/png",
+		},
+		{
+			src: "/img/icons/favicon-512x512.png",
+			sizes: "512x512",
+			type: "image/png",
+		},
+		{
+			src: "/img/icons/favicon-512x512.png",
+			sizes: "512x512",
+			type: "image/png",
+			purpose: "any maskable",
+		},
+	],
+}