Chrome warning: Site cannot be installed: Page does not work offline.

[MicahDavid]

I am receiving the following Chrome warning:

Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.

Do I need to do something specific in the pwa configuration to make sure I have offline compatibility to please Chrome standards?

I use the Workbox default configuration, but turn off the other modules:

    pwa: {
        icon: false,
        meta: false,
        manifest: false,
        workbox: {
        }
    }

Thanks for any thoughts on this.

[MicahDavid]

When I configured to create manifest and icon modules, the issue went away. Did not work without enabling icon module. The resulting manifest.json file is the same as it was previously when I used a separate static manifest, so its confusing to understand where the problem is. The solution to use all of these modules is fine for me at this point.

[lloydtao]

Hey, there! I wrestled with this same bug today and successfully resolved it. Hopefully it's the same fix for you.

Fix

My issue was this line in my manifest:

• "start_url": "/",

Which should have been:

• "start_url": "/?standalone=true",

After implementing this change (https://github.com/LloydTao/lloyd.cx/pull/15), I now have zero errors in my console, and all checks pass in the Lighthouse PWA audit.

So, check your web manifest (site.webmanifest), or just allow nuxt-pwa to generate the manifest on its own.

---

Config

Nuxt config (nuxt.config.js):

export default {
  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'lloyd.cx',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'apple-mobile-web-app-title', content: 'lloyd.cx' },
      { name: 'application-name', content: 'lloyd.cx' },
      { name: 'msapplication-TileColor', content: '#111827' },
      { name: 'theme-color', content: '#111827' },
      {
        hid: 'description',
        name: 'description',
        content: 'yung software engineer ™ (@lloydtao)',
      },
    ],
    link: [
      {
        rel: 'apple-touch-icon',
        type: 'image/png',
        sizes: '180x180',
        href: '/apple-touch-icon.png',
      },
      {
        rel: 'icon',
        type: 'image/png',
        sizes: '32x32',
        href: '/favicon-32x32.png',
      },
      {
        rel: 'icon',
        type: 'image/png',
        sizes: '16x16',
        href: '/favicon-16x16.png',
      },
      { rel: 'manifest', href: '/site.webmanifest' },
      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#111827' },
    ],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    // https://marquez.co/docs/nuxt-optimized-images/
    '@aceforth/nuxt-optimized-images',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {},

  // PWA module configuration (https://pwa.nuxtjs.org/setup)
  pwa: {
    meta: {
      theme_color: '#111827',
    }
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {},

  // Nuxt Optimized Images configuration (https://marquez.co/docs/nuxt-optimized-images)
  optimizedImages: {
    optimizeImages: true,
  },
}

Web manifest (site.webmanifest):

{
    "name": "lloyd.cx",
    "short_name": "lloyd.cx",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "/maskable_icon_x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ],
    "start_url": "/?standalone=true",
    "background_color": "#111827",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#111827", 
    "lang": "en",
    "shortcuts": [
      {
        "name": "Home",
        "short_name": "Home",
        "description": "Visit the home page",
        "url": "/?source=pwa"
      },
      {
        "name": "Portfolio",
        "short_name": "Portfolio",
        "description": "Visit the portfolio page",
        "url": "/portfolio?source=pwa"
      },
      {
        "name": "Articles",
        "short_name": "Articles",
        "description": "Visit the articles page",
        "url": "/articles?source=pwa"
      }
    ],
    "description": "Weather forecast information",
    "screenshots": [
      {
        "src": "/screenshot.png",
        "type": "image/png",
        "sizes": "1080x1440"
      }
    ]
}

Packages (package.json):

{
  "name": "portfolio",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.10.1",
    "nuxt": "^2.15.4",
    "webp-loader": "^0.6.0"
  },
  "devDependencies": {
    "@aceforth/nuxt-optimized-images": "^1.3.0",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^4.0.3",
    "@vue/test-utils": "^1.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.5.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.1",
    "jest": "^26.5.0",
    "prettier": "^2.1.2",
    "sqip-loader": "^1.0.0",
    "vue-jest": "^3.0.4"
  }
}

Errors for SEO

sw.js:65 TypeError: [workbox] Network request for http://localhost:51331/ threw an error: Failed to fetch "Details:" Object
fetchDidFail @ sw.js:65

The FetchEvent for "http://localhost:51331/" resulted in a network error response: the promise was rejected.

workbox-strategies.prod.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"http://localhost:51331/"}]
    at Object.handle (https://cdn.jsdelivr.net/npm/workbox-cdn@5.1.4/workbox/workbox-strategies.prod.js:1:1883)

localhost/:1 Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.

[CavalcanteLeo]

same error here