Activities

Pijuli

Pijuli posted a new question

pwa-module •

Is cmty.app issue getting any attention?

I see tons of questions with no answers at all. Not complaining about mine at all.
What's the point on moving the issues there? I only see it as a way of not tracking them here, where they would have more visibility.

Pijuli

Pijuli resolved the question #c172

pwa-module •

A2HS (Add to home screen) documentation

Working as soon as it's deployed on https.

frederic117

frederic117 posted a new question

pwa-module •

Push.js as a pwa module

Is there a way to include push.js in pwa module?

fatlinesofcode

fatlinesofcode posted a new question

pwa-module •

Detect and update new builds

We're using the PWA module with Nuxt in SSR mode.

We have noticed that if a user installs the app to the homescreen and we deploy new page change, the user still sees the old version.

Is it possible to detect new versions so we can display a reload notification?
Or is possible to run update request through the service-worker see when a user re-open's the app using visibilitychange api?

Pijuli

Pijuli posted a new question

pwa-module •

A2HS (Add to home screen) documentation

Hi!

So lost here. Working with nuxt and pwa, obviously. I can't get to know how to enable a2hs functionality in it (the native one that prompts the user to add it to the desktop).
Is there any way of doing it automatically? That would be a nice to have if there's not.
Been looking for the whole day and haven't found any example nor any clear docs

Thank you!

AlejandroMut

AlejandroMut posted a new question

pwa-module •

Favicon not showing

I can't get the favicon to show. I have a 512x512 PNG on ~static/icon.png . This worked fine until version 3.0.0-beta.14

Thanks.

imsidz

imsidz posted a new bug report

pwa-module •

bug getting error many times t.$OneSignal.isPushNotificationsEnabled is not a function

Version

v3.0.0-beta.19

Reproduction link

https://github.com/nuxt-community/pwa-module

Steps to reproduce

i install pwa module to my app normaly with npm i @nuxtjs/pwa @nuxtjs/onesignal use this to my nuxt.config.js

modules: [
  '@nuxtjs/onesignal',
  '@nuxtjs/pwa',
],

// Options
oneSignal: {
  init: {
    appId: 'YOUR_APP_ID', // <- my private key
    allowLocalhostAsSecureOrigin: true,
    welcomeNotification: {
        disable: false
    }
  }
}

and added this to my default.vue layout

mounted() {
    this.$OneSignal.push(() => {
        this.$OneSignal.isPushNotificationsEnabled((isEnabled) => {
        if (isEnabled) {
          this.$OneSignal.getUserId( function(userId) {
              console.log('player_id of the subscribed user is : ' + userId);
              // Make a POST call to your server with the user ID        
          });
        } else {
          console.log('Push notifications are not enabled yet.')
        }
      })
    })
  }

What is expected ?

it should return player_id of the subscribed user is : ' + userId

What is actually happening?

t.$OneSignal.isPushNotificationsEnabled is not a function

Additional comments?

i did try to clear cache and refresh it work first time than again return this error

tmorehouse

tmorehouse posted a new bug report

pwa-module •

bug `og:image` meta not being populated by default

Version

v3.0.0-beta.18

Reproduction link

https://bootstrap-vue.netlify.com/

Steps to reproduce

Use default settings for meta (or set pwa.meta.ogImage to true). Icons are successfully set as are shortcut icon and apple-touch-icon, except og:image is no longer generated in the <head>

What is expected ?

og:image meta tag is created in rendered output

What is actually happening?

no og:image meta tag is being rendered

bensladden

bensladden resolved the question #c168

pwa-module •

Workbox Route registration issue due to default route

Go around issue by creating a plugin and inserting it in caching extensions

bensladden

bensladden posted a new question

pwa-module •

Workbox Route registration issue due to default route

