Question 74062 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Dynamic start_url – Reactjs

I’m fairly new to next.js, and I’m trying to create a PWA using Next.js.

The goal is to make the start_url of my pwa to be: "/recipes/:recipe_id"

I cloned this repo: https://github.com/mvllow/next-pwa-template.

Then I updated the _app.tsx file:

import type { AppProps } from 'next/app'
import { ThemeProvider } from 'next-themes'
import Meta from '@/components/meta'
import '@/styles/globals.css'

import manifest from "../public/manifest.json";
import {useEffect} from "react";


const App = ({ Component, pageProps }: AppProps) => {

    useEffect(() => {
        const manifestElement = document.getElementById("manifest");
        const manifestString = JSON.stringify({
            ...manifest,
            start_url: `${window.location.href}`,
        });
        manifestElement?.setAttribute(
            "href",
            "data:application/json;charset=utf-8," + encodeURIComponent(manifestString)
        );
    });

    return (
        <ThemeProvider
            attribute='class'
            defaultTheme='system'
            disableTransitionOnChange
        >
            <Meta />
            <Component {...pageProps} />
        </ThemeProvider>
    )
}

export default App

And the _document.tsx file :

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
    render() {
        return (
            <Html lang='en'>
                <link href="/manifest.json" rel="manifest" id="manifest" />
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}
export default MyDocument

But the following errors occur:

anifest: property 'start_url' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'scope' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.

It seems like updating the file doesn’t set the right format but I’m not sure.

Here are some of the links I used to update my code :
https://stackoverflow.com/a/68511528/8995872
https://medium.com/@stefanfrancis/nextjs-dynamic-manifest-be8b804ceb92

I tried updating the above code without success.

Tags:

2

Answers


  1. 0

    try this

    start_url: `${window.location.href}`
    Login or Signup to reply.
  2. 0

    I’ve managed to use this:

        const [startURL, setStartURL] = React.useState<string>(process.env.NODE_ENV === "development" ? "http://localhost:4566/app" : "https://example.com/app");
    const manifest = { start_url: `${startURL}`}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search