Activities

camelG

camelG posted a new question

pwa-module •

Getting error [ TypeError: getRouteParams is not a function ] for @nuxtjs/pwa

nuxt.config.js

 /*
  ** Nuxt.js modules
  */
 modules: [
   ['@nuxtjs/pwa', {
     icon: false
   }]
 ],

run command

npm run dev

get error

> nuxt
i Preparing project for development                                                                                                                                                                          10:38:16
i Initial build may take a while                                                                                                                                                                             10:38:16
FATAL  getRouteParams is not a function                                                                                                                                                                     10:38:16
 at ModuleContainer.addManifest (node_modules\@nuxtjs\manifest\index.js:18:38)
 at hook (node_modules\@nuxtjs\manifest\index.js:7:17)
 at ModuleContainer.nuxtManifest (node_modules\@nuxtjs\manifest\index.js:11:12)
 at Promise (node_modules\@nuxt\core\dist\core.js:172:30)
 at new Promise (<anonymous>)
 at ModuleContainer.addModule (node_modules\@nuxt\core\dist\core.js:170:12)
 at ModuleContainer.requireModule (node_modules\@nuxt\core\dist\core.js:121:17)
 at module (node_modules\@nuxtjs\pwa\index.js:7:17)
 at promise.then (node_modules\@nuxtjs\pwa\index.js:1:146)
 at process._tickCallback (internal/process/next_tick.js:68:7)
  ╭─────────────────────────────────────────────────╮
  │                                                 │
  │   ✖ Nuxt Fatal Error                            │
  │                                                 │
  │   TypeError: getRouteParams is not a function   │
  │                                                 │
  ╰─────────────────────────────────────────────────╯
npm ERR! code ELIFECYCLE
npm ERR! errno 1
eertmanhidde

eertmanhidde posted a new question

pwa-module •

Can't find out what path to use for ogImage

I try'd allot of different options but can't seem to get the image I want to use. I've try'd things like '~/img/assets/myimg.png' or '../../assets/img/myimg.png'. Even try'd an image adres but even that didn't worked for me.

If anyone could help me understand what I'm doing wrong that would be great :)

pi0

pi0 posted a new question

pwa-module •

support workbox-window
harish0507

harish0507 posted a new feature request

pwa-module •

idea Add option 'statechange' event handler to service worker while register

What problem does this feature solve?

This will be helpful when the user wants to update the UI or show a toast after registering the service worker

What does the proposed changes look like?

// sw.register.js
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('<%= options.swURL %>', {
        scope: '<%= options.swScope %>'
    }).then(function(registration) {
        window.$sw = registration

        let serviceWorker

        if (registration.installing) {
            serviceWorker = registration.installing
        } else if (registration.waiting) {
            serviceWorker = registration.waiting
        } else if (registration.active) {
            serviceWorker = registration.active
        }

        if (serviceWorker && typeof options.onStateChange === 'function') {
            serviceWorker.addEventListener('statechange', options.onStateChange)
        }
    }).catch(function(error) {
        console.error('Service worker registration failed:', error)
    })
}
pi0

pi0 posted a new question

pwa-module •

offline analytics

Address ##55.

harish0507

harish0507 posted a new question

pwa-module •

Place /.* route at the bottom of runtimeCaching

The Problem

I'm trying to add networkOnly strategy for my API routes with the below configuration

runtimeCaching: [{
    urlPattern: '/api/.*',
    handler: 'networkOnly',
    strategyOptions: {
      fetchOptions: {
        mode: 'same-origin',
        credentials: 'same-origin'
      }
    }
}]

But the order in generated sw.js was,

...
workbox.routing.registerRoute(new RegExp('/.*'), workbox.strategies.networkFirst({}), 'GET')
workbox.routing.registerRoute(new RegExp('/api/.*'), workbox.strategies.networkOnly({"fetchOptions":{"mode":"same-origin","credentials":"same-origin"}}), 'GET')
...

