Activities

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?

haexhub

haexhub posted a new question

pwa-module •

How to configure offlineAssets?

Hi,
I try to get precache working and thought offlineAssets is there for. But nothing is prechached, so I guess I'm doing something wrong.

nuxt.config.js

workbox: {
offlineAssets: [
'/static/somefile'
, '/assets/all_subfolders/*'
]
},

But nothing from this folders is precached. The generated sw.js files has this:

sw.js

workbox.precaching.precacheAndRoute(['/static/somefile', '/assets/all_subfolders/*'])

But the precache stays empty.
What am I missing?

best regards

p1pchenk0

p1pchenk0 posted a new question

pwa-module •

Failed to load ServiceWorker: its route is recognized as 404

When I start application on localhost, my service worker is fetched correctly from localhost:3000/sw.js, but on production it fails to load from https://my.real.website.com/sw.js, as it is recongnized by Nuxt as non-existing route. Am I missing some configuration?

pimlie

pimlie posted a new feature request

pwa-module •

idea Destructure pwa module

What problem does this feature solve?

Would it be an idea to destructure the pwa module and list the separate modules in separate repos again (or probably nuxt/modules)? This makes the individual modules easier to find and makes it clearer that those modules are completely valid to use even without explicitly building a PWA app.

PWA is (at least to me) much more just of a concept then a technical solution, its a recommendation to use a combination of technologies. I think the PWA module supports that thinking as it doesnt implement anything on its own, eg pwa/index.js really just is a placeholder to automatically include the other modules.
But each technology has a purpose on its own, even if you dont want to explicitly build a PWA app. Maybe this is a bit of nitpicking, but there doesnt even appear to be a thing as a PWA specification, even the PWA checklist explicitly states that its a list what google thinks what it takes to have a baseline PWA.

Because of this I actually dont think the PWA module should exist in its current structure, it should just be a placeholder module. Especially modules like manifest, meta and icon really warrant to have their own repo as they are not only a subset of PWA specifications. Its confusing that the current module structure suggests that that is the case.

What does the proposed changes look like?

Move at least the meta, manifest and icon modules back to the nuxt/modules repo and let the pwa module just be a placeholder for combining certain technologies.

poyor7

poyor7 posted a new question

pwa-module •

deleted

a

poyor7

poyor7 posted a new question

pwa-module •

deleted

a

andrewbiang888

andrewbiang888 posted a new question

pwa-module •

Unable to Precache all visited pages, just home page

I've been messing with the Workbox feature for a few days and can't seem to get the precache option to work as I expect it to (probably user error). I made a restaurant review app for a Udacity class and could not get restaurant page to cache. The restaurant url would look like http://localhost:3333/restaurant?id=<number>. Not sure if that is what is causing my issue.

What I want to happen:
Load homepage (initial load), click on a restaurant page, disconnect form the internet, reload the page and see the same content.

What happens:
Load homepage (initial load), click on a restaurant page, disconnect form the internet, reload the page and get "This site can’t be reached" message.

