Activities

nachogarcia

nachogarcia posted a new feature request

pwa-module •

idea Compress Icons

What problem does this feature solve?

Performance tools are complaining that icons generated with the icon module could be losslessly compressed.

Annotation 2020-06-04 105207.png

What does the proposed changes look like?

Enable compression for generated icons.

steveDL

steveDL posted a new bug report

pwa-module •

bug No icons or manifest file generated but sw.js is generated

Version

v3.0.0-beta.19

Reproduction link

https://sanroque-fe.staging.doodle.je/

Steps to reproduce

install nuxt/pwa --save-dev

nuxt config:

** Nuxt.js dev-modules
/ buildModules: [ '@nuxtjs/style-resources', '@nuxtjs/eslint-module', '@nuxtjs/stylelint-module', '@nuxtjs/pwa' ], /
** @nuxtjs/pwa module configuration
*/
pwa: {
workbox: {
dev: true,
debug: true
},
manifest: {
viewport: 'width=device-width, initial-scale=1',
lang: 'en',
name: "PWATestApp",
shortname: "PWA/Nuxt - Test App", display: 'standalone', themecolor: '#F11010',
}
},

What is expected ?

I expect that icons and a manifest is generated

What is actually happening?

No icons or manifest files are generated but sw.js is generated

munawarb

munawarb posted a new question

pwa-module •

I can't get the sample custom service worker working (no console.log outputs)

I followed the guide here: https://pwa.nuxtjs.org/modules/workbox.html

But when I look for some console output that says "working" which is what my custom worker is supposed to do, I get nothing. This is after going to localhost:3000.

The plugin works fine but the promise resolves to an empty array.

I have custom-sw.js in my static folder.

console.log("Works");

Next is the plugin sw.js, which works but returns an empty array:

// From https://pwa.nuxtjs.org/modules/workbox.html#adding-custom-service-worker
console.log("Running plugin");
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then((registrations) => {
        console.log("got registrations");
        console.log(JSON.stringify(registrations));
        for (const worker of registrations) {
            console.log('Service worker:', worker)
        }
    });
}
else {
    console.log("No service workers");
}

Next is my nunxt.config.js file:

export default {
    mode: 'universal',
    /*
    ** Headers of the page
    */
    head: {
        title: process.env.npm_package_name || '',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    /*
    ** Customize the progress-bar color
    */
    loading: { color: '#fff' },
    /*
    ** Global CSS
    */
    css: [
    ],
    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
    {
        src: "~/plugins/sw.js",
        ssr: false
    }
    ],
    /*
    ** Nuxt.js dev-modules
    */
    buildModules: [
        "@nuxtjs/pwa",
        "@nuxtjs/apollo",
        "@nuxtjs/workbox"
    ],
    /*
    ** Nuxt.js modules
    */
    modules: [
        // Doc: https://axios.nuxtjs.org/usage
        "@nuxtjs/axios",
        "@nuxtjs/pwa",
        "@nuxtjs/apollo",
        "@nuxtjs/workbox"
    ],
    // Apollo configuration from https://hasura.io/blog/building-progressive-todo-web-app-with-vuetify-vuex-graphql/
    apollo: {
        cookieAttributes: {
            expires: 7, // optional, default: 7 (days)
        },
        includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
        authenticationType: 'Bearer', // optional, default: 'Bearer'
        // optional
        errorHandler: '~/plugins/apollo-error-handler.js',
        // required
        clientConfigs: {
            default: '~/apollo/clientConfig.js'
        }
    },
    pwa: {
        workbox: {
            importScripts: ["custom-sw.js"]
        }
    },
    manifest: {
        crossorigin: 'use-credentials'
    },
    /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options
    */
    axios: {
    },
    /*
    ** Build configuration
    */
    build: {
        /*
        ** You can extend webpack config here
        */
        extend (config, ctx) {
        }
    }
}

Finally, here is my index.vue file. When I load this page, it does should running plugin and tells me that the promise in the plugin resolved, but it resolves to an empty array:

<template>
  <div class="container">
    <div>
      <h1 class="title">
        vueGenerator
      </h1>
      <h2 class="subtitle">
        My dazzling Nuxt.js project
      </h2>
                  <logo-test message="hi" color="green">
                        I want to dump WhatsApp!
<p />
<h2>Let’s say this in bigger text: I want to dump WhatsApp!</h2>
                        </logo-test>

    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    "logo-test": Logo
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: <a href="https://github.com/undefined/undefined/issues/526488" target="_blank">#526488</a>;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

#test2 {
    color: red;
}
</style>

I'll give you the components file too, this is in ~/components/logo.vue:

<template>
<div>
<h1>Some component</h1>
<button id="test">click me</button>
<p id="test2">I want to do something really cool.</p>
<div id="someSlot" :style="{color: color}">
<slot></slot>
</div>
<p>I’m done doing something cool.</p>
</div>
</template>

