Handling dynamic routes and flashing on refresh

[userquin]

This is an analysis of #159, but for dynamic routes; the problem here is that we need to handle it from client (service worker) and server side:

• since it is a SPA, the server is configured to redirect to index.html when something missing is requested, in our case, for any pathhi/:name, the server will return the content ofindex.htmland so the flashing appears.
• on the other hand, on the client side we have the service worker, and since the dynamic routes are not included in the service worker precache, the sw will return the content of the index.html even when the server can serve the content of the dynamic page.

Following I will describe a prove of concept that works, but we need to manually configure the app. I have push here https://github.com/userquin/vitesse/tree/chore/fix-missing-routes-on-sw the working project, to run it once cloned on local machine, from the root folder:

pnpm run build && pnpm run serve

Open https://localhost and try F5 on hi route.

Step one, include dynamic routes generation:

1. enable nuxtStyle on vite-plugin-pages configuration
2. add extendRoute to vite-plugin-pages configuration to just skip only _.vue: the configuration for previous and this step will be:

// vite.config.ts
    Pages({
      nuxtStyle: true,
      extendRoute(route) {
        const path = route.path
        if (/*! path.includes(':')  && */!path.includes('*') && path !== '/') {
          additionalManifestEntries.push({
            url: path.startsWith('/') ? path.substring(1) : path,
            revision: `${getOrBuildHash()}`,
          })
        }
        console.log(route)
        return route
      },
      extensions: ['vue', 'md'],
    }),

3. add includedRoutes to ssgOptions for vite-ssg:

// vite.config.ts
  ssgOptions: {
    script: 'async',
    formatting: 'prettify',
    includedRoutes(routes) {
      return routes.filter(r => !r.includes('*')).map((r) => {
        console.log(r)
        return r.replace(/:/g, '_')
      })
    },
  },

4. remove all bracket and use _ instead: rename [...all].vue and hi/[name].vue pages to _.vue and hi/_name.vue respectivelly

Step 2, configure server to serve dinamyc routes:

I've included a modified version for https-localhost using express static with fallthrough enabled, that is, when missing resource, the middleware will just call next in the chain and then we intercept the request:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const fs = require('fs')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const server = require('https-localhost')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const express = require('express')

process.chdir('./dist')

const app = server()

app.serve = function(staticPath = 'dist') {
  const useBase = path.resolve(__dirname, staticPath)
  console.log(useBase)
  const p404 = path.resolve(useBase, '404.html')
  console.log(p404)
  const index = path.resolve(useBase, 'index.html')
  console.log(index)
  const hi = path.resolve(useBase, 'hi/_name.html')
  console.log(hi)
  app.use(express.static(useBase, {
    fallthrough: true,
    extensions: ['html'],
  }))
  // redirect 404 to 404.html or to index.html
  app.use((req, res) => {
    console.log(useBase)
    const requestPath = req.path.startsWith('/hi') ? hi : undefined
    console.log(`${req.path} => ${requestPath}`)
    // istanbul ignore else: not interesting
    if (requestPath && fs.existsSync(requestPath))
      res.status(200).sendFile(requestPath)
    else if (fs.existsSync(p404))
      res.status(404).sendFile(p404)
    else if (fs.existsSync(index))
      res.status(200).sendFile(index)
    else
      res.status(404).send(`${req.path} not found.`)
  })
  console.info(`Serving static path: ${staticPath}`)
  return app
}

app.redirect(80, 443)

app.serve().listen()

At this point, we are able to serve dynamic routes content from server (there is no SSR at all, the client will just change the title once hi/_name.html with all its assets loaded).

But the service worker will still serve the index.html. If you make a hard refresh the flash dissapear, while using just F5 you will see the flashing.

Step 3, configure the service worker to serve dynamic routes content.

The problem is that we cannot use generateSW since there is no way to change the default routing, that is, all request that doesn't do an exact match will fallback to index.html, just open the service worker on netlify and you will find this entry at bottom of sw.js file:

e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))

To solve the problem, I have included a custom service worker to build a new one with the changes:

src/sw.ts
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching'
import { clientsClaim } from 'workbox-core'
import { registerRoute } from 'workbox-routing'

declare let self: ServiceWorkerGlobalScope

self.skipWaiting()
clientsClaim()

// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST)

cleanupOutdatedCaches()

const hiHandler = createHandlerBoundToURL('hi/:name')
const indexHandler = createHandlerBoundToURL('index.html')

registerRoute(/./, async(options) => {
  const { url } = options
  if (url.pathname && url.pathname.startsWith('/hi/'))
    return await hiHandler(options)

  return await indexHandler(options)
}, 'GET')

and also update the PWAPlugin configuration with:

    // https://github.com/antfu/vite-plugin-pwa
    VitePWA({
      registerType: 'autoUpdate',
      strategies: 'injectManifest',
      srcDir: 'src',
      filename: 'sw.ts',
      includeAssets: ['favicon.svg', 'robots.txt', 'safari-pinned-tab.svg'],
      mode: 'development',
      manifest: {...},
      workbox: {
        additionalManifestEntries,
      },
      injectManifest: {
        additionalManifestEntries,
      },
    }),

[userquin]

I file an issue to add an enhacement on generateSW: GoogleChrome/workbox#2917

[dheimoz]

great work @userquin

[userquin]

great work @userquin

We need to evaluate how to bypass this problem. My apps should have 500 routes, 450 dynamic with 1 dynamic param, 45 with 2 dynamic params and 5 with no params. This is the default layout of my projects, right now solved manuallly, route by route on server side and also on pwa client side

[userquin]

On F5:

[userquin]

Check the comment on the issue, there is a repo with the solution:
#252 (comment)