Since /.*/ is above the api route configuration /api/* routes uses networkFirst strategy

Suggested Fix

Change the order while concating _runtimeCaching and runtimeCaching options in addTemplates method

...
runtimeCaching: [].concat(options._runtimeCaching, options.runtimeCaching)
.map(i => (Object.assign({}, i, {
  urlPattern: i.urlPattern,
  handler: i.handler || 'networkFirst',
  method: i.method || 'GET'
}))),
...

To

...
runtimeCaching: [].concat(options.runtimeCaching, options._runtimeCaching)
.map(i => (Object.assign({}, i, {
  urlPattern: i.urlPattern,
  handler: i.handler || 'networkFirst',
  method: i.method || 'GET'
}))),
...
nelsonlarocca

nelsonlarocca posted a new question

pwa-module •

sw.js:1 Refused to execute script from 'https://www.example.com/_nuxt/workbox.4c4f5ca6.js' because its MIME type ('text/plain') is not executable.

I'm getting this error

sw.js:1 Refused to execute script from 'https://www.example.com/_nuxt/workbox.4c4f5ca6.js' because its MIME type ('text/plain') is not executable.
(anonymous) | @ | sw.js:1

and then

sw.js:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://www.example.com/_nuxt/workbox.4c4f5ca6.js' failed to load.
    at https://www.example.com/sw.js:1:1

Nuxt l/ Universal / Node 10.15.1
"@nuxtjs/pwa": "^2.6.0",
"babel-eslint": "^10.0.1",
"cross-env": "^5.2.0",
"eslint": "^5.13.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-vue": "^5.1.0",
"express": "^4.16.4",
"nuxt": "^2.4.2",

I tried even several fresh installations with minimal config and the problem persists
This is the content of /sw.js

importScripts('/_nuxt/workbox.4c4f5ca6.js')

workbox.precaching.precacheAndRoute([
  {
    "url": "/_nuxt/0445d91168452f7d7368.js",
    "revision": "483e59edfb0c9d8a670b6fc4b25ec10c"
  },
  {
    "url": "/_nuxt/1bd9b0c22fbece87a63f.js",
    "revision": "4399dc41529d13bf164b2e2fdbf6e5a9"
  },
  {
    "url": "/_nuxt/202a9d477c664809cdd3.js",
    "revision": "43f4c8c1739a7528afb2504ad28e4f81"
  },
  {
    "url": "/_nuxt/36dc9fb3352d0fc76041.js",
    "revision": "e400d693f08663fc64a4f6be1b66876e"
  },
  {
    "url": "/_nuxt/60b8b69e151b62429d67.js",
    "revision": "279fc17567086ac8523a20cae3affbc3"
  },
  {
    "url": "/_nuxt/6c7fb967664a7275aca8.js",
    "revision": "6a77770050b2960edf08c809fff25f4c"
  },
  {
    "url": "/_nuxt/6f33982f575f3d0f1aff.js",
    "revision": "22ac72dd06c603a25f4135949a717799"
  },
  {
    "url": "/_nuxt/7e8df0c67bbab84d391a.js",
    "revision": "569c1c15e59f8e9315c9f7507ec1b63b"
  },
  {
    "url": "/_nuxt/92d6b7efdb9ddfe47ef2.js",
    "revision": "d8e2f815cd9b099c3f8ae8e866429ec8"
  },
  {
    "url": "/_nuxt/bb77f2630b20ce9307b9.js",
    "revision": "755f0fc02190689111f2a83b07539653"
  },
  {
    "url": "/_nuxt/c1660df317dc12167414.js",
    "revision": "4f11845d600f21b9616ba1132721e263"
  },
  {
    "url": "/_nuxt/cdf0fbc101557a486140.js",
    "revision": "53035d80a80f0dcf87a7f30945679f9e"
  },
  {
    "url": "/_nuxt/cf9f4a2ca436623f4d75.js",
    "revision": "3e705497cdb4730a2be7f8e09f7dd03a"
  },
  {
    "url": "/_nuxt/ef0872c12e37f7779b35.js",
    "revision": "3513aad7cb97306b5bb42467a29bebf1"
  }
], {
  "cacheId": "example",
  "directoryIndex": "/",
  "cleanUrls": false
})

workbox.clientsClaim()
workbox.skipWaiting()

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'), workbox.strategies.cacheFirst({}), 'GET')
workbox.routing.registerRoute(new RegExp('/.*'), workbox.strategies.networkFirst({}), 'GET')

app.yaml

runtime: nodejs10

instance_class: F2

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'
  NODE_ENV: 'production'

and finally, the nuxtconfig.js

const pkg = require('./package')

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  mode: 'universal',

...

  plugins: ['@/plugins/vuetify', '@/plugins/firebase'],

  modules: [
    '@nuxtjs/axios',
    'nuxt-i18n',
        langDir: 'lang/',
        lazy: true,
        vueI18nLoader: true,
      }
    ],
    [
      '@nuxtjs/pwa',
      {
        manifest: {
          name: 'Example',
          short_name: 'Example',
          lang: 'en',
          start_url: '/',
          orientation: 'any',
          display: 'standalone',
          theme_color: '#fff'
        }
      }
    ]
  ],

  // Options


  /*
  ** Build configuration
  */
  workbox: {
    // Workbox options
  },

  build: {
    transpile: ['vuetify/lib'],
    plugins: [new VuetifyLoaderPlugin()],
    loaders: {
      stylus: {
        import: ['~assets/style/variables.styl']
      }
    },

    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
flaviocordova

flaviocordova posted a new question

pwa-module •

OneSignal - How to avoid hardcoded APP_ID ?

Hi…

I'm trying to use OneSignal module but I can't figure out how to avoid hardcoding APP_ID… the documentation shows this example:

oneSignal: {
    init: {
      appId: 'APP_ID',
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
          disable: true
      }
    }
  }