<script>
export default {
    props: ["message", "color"],
    data: function() {
        return {msg: this.message};
    },
    methods: {
        changingMessage: function() {
        this.msg += this.message;
        return this.msg;
        }
    },
    mounted: function () {
        setInterval(this.changingMessage, 5000);
        document.getElementById("test").addEventListener("click", event => {
            alert("Clicked");
        });
    }
};
</script>

<style>
#someSlot {
}
</style>
smoooty

smoooty posted a new question

pwa-module •

Change manifest publicPath at runtime

Hi,

I am wondering if there is a way to modify the publicPath of the manifest at runtime ie at render:resourcesLoaded?

kingcw

kingcw posted a new question

pwa-module •

preCaching nuxt generated revision name

How to automatically precache nuxt generated revision name files?

suppose I have home.mp4 in assets with path "~/assets/home.mp4"
after run "nuxt generate", it will be in dist folder with path "/_nuxt/videos/e432b342.mp4"

in nuxt.config.js, i have to manually specify generated path for it to work:

workbox: {
preCaching: [
{ url: '/_nuxt/videos/e432b342.mp4', revision: null }
]
}

is there a way to automatically do this? such like

workbox: {
preCaching: [
{ url: '~/assets/home.mp4', revision: null }
]
}

Thank you

gerciljunio

gerciljunio posted a new question

pwa-module •

Custom manifest according to the page / route

I have a website where there are company profiles, I would like that when a user adds a profile on the start screen, starturl is from that profile. For that I believe that you have to customize the manifest or the starturl variable according to each page / route.

Is it possible with this package to configure settings according to route as well as the HEAD package for example !?

thanks!

Dean-Christian-Armada

Dean-Christian-Armada posted a new question

pwa-module •

Add to Home Screen default title does not respect meta name option

Below is my PWA configuration in nuxt.config.js.. My package.json name is "name": "virus",.. However virus is what always show by default when I try to Add in Home Screen.

pwa: {
    meta: {
      name: '哈哈哈',
      theme_color: '#fa3b3f'
    },
    manifest: {
      name: '哈哈哈'',
      background_color: '#fa3b3f'
    },
    workbox: {
      skipWaiting: true,
      clientsClaim: true
    }
  },
yungvldai

yungvldai posted a new feature request

pwa-module •

idea Change swDest directly with option

What problem does this feature solve?

Need option to specify swDest directly. For example, I want to store all static resources in /_static so as not to mix app routes with static resources or set proxy web server (e.g. nginx) location request limits (separately for app routes and separately for statics). Now there is no way to generate sw.js where needed (we can only override dir option, but that doesn’t work, because all resources will still remain on /).

mentAl-maZe

mentAl-maZe posted a new feature request

pwa-module •

idea Interoperability with @nuxtjs/firebase

What problem does this feature solve?

The @nuxtjs/firebase module provides service worker scripts for firebase auth sw sessions.

The problem is that (depending on where the script is included) it either:

  • is ignored (because workbox responds with a caching strategy)
    or
  • overrides the caching strategy (as it responds to the event before the workbox route is invoked)

See https://github.com/nuxt-community/firebase-module/issues/181 for detailed issue description.

What does the proposed changes look like?

I'm not quite sure how to implement it with a lodash template but, i created a Workbox plugin which would allow for a caching stategy to authorize requests before sending them (or to resend them with authorization on auth error), thus caching authorized session responses.

See https://github.com/m2sd/workbox-plugin-firebase-auth

This could be used to achieve interoperablility:

  1. import the CDN version via pwa.workbox.importScripts
  2. Initialize firebase with pwa.workbox.workboxExtensions (a dynamic config object would need to be injected into the snippet but @nuxtjs/firbease could provide a lodash template for that)
  3. (Issue) The plugin would need to be added to the route registered for pwa.workbox.pagesURLPattern via a pwa.workbox.offlineStrategyOptions configuration

Example: nuxt.config.js

