Activities

lucianholt97

lucianholt97 posted a new question

pwa-module •

Emtpy Service Worker when `{ manifest: false }`

I would like to use an external manifest file which is not generated by nuxt or nuxt-pwa.
Therefore I have set { pwa: { manifest: false } }. When I do so, the generated sw.js file is empty because workbox seems to be disabled as well.

Is this intended behavior or is there another way to use the workbox module with an external manifest?
Also, what I notices in the first place: when I tried to override the rel=manifest link in the head with a page-specific manifest link, the pwa module still prioritizes the internally generated manifest over the more specific one.

This use-case is very important for everyone with a multi-tenant application.

JesseCorbett

JesseCorbett posted a new feature request

pwa-module •

idea Icon module support for PWA shortcuts

What problem does this feature solve?

Chrome has implemented a new PWA manifest feature, where the manifest can specific shortcuts with icons. Ideally these icons should be parsed in different sizes like the other PWA icons.

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new bug report

pwa-module •

bug Manifest doesn't have a maskable icon

Version

v3.0.0-beta.19

Reproduction link

https://web.dev/maskable-icon-audit/?utmsource=lighthouse&utmmedium=devtools

Steps to reproduce

According to latest Google Lighthouse requirements https://web.dev/maskable-icon-audit/?utm_source=lighthouse&utm_medium=devtools a maskable icon should be provided in the icons array for PWA to pass the test. Currently it's missing and should be generated along with other app icons

What is expected ?

maskable icon is present in the generated output

What is actually happening?

maskable icon is absent

danbeneventano

danbeneventano posted a new question

pwa-module •

New NPM release needed

New features such as manifest.fileName and icon.purpose have been added since the last NPM release. A new release should be created. Installing the module using the GitHub URL works fine, but people should be able to access these features from NPM too.

MackYoel

MackYoel posted a new question

pwa-module •

Relationship to an installed PWA

In manifest an option is available related_applications and recently was updated to support pwa webapps, but requires an exact url of manifest file and we have an url with hash https://domain.com/_nuxt/manifest.b04639c4.json
Is it possible solve this problem?

See more https://web.dev/get-installed-related-apps/#relationship-web

alenieto97

alenieto97 posted a new question

pwa-module •

Why my app isn't working offline

So I have set up nuxt pwa module to work with nuxt firebase auth and it works fine, plus I added icon and manifest to take advantage from the downloadable app. The issue is I must be doing somehting wrong with workbox because my app won't load if you are offline. Default browser offline message will show up. My workbox config is

workbox: {
      runtimeCaching: [{
        urlPattern: 'https://twitch-toc.now.sh/.*',
        handler: 'cacheFirst',
        method: 'GET',
        strategyOptions: {
          networkTimeoutSeconds: 20,
          cacheName: 'api-cache',
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      }
      ],
      importScripts: [
        // ...
        '/firebase-auth-sw.js'
      ],
      // by default the workbox module will not install the service worker in dev environment to avoid conflicts with HMR
      // only set this true for testing and remember to always clear your browser cache in development
      // dev: process.env.NODE_ENV === 'development'
    }

Please let me know what I'm missing because I can't find any documentation or guides on how to make it work. Thanks!

riyaz7us

riyaz7us resolved the question #c227

pwa-module •

PWA doesn't seem to work with nginx reverse proxy

I addressed the issue, it was due to insecure (http) request. Weirdly, chrome couldn't find sw.js (service worker) through http. Redirecting to https resolved this issue.

riyaz7us

riyaz7us posted a new question

pwa-module •

PWA doesn't seem to work with nginx reverse proxy

Hi, I've built nuxt based app using PWA (along with laravel api) and used nginx for reverse proxy. The app seems to work fine, but it doesn't support PWA anymore. Although PWA works on localhost:3000, it doesn't either work with reverse proxy url (edukit.test in my case) or with statically generated app.

My nginx configuration (referenced from here):

map_hash_max_size 262144;
map_hash_bucket_size 262144;

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen 80;
    server_name edukit.test *.edukit.test;

    root "C:/laragon/www/edukit/public/";

    index index.html index.htm index.php;

    location / {
    alias "C:/laragon/www/edukit/frontend/dist/";
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass http://localhost:3000;
    }

    location ~* \.(?:ico|gif|jpe?g|png|woff2?|eot|otf|ttf|svg|js|css)$ {
    alias "C:/laragon/www/edukit/frontend/dist/";
        expires $expires;
        add_header Pragma public;
        add_header Cache-Control "public";

        try_files $uri $uri/ @proxy;
    }


#for api-backend

    location /api {
        try_files $uri $uri/ /index.php$is_args$args;
    autoindex on;
   }

    location ~ \.php$ {
      include snippets/fastcgi-php.conf;
      fastcgi_pass php_upstream;        
      #fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }

    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }
    location ~ /\.ht {
        deny all;
    }

}

