Manifest not found for offline mode. Error while testing in Lighthouse.

[himanshu-dhiman26]

Hi,

I am facing an issue while configuring my app to support PWA. I am using this package and this is how I am using it in my Next JS app.

I followed your now2-example for configurations.

Following are my configuration files.

next.config.js

const withCSS = require('@zeit/next-css');
const withOffline = require('next-offline');

module.exports = withOffline(withCSS({
  webpack(config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]',
        },
      },
    });
    return config;
  },
  target: 'serverless',
  transformManifest: (manifest) => ['/'].concat(manifest),
  generateInDevMode: true,
  workboxOpts: {
    swDest: 'static/service-worker.js',
    runtimeCaching: [
      {
        urlPattern: /^https?.*/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'https-calls',
          networkTimeoutSeconds: 15,
          expiration: {
            maxEntries: 150,
            maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      },
    ],
  },
}));

manifest.json -> in public/manifest.json

{
  "name": "App UI",
  "short_name": "App UI",
  "description": "App UI Screens",
  "scope": ".",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/fox-shape.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}

now.json

{
  "version": 2,
  "routes": [
    {
      "src": "^/service-worker.js$",
      "dest": "/_next/static/service-worker.js",
      "headers": {
        "cache-control": "public, max-age=43200, immutable",
        "Service-Worker-Allowed": "/"
      }
    }
  ],
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    }
  ]
}

When deploying using now --prod. Everything seems fine.

• Service Worker is registered.
• I am able to see a manifest file
• Cache storage is getting filled

But while testing it with Lighthouse. Getting the following error.

I thought it could be an issue with Lighthouse, but even if i try running it in mobile, it doesn't give me an option to 'Add to home screen'. So, I think definately something is wrong.

I am using NextJS 9, and next-offline v4.

Please help!

Thanks.

[rix1]

I had the same issue and I think I figured it out: There was some issues with the new folder structure /src/ and/or the public/static changes introduced in Next 9.1. My fix was to update the /public path in next.config.js

  modifyURLPrefix: {
    'static/': '_next/static/',
    'public/': '/',
  },
``

[johhansantana]

hey @rix1 I'm having somewhat the same issue here:

I tried adding your solution but still same error:

const { withExpo } = require("@expo/next-adapter");
const withImages = require("next-images");
const withFonts = require("next-fonts");
const withOffline = require("next-offline");

module.exports = withExpo(
  withOffline(
    withFonts(
      withImages({
        projectRoot: __dirname,
        workboxOpts: {
          swDest: "workbox-service-worker.js",

          /* changing any value means you'll have to copy over all the defaults  */
          /* next-offline */
          globPatterns: ["static/**/*"],
          globDirectory: ".",
          modifyURLPrefix: {
            "static/": "_next/static/",
            "public/": "/"
          },
          runtimeCaching: [
            {
              urlPattern: /^https?.*/,
              handler: "NetworkFirst",
              options: {
                cacheName: "offlineCache",
                expiration: {
                  maxEntries: 200
                }
              }
            }
          ]
        }
      })
    )
  )
);

[rix1]

You're using Now 2, right? Try using now dev to spin up a local, serverless environment: https://zeit.co/blog/now-dev

[hipstersmoothie]

Have you added a link to the manifest in your head? It took me a little to figure that out since it doesn't point it out in the readme. I assumed this plugin would do it for me but it doesn't (and I'm not sure it can)