Nuxt PWA module not working

[Ferdinand Frank]

I'm currently trying to integrate the Nuxt PWA Module into my application.
Everything is working fine locally, but when I deploy it via the serverless-nuxt package the plugin does not seem to work as no service worker and no manifest.json file is found.

Did anyone already manage to integrate it successfully?

[Changwan Jun]

I'll check it out.
Show me the nuxt.config.js file. 🥲

[Ferdinand Frank]

Thank you! Here it is:

require('dotenv').config()

module.exports = {
    mode: 'universal',

    srcDir: 'src',

    env: {
        appUrl: process.env.APP_URL,
        apiUrl: process.env.API_URL
    },

    server: {
        port: process.env.APP_PORT || 3004, // default: 3004
        host: process.env.APP_HOST || 'localhost', // default: localhost
    },

    performance: {
        gzip: false // Disabled, since not quite well supported by AWS Lambda
    },

    /*
    ** Headers of the page
    */
    head: {
        title: 'Example App',

        meta: [
            {charset: 'utf-8'},
            {name: 'viewport', content: 'height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0'},
            {name: 'theme-color', content: '#008200'},

            // Activate iOS PWA Splash Screen
            {name: 'apple-mobile-web-app-capable', content: 'yes'},
        ],
        link: [
            {rel: 'shortcut icon', type: 'image/x-icon', hid: 'x-icon', href: process.env.STORAGE_URL + '/global/images/favicons/favicon.ico'},
            {rel: 'apple-touch-icon', type: 'image/png', hid: 'favicon-180', sizes: '180x180', href: process.env.STORAGE_URL + '/global/images/favicons/apple-touch-icon.png'},
            {rel: 'icon', type: 'image/png', hid: 'favicon-32', sizes: '32x32', href: process.env.STORAGE_URL + '/global/images/favicons/favicon-32x32.png'},
            {rel: 'icon', type: 'image/png', hid: 'favicon-16', sizes: '16x16', href: process.env.STORAGE_URL + '/global/images/favicons/favicon-16x16.png'},
            {rel: 'mask-icon', type: 'image/png', hid: 'mask-icon', color: '#008200', href: process.env.STORAGE_URL + '/global/images/favicons/safari-pinned-tab.svg'}
        ]
    },

    pwa: {
        icon: false,

        // Config for the application's manifest
        manifest: {
            name: 'Example App',
            display: "standalone",
            theme_color: '#008200',
            start_url: process.env.APP_URL + '/?standalone=true&utm_source=homescreen',
            icons: [
                {
                    "src": process.env.STORAGE_URL + '/global/images/favicons/android-chrome-512x512.png',
                    "type": "image/png",
                    "sizes": "512x512"
                },
                {
                    "src": process.env.STORAGE_URL + '/global/images/favicons/android-chrome-192x192.png',
                    "type": "image/png",
                    "sizes": "192x192"
                }
            ],
        },
    },

    /*
    ** Customize the progress-bar color
    */
    loading: {color: '#008200'},

    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
        '~/plugins/config.js'
    ],

    /*
    ** Build configuration
    */
    build: {
        extractCSS: false,
    }
}

When running the Nuxt build and start commands with the module activated, a reference to the manifest.json with the content declared in nuxt.config.json is created within the DOM as follows:
<link data-n-head="ssr" rel="manifest" href="/_nuxt/manifest.24c0d41f.json" data-hid="manifest">

However, this reference seems not to be created when deploying the application with the serverless-nuxt package.

[Changwan Jun]

There were two issues. 🥲

1. buildModules did not work properly in serverless-nuxt-plugin. This was fixed in v1.4.0.
2. Even if the build is done properly, if the image (icon) is not loaded properly, the PWA will not work properly. This is fixed in nuxt-aws-lambda@1.5.0. (serverless-nuxt has been renamed.)

See examples.

Example: https://serverless-nuxt.dist.be
Source: https://github.com/wan2land/serverless-nuxt/tree/example