My nuxt.config.js file

import colors from 'vuetify/es5/util/colors'

export default {

  mode: "universal",

  head: {
    titleTemplate: "%s - " + process.env.npm_package_name,
    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" }]
  },

  css: [],

  plugins: [],

  buildModules: ["@nuxtjs/vuetify", "@nuxtjs/pwa"],

  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/pwa"
  ],

  axios: {},

  vuetify: {
   ...
  },

  build: {}
};

Reverse proxy url and Localhost PWA score screenshots:
edukit.JPG
localhost3000.JPG

tommcclean

tommcclean posted a new question

pwa-module •

How to localise manifest details using I18n?

We run our Nuxt application in AWS environments which are multi-tenant, so it may be called X when called over a certain domain, but Y when called over another; yet deployed in the same place. The languages we want to include in the manifest also differ as does the branding (logos etc).

As a result we need to localise the manifest details shown below. How can we achieve this with the PWA module as I understand this is a compile time solution, is there any way we can do this on a request basis? How do people solve this who write a multi-lingual PWA?

pwa: { manifest: { name: $t('manifest.name'), short_name: $t('manifest.shortName'), description: $t('manifest.description'), lang: '$i18n.locale', display: 'standalone', background_color: '<a href="https://github.com/undefined/undefined/issues/000000" target="_blank">#000000</a>', theme_color: '<a href="https://github.com/undefined/undefined/issues/000000" target="_blank">#000000</a>' } },

HerrBertling

HerrBertling posted a new question

pwa-module •

Deploy correct docs?

Hi! 👋

Currently, the docs page for the manifest do not include the default settings – so I went to the repo, looked at the code and found them :)

I figured I'd open a pull request to add them to the page. To my surprise, the defaults are already in the dev branch that apparently is not the one being deployed on pwa.nuxtjs.org. Is this a misconfiguration, intended or is it documentation that should not be live yet?

Thanks for the awesome package, anyways :)

ben-richardson-moneysmart

ben-richardson-moneysmart posted a new bug report

pwa-module •

bug Nuxt PWA module no longer compatible with Nuxt One Signal module (with workaround)

Version

v3.0.0-beta.19

Reproduction link

https://jsbin.com/towacag/

Steps to reproduce

Install both "@nuxtjs/onesignal": "^3.0.0-beta.16" and "@nuxtjs/pwa": "^3.0.0-beta.20"

Setup your nuxt.config.js to load both modules.

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

Run your application

What is expected ?

The One Signal service worker is meant to combine the default sw.js service worker in workbox with the One Signal SW. If this works as expected, the browser should run OneSignalSDKWorker.js as the worker, which subsequently loads sw.js and https://cdn.onesignal.com/sdks/OneSignalSDK.js.

What is actually happening?

Even though @nuxtjs/onesignal is running first in the modules, because they are both async the order in which they run can get muddled up. Because of the change to grouping the option for @nuxtjs/pwa, in beta 17 under the pwa: {} object, and a flawed method that is meant to ensure backwards compatibility, the One Signal and PWA modules do not work together.

As you can see in the screen shots, the order in modules is correct, but when the modules run, the pwa module tries to get the modified this.options from the onesignal module, before it has had a chance to run.

Specifically this line is undefined when the pwa module is collecting up all of the options from the global options object.
this.options.workbox.swURL = 'OneSignalSDKWorker.js'

This causes the wrong worker to load and One Signal is never properly setup. Because the onesignal config cannot be passed to the workbox config, the default sw.js is still loaded as the service worker, rather than OneSignalSDKWorker.js

example-of-modules-in-nuxt-config.png

nuxtjs-pwa-option-set-log.png

Code in onesignal module that is meant to run first
Screenshot 2020-06-12 at 12.15.10 AM.png

Code in PWA module that actually runs first, thus missing the modifications from onesignal module
Screenshot 2020-06-12 at 12.14.55 AM.png

Additional comments?

Splitting out of the One Signal module is a good idea, but the fact that both of the most recent versions of these modules no longer work together is quite annoying (wasted many hours on nothing to figure this out).

To work around this, at a minimum you need to have the following in your PWA configuration in nuxt.config.js.

  pwa: {
    workbox: {
      swURL: 'OneSignalSDKWorker.js'
    },
    manifest: {
      gcm_sender_id: '482941778795'
    }
  },

By doing this, the part of the config that are supplied by the one signal module are already part of the PWA module config. Then the order in which they modules run will no longer matter.

edwh

edwh posted a new question

pwa-module •

Favicon per layout

I'm currently using nuxt-rfg-icon to generate favicons. I would like to have a different favicon for different layouts in my app. The author of nuxt-rfg-icon suggested that might be possible using the PWA module. Is it?

Thanks, as always, for gifting your code.

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 /).