But I need APP_ID to be wired dynamically on runtime (using a promise, maybe) after getting this information from the server (in a spa-mode app).

Is there any way to get it ?

Biskor

Biskor posted a new question

pwa-module •

Icons arent passed to manifest

Hello,

Im facing an issue,

Icon module generate icons for PWA. but they're never passed to options.manifest because Icons, Meta and Workbox module are called in a build before hook (build:before), manifest module didnt have this function implemented and is called before all….

ricardogobbosouza

ricardogobbosouza posted a new question

pwa-module •

publish a new version

You need a publish new version, right?
Because of these fixes:

Could you publish a patch? I need these fixes =)

lanbau

lanbau posted a new question

pwa-module •

iOS Chrome No Notification Popup

Hi i've tested my project on android chrome and it works perfectly.

However, i tried on iOS chrome, there was no notification popup.

is this a onesignal issue or a nuxtjs/onesignal?

i followed instructions here to install the pwa module:
https://pwa.nuxtjs.org/modules/onesignal

Here is my project link for you to test:
https://dist-ovtdrnrmoc.now.sh/

matamune94

matamune94 posted a new question

pwa-module •

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

i make this warning when install pwa , how can fix it ?

matamune94

matamune94 posted a new question

pwa-module •

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

i make this warning when install pwa , how can fix it ?

josephepotter

josephepotter posted a new feature request

pwa-module •

idea Add Option to Remove Runtime Caching of /_nuxt/.* Resources

What problem does this feature solve?

Regardless of the options that I put into the nuxt config, the following line gets added to the generated service worker:

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'), workbox.strategies.cacheFirst({}), 'GET')

With my implementation, when a request is made to get a file from the _nuxt folder, and the file is not found in the runtime cache, the service worker does a network request regardless of whether the file is already in precache. If I am offline, the file doesn't get found, even if the file is present in the precache. As a result, I am unable to cache site pages until they have been visited.

What does the proposed changes look like?

An option could be added to the workbox config to optionally disable this line from being added to the service-worker. I was able to achieve the functionality I want locally by editing index.js in @nuxtjs/workbox in my node_modules in the following way:

index.js

const defaults = {
    autoRegister: true,
    routerBase,
    publicPath,
    swSrc: path.resolve(this.options.buildDir, 'sw.template.js'),
    swDest: path.resolve(this.options.srcDir, this.options.dir.static || 'static', 'sw.js'),
    directoryIndex: '/',
    cachingExtensions: null,
    routingExtensions: null,
    config: null,
    cacheId: process.env.npm_package_name || 'nuxt',
    clientsClaim: true,
    skipWaiting: true,
    globPatterns: ['**/*.{js,css}'],
    globDirectory: undefined,
    modifyUrlPrefix: {
      '': fixUrl(publicPath)
    },
    nuxtAssetsRuntime: true, // Add the option in defaults. Default to true
    offline: true,
    offlinePage: null,
    offlineAssets: [],
    _runtimeCaching: [], // Remove url pattern from defaults
    runtimeCaching: []
  };

  const options = defaultsDeep({}, this.options.workbox, moduleOptions, defaults);

  if (options.nuxtAssetsRuntime) {
    // Optionally cache all _nuxt resources at runtime
    // They are hashed by webpack so are safe to loaded by cacheFirst handler
    options._runtimeCaching.push({
      urlPattern: fixUrl(publicPath + '/.*'),
      handler: 'cacheFirst'
    });
  }

