Home

Trying to implement PWA module in my nuxt.js install. But getting some error related to service workers.

Error 1
ServiceWorker failed to install: ServiceWorker failed to handle event (event.waitUntil Promise rejected)

Error 2:
Uncaught (in promise) request-not-cached: an error was thrown by workbox with error code; ‘`request-not-chached’

URL: https://proposalmate.now.sh/

package.json

{
  "name": "proposalmate",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nuxtjs/component-cache": "^1.0.0",
    "@nuxtjs/pwa": "^0.2.0",
    "autoprefixer": "^7.1.2",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "element-theme-default": "^1.3.7",
    "element-ui": "^1.3.7",
    "nuxt": "^1.0.0-alpha.5",
    "postcss-cssnext": "^3.0.2",
    "postcss-hexrgba": "^0.2.1",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-nested": "^2.0.4",
    "style-loader": "^0.18.2",
    "vue": "2.3.4",
    "vue-server-renderer": "2.3.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "2.3.4"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "element": "et -c css/element-variables.css -o css/theme -w"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.2.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */

  head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'dns-prefetch', href: 'https://proposalmate.now.sh' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#3B8070' },

  manifest: {
    name: 'ProposalMate',
    short_name: 'ProposalMate',
    lang: 'en',
    description: 'Create beautiful business proposals',
    theme_color: '#188269',
    background_color: '#000'
  },

  modules: [
    '@nuxtjs/pwa',
    '@nuxtjs/component-cache'
  ],

  render: {
    static: {
      maxAge: '1y',
      setHeaders(res, path) {
        if (path.includes('sw.js')) {
          res.setHeader('Cache-Control', 'public, max-age=0')
        }
      }
    }
  },

  css: [
    { src: '~/css/theme/index.css', lang: 'postcss' },
    { src: '~/css/main.css', lang: 'postcss' }
  ],

  plugins: [
    'plugins/element-ui.js'
  ],
  /*
  ** Build configuration
  */
  build: {

    /*
    ** Run ESLINT on save
    */
    extend(config, ctx) {

      const cssLoader = config.module.rules.find((loader) => loader.test.toString() === '/\\.css$/')
      cssLoader.use.splice(2, 0, {
        loader: 'postcss-loader',
        options: {
          sourceMap: true
        }
      })

      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }

  }
}