module.exports = {
  // ...
  modules: [
    // ...
    '@nuxtjs/pwa',
    '@nuxtjs/firebase',
    // ...
  ],
  pwa: {
    workbox: {
      includeScripts: ['https://unpgk.com/[email protected]/lib/plugin.umd.js'],
      workboxExtensions: [`~/assets/firebase-initialization-generated-by-firebase-module.js']
      offlineStrategyOptions: {
        // I'm not quite sure how to achieve this with lodash templates
        // a compromise (forgoing plugin configuration) could be to include plugins as strings and add them with a loop in the template.
        plugins: ['WorkboxFirebaseAuth.Plugin']
      }
  }
  // ...
}
suppeep

suppeep posted a new question

pwa-module •

Create custom sw file

I try to use my own custom sw file with workbox.

// firebase-messaging-sw.js
const workbox = await window.$workbox;

// nuxt.config.js
workbox: { importScripts: ["firebase-messaging-sw.js"]},

That's the code.

I am getting the error : 'Uncaught SyntaxError: await is only valid in async function at sw.js:1'

I have tried different solution but nothing help. I hope someone can help me here

suppeep

suppeep posted a new question

pwa-module •

Old workbox version

Why is the workbox cdn version in this module still 4.3.1 while the newest is over 5.0?

mathieutu

mathieutu posted a new feature request

pwa-module •

idea Allow to pass glob to workbox offlineAssets, or compiled assets.

What problem does this feature solve?

Hi,
I would like to pass the whole _nuxt folder as offline assets.
It would permit to have the app working totally offline.

At least I would like to add one particular asset in it, but as it's versioned by webpack, I can't set a static full path (_nuxt/img/{hash}.pdf)

Maybe using the workbox-webpack-plugin instead of manually write the file could help.

Thanks!

gangsthub

gangsthub posted a new question

pwa-module •

Discuss the need to add **pwacompat** for all/some features missing

PWA Compat overlaps some areas that Nuxt's PWA Module already covers:

But lacks some others:

  • 🔳 creating "dynamic splash images" (source)

  • 🔳 IE pinned site's metas: like msapplication-navbutton-color (docs)

  • 🔳 other meta tags for browsers like QQ and UC (source)
    image

  • 🔳 *1 Adding theme_color as background color for "transparent icons".

Some findings:

  • PWACompat is lacking some checks needed to pass the PWA audit on Lighthouse, but the most "incredible" is: It's not adding a SW! 👀

Test done in their demo page:

image

  • It's executed on a browser environment at runtime, which Nuxt's module could do better.

Given this research, @pi0, I think that if we wanted, we could:

  • add some of the missing features ourselves, not using pwacompat, because we have a build ("/generate") process and we don't need a runtime library.
  • use an intermediate page instrumenting puppeteer or similar and save the generated images at build time?
Mikkou

Mikkou posted a new question

pwa-module •

How to untie pwa app from public url?

My idea is

I want to load site -> add to home page -> come to pwa app (all assets will be loaded and cached) -> turn off public spa site.
After this way I want to use my pwa app private on smartphone. Can I do it?

danieltamas

danieltamas posted a new bug report

pwa-module •

bug ignoreURLParametersMatching not regex in cacheOptions

Version

v3.0.0-beta.19

Reproduction link

https://codesandbox.io/s/cranky-grothendieck-y4kyh

Steps to reproduce

in nuxt.config.js edit the pwa to contain ignoreURLParametersMatching ( this will be added at the option to precaching )

pwa: {
        cacheOptions: {
            cacheId: 'test',
            directoryIndex: '/',
            revision: timestamp,
            ignoreURLParametersMatching: [/.*/]
        },
}

npm run build

What is expected ?

ignoreURLParametersMatching: [/.*/]

What is actually happening?

ignoreURLParametersMatching: [{}]

Additional comments?

This breaks the preCache functionality when query strings exist in the requested file, throwing a 404 error from the service worker.

designy

designy posted a new question

pwa-module •

Why documentation say sw.* should place in gitignore?

Hi,
when you run yarn build in your project, a sw.js file generated in the static directory and in deployment environment browser need sw.js in the root of your domain to register it, but in nuxtjs/pwa Get Started documentation said that we should write sw.* to gitignore to prevent track sw.js in git.

lupas

lupas posted a new feature request

pwa-module •

idea Option for dev=false to still load additional SW's from importScripts()

What problem does this feature solve?

When dev === false, not only the workbox module, but also other additional service-workers loaded via importScripts are not loaded.

In my case I am fine with disabling workbox in development, but I would still want all (or some of) my other service workers to be loaded in development mode.

What does the proposed changes look like?

Something like this in nuxt.config.js:

// OLD
importScripts: [
  '/my-other-sw.js',
],

// PROPOSED
importScripts: [
  {
    src: '/my-other-sw.js',
    force: true // also load in dev when dev=false
  }
],

If that makes sense I'm happy to do a PR for it.

lpender

lpender posted a new question

pwa-module •

Getting Started documentation doesn't seem to get me started

First, thank you for building this, I'm sure it's amazing.

I followed the "Getting Started" documentation here: https://pwa.nuxtjs.org/setup.html

It ends with:

"Continue reading docs for detailed info."

It doesn't even get me to a "Hello World" page.

The next item at the top, "Workbox Module" seems to delve straight into arcane elements of the API.

It would be great if the Getting Started got me at least to a "Hello World"

patrioticcow

patrioticcow posted a new question

pwa-module •

Run Nuxt PWA as a dev-dependency

Any way to run this as a dev depencency?

The bundle size and download size are.. huge..

490.6kB minified

3.11s over 3G

source: https://bundlephobia.com/[email protected]/[email protected]

patrioticcow

patrioticcow posted a new question

pwa-module •

Run Nuxt PWA as a dev-dependency

Any way to run this as a dev depencency?

The bundle size and download size are.. huge..

490.6kB minified

3.11s over 3G

source: https://bundlephobia.com/[email protected]/[email protected]