and then adding the option in my nuxt config:

nuxt.config.js

workbox: {
    ...
    nuxtAssetsRuntime: false,
    ...
 },

If needed, I could submit a pull request for this.

ThomasKientz

ThomasKientz posted a new question

pwa-module •

Getting 404 errors for pwa icon

The app icon is showing well (in links preview and pwa installations) but I am getting a lot of 404 errors from Sentry (Raven) from those type of urls :

https://vendeursconnexion.com/vendeursconnexion.com/_nuxt/icons/icon_512.8i06w0w2000.png
https://vendeursconnexion.com/offre/vendeursconnexion.com/_nuxt/icons/icon_512.8i06w0w2000.png…

Those urls are wrong, (domain name vendeursconnexion.com is duplicate in the url).
It should be :
vendeursconnexion.com/_nuxt/icons/icon_512.8i06w0w2000.png (wich is working).

I have set up the ogHost option in nuxt.config.js with my domain like this

meta: {
    ...
    ogHost: "vendeursconnexion.com",
    name: "Vendeurs Connexion"
  }

Any ideas ?

Guito

Guito posted a new question

pwa-module •

How to handle releases with the service worker

First a bit of background. I have a nuxt application which connects to a rest API.

The problem I'm facing is that whenever the API changes, and I do a release of the nuxt application solving the API problems, when recurrent users join the website, they have an outdated version of the website because of the serviceworker caching and I get errors. I have read the service worker life cycle and I am reloading the page whenever the sw finds an update, but it's not fully working.

What's the correct way of holding this behavior?

Guito

Guito posted a new question

pwa-module •

How to handle releases with the service worker

First a bit of background. I have a nuxt application which connects to a rest API.

The problem I'm facing is that whenever the API changes, and I do a release of the nuxt application solving the API problems, when recurrent users join the website, they have an outdated version of the website because of the serviceworker caching and I get errors. I have read the service worker life cycle and I am reloading the page whenever the sw finds an update, but it's not fully working.

What's the correct way of holding this behavior?

ThomasKientz

ThomasKientz posted a new question

pwa-module •

Getting 404 error for icon

The app icon is showing well (in links preview and pwa installations) but I am getting a lot of 404 errors from Sentry (Raven) with those urls :

https://vendeursconnexion.com/vendeursconnexion.com/_nuxt/icons/icon_512.8i06w0w2000.png
https://vendeursconnexion.com/offre/vendeursconnexion.com/_nuxt/icons/icon_512.8i06w0w2000.png

vendeursconnexion.com/_nuxt/icons/icon_512.8i06w0w2000.png is working.

I have set up the ogHost option in nuxt.config.js with my domain

meta: {
    ...
    ogHost: "vendeursconnexion.com",
    name: "Vendeurs Connexion"
  }

Any idea ?

sebmor

sebmor posted a new question

pwa-module •

Splash screen on iOS

I noticed that @nuxt/pwa only adds something like this

<link data-n-head="true" rel="apple-touch-startup-image" href="/_nuxt/icons/icon_512.884ah64198A.png">

After some investigation why the splash screen didn't show up I came across this:
https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3
and this
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

They explain that you need a splash screen per resolution.

<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

Is this maybe something we could integrate in @nuxt/pwa as well?

hemulin

hemulin posted a new question

pwa-module •

Can't remove pwa

This is really weird.

Couple of weeks ago I've added the PWA module to one of my projects.
Ever since then, EVERY project that uses nuxt is trying to call sw.js which clearly doesn't exists.

I thought it is something with caching on the browser and I've cleared it all but still every few seconds I see the following:

  nuxt:render Rendering url /sw.js +19s
{ statusCode: 404,
  path: '/sw.js',
  message: 'This page could not be found' }

How can I avoid this devilish behavior of the PWA?