What I've tried:

  • Adding cachingExtensions: 'http://localhost:3333/restaurant' to workbox object in nuxt.config.js
  • Adding this to runtimeCaching array:
     {
        urlPattern: new RegExp('^http://localhost:1337/restaurant'),
        handler: 'cacheFirst',
        strategyOptions: {
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      }

Where I'm at now:

Here is my workbox object in nuxt.config.js.

workbox: {
    // importScripts: [
    //     'test-sw.js'
    // ],
    ignoreUrlParametersMatching: [/./],
    skipWaiting: true,
    cachingExtensions: 'http://localhost:3333/restaurant',
    runtimeCaching: [
      {
        // To match cross-origin requests, use a RegExp that matches
        // the start of the origin:
        urlPattern: new RegExp('^http://localhost:1337/.*'),
        handler: 'cacheFirst',
        strategyOptions: {
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      },
      {
        urlPattern: new RegExp('^https:\/\/api\.tiles\.mapbox\.com\/.*'),
        handler: 'cacheFirst',
        method: 'GET',
        strategyOptions: {
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      },
      {
        urlPattern: new RegExp('^http://localhost:3333/img/.*'),
        handler: 'cacheFirst',
        method: 'GET',
        strategyOptions: {
          cacheName: 'images',
          cacheableResponse: { statuses: [0, 200, 304] }
        }
      }
    ]
  }

Am I misunderstanding how this should work or is there a way to make it happen?

XanderLuciano

XanderLuciano posted a new bug report

pwa-module •

bug Basic Auth won't prompt for credentials due to service worker caching response

Affects: v2.4.0

Currently with a service worker caching pages, HTTP Basic Auth is broken. Upon initial load a user will be prompted for credentials, however, due to caching, this prompt will never be shown a second time unless the user clears their cache.

Originally filed as a chromium bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=623464
Though this appears to be an intentional "feature" to prevent random credential requests.

I am not sure what the proper solution to this is, though a possible workaround is outlined here: https://thatemil.com/blog/2018/02/21/pwa-basic-auth/

Additional workbox support is needed at this point before addressing this issue.

ishitatsuyuki

ishitatsuyuki posted a new feature request

pwa-module •

idea Use app shell as the primary response of the service worker

What problem does this feature solve?

App shell is described in https://developers.google.com/web/updates/2015/11/app-shell

After the initial load, SSR basically takes as much time as the client to just render them. Unless nuxtServerInit is used, we can just take the SPA file and respond with it. It can be cached longer and is network resource efficient.

What does the proposed changes look like?

  • Expose an endpoint (with middleware) to get the SPA template (only for SSR server, already handled by generate)
  • Cache the SPA template (need to mess with revision, I don't know how)
  • Configure workbox to respond with it.
pierreberchtold

pierreberchtold posted a new feature request

pwa-module •

idea [NUXT, PWA] Icons target Directory Option

What problem does this feature solve?

Some hosting providers (like godaddy) do not allow the "icons" directory in which the Nuxt PWA Icon module puts the icons. This results in a 404 error.
https://ch.godaddy.com/help/warum-werden-dateien-in-meinem-symbole-verzeichnis-nicht-angezeigt-261?lang=en

What does the proposed changes look like?

Let's define a targetDir with icons as a default value enabling a different directory name.

Following changes should make it:

File packages/icons/index.js
line 28: add const targetDir = options.targetDir || 'icons';
line 55: replace with const fileName = '${targetDir}/icon_${size}.${hash}.png'

File docs/modules/icon.md
line 21: add

**targetDir**
- Default: `icons`
tonylampada

tonylampada posted a new question

pwa-module •

Is there a recipe for using Chrome push notifications with firebase?

I have a Nuxt PWA at https://motorista.buser.com
And I got the basic Firebase + chrome example working: https://tonylampada.github.io/samples/push-messaging-and-notifications/index.html (cloned from google - https://github.com/GoogleChrome/samples)

I would like to integrate that same kind of setup into my Nuxt PWA and I'm wondering if there is a working recipe for doing that.

Firman95

Firman95 posted a new question

pwa-module •

Exclude specific page from precaching

Hi!
How to exclude specific page from precaching?
I tried to add this in nuxt.config.js, still not working:
workbox: { globIgnores: [ 'node_modules/**/*', 'pages/my-specific-page/*' ] }

shawndl

shawndl posted a new question

pwa-module •

Uncaught TypeError: self.WorkboxSW is not a constructor

I just installed the pwa-module and my service worker is not registering. I only the get error "Uncaught TypeError: self.WorkboxSW is not a constructor" and when I check the error using google development code it shows me this block of code. Can anyone tell me why I am getting this error?

const workboxSW = new self.WorkboxSW({
  "cacheId": "TestApp",
  "clientsClaim": true,
  "directoryIndex": "/"
})

This is my nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: TestApp',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },z
      { name: "apple-mobile-web-app-capable", content: 'yes'},
      { name: 'apple-mobile-web-app-title', content: 'TestApp},
      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'}
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'apple-touch-icon', href: 'images/static/compass-192x192', size: '192x192'}
    ],
    script: [

    ]
  },

  manifest: {
    name: 'Example App',
    short_name: "ExampleApp",
    description: "A test app!",
    background_color: "#1C8847",
    theme_color: "#6EB450",
    start_url: "/",
    scope: "/",
    display: "standalone",
    lang: "en-GB",
    orientation: "any",
    icons: [
      {
        src: "/images/icons/compass-48x48.png",
        sizes: "48x48",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-72x72.png",
        sizes: "72x72",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-96x96.png",
        sizes: "96x96",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-192x192.png",
        sizes: "192x192",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-512x512.png",
        sizes: "512x512",
        type: "image/png"
      }
    ]
  },

  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },

  /**
   *  External Libraries
   */
  modules: [
      '@nuxtjs/axios',
      '@nuxtjs/dotenv',
      '@nuxtjs/font-awesome',
      '@nuxtjs/bulma',
      'nuxt-buefy',
      ['@nuxtjs/pwa', { icon: false }]
  ],

  css: [
    'node_modules/bulma/bulma.sass',
    '@/assets/scss/main.scss'
  ],

  axios: {
      baseURL: process.env.BASE_URL
  },

  router: {
      middleware: [
        'clearValidationErrors',
        'clearImage',
        'clearForm'
      ]
  },

  plugins: [
    './plugins/mixins/user.js',
    './plugins/mixins/validation.js',
    './plugins/axios.js',
    './plugins/mixins/messages.js',
    './plugins/mixins/googlemaps.js',
    './plugins/mixins/vue-carousel.js',
    {src: '~/plugins/mixins/vue-hellojs.js', ssr: false},
    './plugins/init.js',
    './plugins/functions/axios/LocationAxiosFunctions.js',
    './plugins/functions/axios/ProfileAxiosFunction.js',
    './plugins/functions/axios/AdminLocationAxiosFunction.js'
  ],

  /*
  ** Build configuration
  */
  build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    },

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

