nuxt-community / pwa-module

Zero config PWA solution for Nuxt.js
https://pwa.nuxtjs.org
MIT License
1.23k stars 171 forks source link

Changing display value doesnt take effect on installed desktop pwa #419

Closed jollemannen closed 3 years ago

jollemannen commented 3 years ago

Hi!

I have an issue where i try to change the display value from standalone to minimal-ui.

My PWA detects an update but according to chrome://internals/web-app my PWA doesnt update the display value and keeps the old value.

Can the issue be that the manifest file changes name on each build? Because according to https://web.dev/manifest-updates/ it is not recommended to change name or location.

Here is my nuxt config for reference:

Have a nice day:)


export default {
    env: {
        versionsnummer: process.env.npm_package_version
    },
    buildModules: [

    ],
    components: [
        '~/components'
    ],
    modern: true,
    ssr: true,
    router: {
        prefetchLinks: false
    },
    render: {
        bundleRenderer: {
            shouldPreload: (file, type) => {
                if (type === 'font') {
                    return /.woff2/.test(file)
                }
                return ['script', 'style'].includes(type)
            }
        },
        http2: {
            push: true,
            pushAssets: (req, res, publicPath, preloadFiles) =>
                preloadFiles
                    .filter(f => f.asType === 'script' && f.file === 'runtime.js')
                    .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)
        }
    },
    head: {
        title: 'xxxx',
        meta: [
            {hid: 'description', name: 'description', content: 'xxxx'}
        ],
        script: [

        ],
        link: [
            {
                rel: 'preconnect',
                href: 'https://xxxxx'
            },
            {
                rel: 'preconnect',
                href: 'https://xxxxx'
            }
        ]
    },

    /*
    ** Customize the progress-bar color
    */
    loading: {color: '#fff'},
    /*
    ** Global CSS
    */
    css: [
        '~/assets/default.css',
        '~/assets/input.css',
    ],
    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
        '~/plugins/globalcomponents'
    ],
    /*
    ** Nuxt.js modules
    */
    modules: [
        '@nuxtjs/universal-storage',
        '@nuxtjs/robots',
        '@nuxtjs/sentry',
        '@nuxtjs/pwa',
        // Doc: https://bootstrap-vue.js.org/docs/
        'bootstrap-vue/nuxt',
        // Doc: https://axios.nuxtjs.org/usage
        '@nuxtjs/axios',
    ],
    robots: {
        UserAgent: '*',
        Allow: '/$',
        Disallow: '/'
    },
    sentry: {
        dsn: 'https://xxxx', // Enter your project's DSN here
        config: {}, // Additional config
    },
    pwa: {
        workbox: {
            runtimeCaching: [
                {
                    strategyOptions: {
                        cacheName: 'default-app-cache',
                    },
                    strategyPlugins: [{
                        use: 'Expiration',
                        config: {
                            maxEntries: 10,
                            maxAgeSeconds: 300
                        }
                    }]
                }
            ],
            config: {
                ':signature': Date.now(), // generate new sw.js for each build
            },
            cacheOptions: {
                cacheId: 'default',
                directoryIndex: '/'
            },
            cleanupOutdatedCaches: true,
        },
        meta: {
            viewport: 'width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes',
            mobileAppIOS: true,
            theme_color: '#4682b4',
            lang: 'en',
            author: 'xxxx',
            name: 'xxxx'
        },
        manifest: {
            display: 'minimal-ui',
            background_color: '#ffffff',
            name: 'xxxx',
            short_name: 'xxxx',
            start_url: '/App',
            useWebmanifestExtension: true
        },
        icon: {
            iconSrc: '~/static/icon.png',
            iconFileName: 'icon.png',
            sizes: [64, 120, 144, 152, 192, 384, 512]
        }
    },
    storage: {
        cookie: {
            prefix: '',
            options: {
                path: '/',
                maxAge: 3600
            }
        }
    },
    build: {
        corejs: '3',
        transpile: [
            'objectFitPolyfill',
            'vue-plugin-load-script',
            'vue-pdf'
        ],
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
        }
    }
}