From what i can tell from the documentation the order of routing is based on the route that is registered first. (https://developers.google.com/web/tools/workbox/modules/workbox-routing)

What is the best way to cache an api call (i.e. /api/somthing/.) if this registration is blocked via the default networkFirst strategy implemented? (workbox.routing.registerRoute(new RegExp('/.'), workbox.strategies.networkFirst({}), 'GET'))

Use-case: in my app i have a series of calls that get historical data between ranges. These ranges are passed as parameters and can change however it would be good to cache these (taking the associated parameters into account) in the event of re-request of the same data.

I would perfer the workbox to handle this for me rather then writing js to catch these events.

tmorehouse

tmorehouse posted a new bug report

pwa-module •

bug Icon files generated, but do not appear in manifest or favicon

Version

v3.0.0-beta.17

Reproduction link

https://deploy-preview-4028--bootstrap-vue.netlify.com/

Steps to reproduce

Inspect <head> element and see that there is no favicon. Inpsect manifest to see that icons is an empty array.

What is expected ?

Faviocon is generated, manifest populated with icons array

What is actually happening?

no icons (although Icon files are generated in the /icons directory)

/cc @pi0

vahidahmad

vahidahmad posted a new question

pwa-module •

Importing "background-sync" extension gives me this error --> Uncaught Error: Config must be set before accessing workbox.* modules at Proxy.setConfig (workbox-sw.js:1)

I am trying to use workbox background-sync in Nuxtjs via pwa-module.

this is my workbox property in nuxt.config.js file:

  workbox: {

        importScripts : [
            'sw-background-sync.js'
        ],

        runtimeCaching: [
            {
                urlPattern: 'https:\/\/example.com\/api\/Survey\/getSurvey.*',
                handler: 'networkFirst',
                method: 'GET'
            }
        ]

    }

contents of sw-background-sync.js file (located in static directory) :

console.log("backsync called")
workbox.routing.registerRoute(
    'https:\/\/example.com\/api\/Survey\/post.*',
    new workbox.strategies.NetworkOnly({
        plugins: [
            new workbox.backgroundSync.Plugin('myQueueName', {
                maxRetentionTime: 24 * 60
            })
        ]
    }),
    'POST'
);

runtimeCaching is working fine. but when I uncomment importScripts and refresh the page I get this error in console :

backsync called
workbox-sw.js:1 Uncaught Error: Config must be set before accessing workbox.* modules
    at Proxy.setConfig (workbox-sw.js:1)
    at sw.js:8

Any example of how to implement background sync with nuxtjs, would be appreciated.

Versions:

"@nuxtjs/pwa": "^3.0.0-0", "nuxt": "^2.0.0",

Thank you very much.

ShinyaOkazawa

ShinyaOkazawa posted a new question

pwa-module •

How to use workbox.expiration.Plugin in nuxt.config.js?

version

@nuxtjs/pwa: 3.0.0-beta.16

problem

I expect that the number of cache entries is 1 because I set the following,

    runtimeCaching: [
      {
        urlPattern: '/_nuxt/',
        handler: 'cacheFirst',
        strategyOptions: {
          cacheName: 'bundle-files',
          cacheExpiration: {
            maxAgeSeconds: 1,
            maxEntries: 1
          }
        }
      }

But I can see some cache entries exist.

After built sw.js is here,

workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({"cacheName":"bundle-files","cacheExpiration":{"maxAgeSeconds":1,"maxEntries":1}}), 'GET')

But I can see CacheFirst constructer doesn't have cacheExpiration option.

https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies.CacheFirst.

So, I rewrite built code, sw.js as the following,

workbox.routing.registerRoute(
  new RegExp('/_nuxt/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'bundle-files',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 1,
        maxAgeSeconds: 1
      })
    ]
  }),
  'GET'
)

It works.

Then, if I can write the following code in nuxt.config.js, It will work.

  workbox: {
    runtimeCaching: [
      {
        urlPattern: '/_nuxt/',
        handler: 'cacheFirst',
        strategyOptions: {
          cacheName: 'bundle-files',
          plugins: [
            new workbox.expiration.Plugin({
              maxEntries: 1,
              maxAgeSeconds: 1
            })
          ]
        }
      }
    ]
  }

Does anyone know about it?

dantrevino

dantrevino posted a new feature request

pwa-module •

idea Need to be able to customize splashscreen app name

What problem does this feature solve?