and my package.json file

{
  "name": "TestApp",
  "version": "1.0.0",
  "description": "At test",
  "private": true,
  "engines": {
    "node": "8.11.1",
    "npm": "5.6.0"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {},
  "devDependencies": {
    "@nuxtjs/auth": "^4.0.1",
    "@nuxtjs/axios": "^5.3.1",
    "@nuxtjs/bulma": "^1.2.0",
    "@nuxtjs/dotenv": "^1.1.1",
    "@nuxtjs/font-awesome": "^1.0.3",
    "@nuxtjs/icon": "^2.1.0",
    "@nuxtjs/manifest": "^2.1.0",
    "@nuxtjs/meta": "^2.2.1",
    "@nuxtjs/pwa": "^2.0.8",
    "@nuxtjs/workbox": "^2.2.0",
    "axios": "^0.18.0",
    "babel-eslint": "^8.2.1",
    "body-parser": "^1.18.2",
    "bulma": "^0.7.1",
    "bulma-extensions": "^1.0.14",
    "clone": "^1.0.4",
    "cookie": "^0.3.1",
    "debug": "^3.1.0",
    "dotenv": "^5.0.1",
    "dotprop": "^1.0.2",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "font-awesome": "^4.7.0",
    "hash-sum": "^1.0.2",
    "hellojs": "^2.0.0-4",
    "hover.css": "^2.3.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.5",
    "moment": "^2.22.0",
    "node-sass": "^4.8.3",
    "nuxt": "latest",
    "nuxt-buefy": "0.0.4",
    "postcss-custom-properties": "^7.0.0",
    "sass-loader": "^7.0.1",
    "vue": "^2.5.17",
    "vue-carousel": "^0.7.3",
    "vue-hellojs": "0.0.4",
    "vue-meta": "^1.5.0",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.17",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17",
    "vue2-google-maps": "^0.8.12",
    "vuejs-datepicker": "^0.9.29",
    "vuex": "^3.0.1",
    "workbox-sw": "^3.4.1"
  }
}
Hiswe

Hiswe posted a new question

pwa-module •

WORKBOX – configuration concerns

Hi,

first of all thanks for this amazing library.

I've been updating the nuxt pwa module to its latest version and with this came the update from workbox 2 to workbox 3

I've set up a small repository to show you my config file.
The purpose of this configuration is to be able to test on my localhost many PWAs

So here are my questions about the configuration:

  • cacheId
    It seems that this isn't working anymore: it's always workbox-precache
    Per workbox documentation there should be a call to workbox.core.setCacheNameDetails({prefix: "my-custom-cache-name"}); right?
  • swDest
    If I want to change the name of service-worker, I have to put in the static folder instead of the dist folder for some reason… Seems strange
  • importWorkboxFrom
    with workbox-build 3 I should be able to have a local copy of the library, but that seems to be ignored…
  • skipWaiting and clientsClaim
    is there a reason about why the default are inverted from the workbox-build configuration?
  • dev
    I'm not sure the dev option really import the dev library of workbox or set workbox.setConfig({ debug: true })

Anyway thanks the efforts your putting in this library!