feat: add PWA to site (#129)

# Description

Adds PWA functionality to site. Primarily this is to hopefully
invalidate any old service worker functions from the previous docs
website.

Adding this PR should update and clear whatever lingering PWA features
from the old docs site. If we do not want PWA implemented any further,
we should be able to easily unregister it properly with the following
guide:
https://vite-pwa-org.netlify.app/guide/unregister-service-worker.html

app.vue

@@ -12,8 +12,15 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
 });
 
 useHead({
-  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
-  link: [{ rel: 'icon', href: '/favicon.ico' }],
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'theme-color', content: '#F2F2F2' },
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico', sizes: '48x48' },
+    { rel: 'icon', href: '/zksync-icon_150.svg', sizes: 'any', type: 'image/svg+xml' },
+    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+  ],
   htmlAttrs: {
     lang: 'en',
   },
@@ -40,6 +47,7 @@ useSeoMeta({
 
 <template>
   <div>
+    <NuxtPwaManifest />
     <NuxtLoadingIndicator />
 
     <HeaderComponent :search="true" />

firebase.json

@@ -2,6 +2,78 @@
   "hosting": {
     "public": ".output/public",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "headers": [
+      {
+        "source": "/",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-store, no-cache, must-revalidate, private"
+          },
+          {
+            "key": "Max-Age",
+            "value": "0"
+          }
+        ]
+      },
+      {
+        "source": "/sw.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-store, no-cache, must-revalidate, private"
+          },
+          {
+            "key": "Max-Age",
+            "value": "0"
+          }
+        ]
+      },
+      {
+        "source": "/manifest.webmanifest",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-store, no-cache, must-revalidate, private"
+          },
+          {
+            "key": "Max-Age",
+            "value": "0"
+          }
+        ]
+      },
+      {
+        "source": "/index.html",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-store, no-cache, must-revalidate, private"
+          },
+          {
+            "key": "Max-Age",
+            "value": "0"
+          }
+        ]
+      },
+      {
+        "source": "**/*.@(eot|otf|ttf|ttc|woff|woff2|ico|font.css)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      },
+      {
+        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|tiff|css|js|json)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      }
+    ],
     "redirects": [
       {
         "source": "/sdks/js/:path*.@(html|md)",

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   extends: [['github:matter-labs/docs-nuxt-template', { install: true }], ['github:zksync-sdk/sdk-docs']],
-  modules: ['@nuxt/content', '@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo', 'nuxt-gtag'],
+  modules: ['@nuxt/content', '@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo', 'nuxt-gtag', '@vite-pwa/nuxt'],
   site: {
     name: 'ZKsync Docs',
     url: process.env.NUXT_SITE_ENV ? 'https://staging-docs.zksync.io' : 'https://docs.zksync.io',
@@ -35,6 +35,60 @@ export default defineNuxtConfig({
     '/zk-stack/concepts': { redirect: '/zk-stack/concepts/transaction-lifecycle' },
     '/zk-stack/running-a-zk-chain': { redirect: '/zk-stack/running-a-zk-chain/locally' },
   },
+  pwa: {
+    strategies: 'generateSW',
+    registerType: 'autoUpdate',
+    workbox: {
+      cleanupOutdatedCaches: true,
+      cacheId: 'zksync-docs-prod',
+    },
+    manifest: {
+      name: 'ZKsync Developer Documentation',
+      short_name: 'ZKsync Docs',
+      description:
+        'ZKsync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and ZK chains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
+      theme_color: '#F2F2F2',
+      icons: [
+        {
+          src: '/zksync-icon_48.svg',
+          sizes: '48x48',
+          type: 'image/svg+xml',
+        },
+        {
+          src: '/zksync-icon_48.png',
+          sizes: '48x48',
+          type: 'image/png',
+        },
+        {
+          src: '/zksync-icon_64.png',
+          sizes: '64x64',
+          type: 'image/png',
+        },
+        {
+          src: '/zksync-maskable.png',
+          sizes: '128x128',
+          type: 'image/png',
+          purpose: 'maskable',
+        },
+        {
+          src: '/zksync-icon_180.png',
+          sizes: '180x180',
+          type: 'image/png',
+        },
+        {
+          src: '/zksync-icon_192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: '/zksync-icon_512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any',
+        },
+      ],
+    },
+  },
   $production: process.env.NUXT_SITE_ENV
     ? {}
     : {

package.json

@@ -30,11 +30,12 @@
     "@nuxt/image": "^1.6.0",
     "@nuxt/ui-pro": "^1.0.2",
     "@nuxtjs/seo": "^2.0.0-rc.10",
-    "nuxt-headlessui": "^1.2.0",
     "@tsparticles/slim": "^3.3.0",
     "@tsparticles/vue3": "^3.0.1",
+    "@vite-pwa/nuxt": "^0.8.0",
     "nuxt": "^3.11.2",
     "nuxt-gtag": "^2.0.6",
+    "nuxt-headlessui": "^1.2.0",
     "nuxt-og-image": "^3.0.0-rc.45",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",