Currently, if I read the code correctly, the name on the splashscreen is pulling from the manifest, which is generated auto generated, and apparently pulls from package.json. The rules for this are lower case names, but that's not appropriate for an application name, necessarily. Even when I put a capitalized name in the manifest entry in nuxt.config.js, the splashscreen only displays a lower case name. Reading nuxt config for a manifest name will allow app name customization.

What does the proposed changes look like?

manifest: {
name: "My App Name"
},

Splash screen displays "My App Name", not 'myappname'

flamner

flamner posted a new question

pwa-module •

not working at all

I want to add a PWA support to my existing project, I install @nuxtjs/pwa and add module to nuxt.config.js I run dev project on localhost, in devtools I can see sw.js in service workers, but then when I go to offline mode I get only "no internet connection" error in the browser. Am I doing something wrong?

manniL

manniL posted a new feature request

pwa-module •

idea Don't base theme color on loading bar color

What problem does this feature solve?

If not theme_color in the manifest is set, the loading bar color is used (if set). As the loading bar color is mostly not fitting the theme color, this might lead to weird results (like a green nav bar on android when the loading bar is green).

I'd suggest to not base the theme color on the color of the loading bar.

samboylett

samboylett posted a new feature request

pwa-module •

idea Enable rangeRequests documentation needs tweaking

What problem does this feature solve?

There is a tiny issue with the documentation at https://pwa.nuxtjs.org/modules/workbox.html#enable-rangerequests

The Regex begins with .* so the route will match request to third party services as well as local files. By default the nuxt PWA does not cache third party / CORS requests, so this example is a bit misleading as it will bring video files into the service worker which were not cached before.

See https://developers.google.com/web/tools/workbox/modules/workbox-routing for more info on workbox routing but essentially matching the url from the beginning lets you match CORS requests, otherwise it will only match local requests.

What does the proposed changes look like?

change the example to:

workbox.routing.registerRoute(
  /\.(mp4|webm)/,
  workbox.strategies.cacheFirst({
    plugins: [
      new workbox.rangeRequests.Plugin(),
    ],
  }),
  'GET'
);

(i.e. remove the .*)

mlem

mlem posted a new bug report

pwa-module •

bug PWA + SPA not workting together in `npm run dev`

Version

v3.0.0-beta.16

Reproduction link

http://i-dont-have-an-url-yet.com

Steps to reproduce

Generate a new nuxtJS app: npx create-nuxt-app
Add PWA support: npm i @nuxtjs/pwa and ['@nuxtjs/pwa'], to the config file as outline in https://pwa.nuxtjs.org/setup.html
The config nuxt.config.js looks like this in the end:

