Great question! Dealing with dynamic start URLs in a PWA manifest can be a bit tricky, especially when your app depends on user-provided path parameters like :name. Let’s walk through practical solutions tailored for Node.js projects:

1. Dynamically Generate the manifest.json File #

Static manifest files can’t handle dynamic values, so the most reliable approach is to have your Node.js server generate the manifest on-the-fly when the browser requests it. Here’s how to do this with Express:

First, create a route that serves the manifest instead of using a static file:

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

// Use cookie-parser to access stored user data (adjust based on your auth/storage method)
app.use(cookieParser());

app.get('/manifest.json', (req, res) => {
  // Fetch the user's name parameter — adjust this logic to match how you store the user's name
  // For example, if you saved the name to a cookie when the user first visited /:name
  const userName = req.cookies.userName || 'default';

  const dynamicManifest = {
    name: `${userName}'s Custom App`,
    short_name: `${userName} App`,
    start_url: `/${userName}`, // This uses the dynamic name parameter
    display: 'standalone',
    background_color: '#f0f0f0',
    theme_color: '#2196f3',
    icons: [
      {
        src: '/icons/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png'
      }
    ]
  };

  res.setHeader('Content-Type', 'application/manifest+json');
  res.json(dynamicManifest);
});

// Your existing route for the user-specific page
app.get('/:name', (req, res) => {
  // Save the user's name to a cookie so we can access it when generating the manifest
  res.cookie('userName', req.params.name);
  res.sendFile('path/to/your/index.html');
});

app.listen(3000, () => console.log('Server running on port 3000'));

The key here is storing the user’s name parameter (via cookies, session, or another storage method) when they first visit their unique URL. When the browser requests manifest.json, the server uses that stored value to generate a manifest with the correct start_url.

2. Fallback: Use a Relative start_url + Client-Side Redirection #

If dynamic manifest generation feels overkill, you can set a generic start_url in your static manifest and handle the redirection client-side:

1. Set your static manifest.json to use a relative root path:

{
  "name": "My Dynamic PWA",
  "short_name": "Dynamic PWA",
  "start_url": "./",
  "display": "standalone",
  // ... other manifest properties
}

2. Add a script to your main HTML file that redirects to the user’s unique path on load:

window.addEventListener('load', () => {
  const currentPath = window.location.pathname;
  // Check if we're already on a user-specific path
  if (!currentPath.match(/^\/[^/]+$/)) {
    // Retrieve the saved name from localStorage (store it when the user first visits)
    const savedName = localStorage.getItem('userName');
    if (savedName) {
      window.location.href = `/${savedName}`;
    } else {
      // Fallback to a default page if no name is saved
      window.location.href = '/default';
    }
  }
});

Just remember to save the user’s name to localStorage when they first access their unique URL (e.g., in the /:name route handler).

3. (Optional) Switch to Query Parameters #

If your project allows, you could adjust your URL structure to use query parameters instead of path parameters (e.g., localhost:3000/?name=jane). While you’d still need to generate the manifest dynamically, query parameters can sometimes simplify storage and retrieval of the user’s value.

Overall, dynamic manifest generation is the most robust solution because it ensures the browser gets the correct start_url at install time, avoiding any client-side redirection delays.

内容的提问来源于stack exchange，提问作者Apoorva