module.exports = {
  mode: 'spa',
  modules: [
    '@nuxtjs/pwa',
  ],
  build: {
    /*
    ** 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)/
        })
      }
    }
  },
  icon: {
    // Icon options
  },
  manifest: {
    lang: 'de',
    name: "adsf",
    short_name: "adsf",
  },
  workbox: {
    // Workbox options
  }

Add a /static/icon.png with some logo
Start app: npm run dev
Visit web hosting endpoint and open Chrome developer tools
Navigate to the "Application" tab to see favicons missing

What is expected ?

I would expect to see my logo as favicon. I would also expect running an audit on the "Audits" tab to return a identification of the app as a PWA.

What is actually happening?

Chrome doesn't display the favicons, because they are not loaded with the site.

Additional comments?

When I generate the sources and run it locally, it works correctly.

npm run generate 
cd dist && python -m http.server 8080

It seems, it's just an npm run dev issue.

HugoHeneault

HugoHeneault posted a new bug report

pwa-module •

bug Nuxt build stuck at 95% with @nuxtjs/pwa on

Version

v3.0.0-beta.16

Reproduction link

[http://See additional comments](http://See additional comments)

Steps to reproduce

  • add @nuxtjs/pwa
  • run yarn dev or nuxt
  • build script hangs at 95%

What is expected ?

Build script should finish

What is actually happening?

Build script is stuck at

 │                                             │
   │   Nuxt.js v2.8.1                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    09:19:13
ℹ Initial build may take a while                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       09:19:13
✔ Builder initialized                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  09:19:13
› App root: /Users/hugo/dev/some-app                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         09:19:13
› Generating nuxt files                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                09:19:13
› Generating routes...                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 09:19:13
✔ Nuxt files generated                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 09:19:13
› Creating webpack middleware...                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       09:19:17

● Client █████████████████████████ emitting (95%) nuxt-pwa-icon 


✔ Server
  Compiled successfully in 17.68s

If I try nuxt build, I got a little more verbose error message:

 nuxt build
ℹ Production build                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     09:23:03
  plugin:nuxt-rfg-icon Retrieving favicons from realfavicongenerator api +0ms
  plugin:nuxt-rfg-icon Finished adding favicons as assets +11s
✔ Builder initialized                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  09:23:14
✔ Nuxt files generated                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 09:23:14

● Client █████████████████████████ emitting (95%) nuxt-pwa-icon 


◯ Server



 ERROR  (node:65879) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   09:23:18


 FATAL  ENOENT: no such file or directory, open '/Users/hugo/dev/some-app/node_modules/@nuxtjs/icon/.cache/a71aaa/64.png'                                                                                                                                                                                                                                                                                                                                                                                                                                                                    09:23:48




   ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                                        │
   │   ✖ Nuxt Fatal Error                                                                                                                   │
   │                                                                                                                                        │
   │   Error: ENOENT: no such file or directory, open '/Users/hugo/dev/some-app/node_modules/@nuxtjs/icon/.cache/a71aaa/64.png'   │
   │                                                                                                                                        │
   ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Additional comments?

I'm really sorry I can't provide a repro link, but this bug is only happening on my macbook (on linux/server env everything runs nice). I updated XCode additional components to latest version then nuxt stopped building. Could it be related?

HugoHeneault

HugoHeneault posted a new bug report

pwa-module •

bug Nuxt build stuck at 95% with @nuxtjs/pwa on

Version

v3.0.0-beta.16

Reproduction link

http://see-additional-comments.dev

Steps to reproduce

  • On macbook: install @nuxtjs/pwa with yarn
  • add @nuxtjs/pwa in nuxt.config.js modules
  • run yarn dev or nuxt
  • build script hangs at 95%

What is expected ?

Build script should finish

What is actually happening?

Build script is stuck at

 │                                             │
   │   Nuxt.js v2.8.1                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    09:19:13
ℹ Initial build may take a while                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       09:19:13
✔ Builder initialized                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  09:19:13
› App root: /Users/hugo/dev/some-app                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         09:19:13
› Generating nuxt files                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                09:19:13
› Generating routes...                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 09:19:13
✔ Nuxt files generated                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 09:19:13
› Creating webpack middleware...                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       09:19:17

● Client █████████████████████████ emitting (95%) nuxt-pwa-icon 


✔ Server
  Compiled successfully in 17.68s

If I try nuxt build, I got a little more verbose error message:

 nuxt build
ℹ Production build                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     09:23:03
  plugin:nuxt-rfg-icon Retrieving favicons from realfavicongenerator api +0ms
  plugin:nuxt-rfg-icon Finished adding favicons as assets +11s
✔ Builder initialized                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  09:23:14
✔ Nuxt files generated                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 09:23:14

● Client █████████████████████████ emitting (95%) nuxt-pwa-icon 


◯ Server



 ERROR  (node:65879) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   09:23:18


 FATAL  ENOENT: no such file or directory, open '/Users/hugo/dev/some-app/node_modules/@nuxtjs/icon/.cache/a71aaa/64.png'                                                                                                                                                                                                                                                                                                                                                                                                                                                                    09:23:48




   ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                                        │
   │   ✖ Nuxt Fatal Error                                                                                                                   │
   │                                                                                                                                        │
   │   Error: ENOENT: no such file or directory, open '/Users/hugo/dev/some-app/node_modules/@nuxtjs/icon/.cache/a71aaa/64.png'   │
   │                                                                                                                                        │
   ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Additional comments?

I'm really sorry I can't provide a repro link, but this bug is only happening on my macbook (on linux/server env everything runs nice). I updated XCode additional components to latest version then nuxt stopped building. Could it be related?