Repository pwa-module

koresar

koresar posted a new question

pwa-module • 13 days ago

How to override the default @nuxt/pwa caching strategy?

@nuxt/pwa workbox plugin default strategy is "offlineFirst". I need to cache only things under /_nuxt/, but nothing else.

Or, at least apply "staleWhileRevalidate" instead of the default "offlineFirst".

How would I do either of the above?

PS: Thanks for the great place to ask these questions! 👍

koresar

koresar posted a new bug report

pwa-module • 13 days ago

bug The workbox is caching my landing page

Version

2

Reproduction link

https://example.com/NOT_APPLICABLE

Steps to reproduce

Just add @nuxt/pwa to your nuxt app

What is expected ?

The / page is not offline cached, or at least uses "netowrkFirst" strategy.

What is actually happening?

My landing page is somewhat dynamic. It must not be cached for offline use.

I couldn't find a way to override the default caching strategy (which is "offlineFirst") for my landing page and any other non-nuxt assets.

Guito

Guito posted a new question

pwa-module • 14 days ago

How to precache only some pages?

I am trying to precache just some of the pages of my application. It seemed to work correctly running the application in local (using build + start), but in production with https seems to not work correctly. This is my config:

    workbox: {
        globIgnores: [
            'node_modules/**/*',
            '**/*lang-*', // Not precaching languages
        ]
    }

When I inspect the html in prod it adds this:

 <link rel="prefetch" href="/_nuxt/lang-it.49931b3009b5bfe75c7b.js">

In local it does not, it just precaches using the workbox the expected ones.

What shall I do?

voxivoid

voxivoid posted a new question

pwa-module • a month ago

e.$OneSignal.on is not a function

I'm working on a project that uses @nuxtjs/pwa along with @nuxtjs/onesignal and I am having an issue while setting up a listener to the subscriptionChange event on mounted inside of my default layout component. Sometimes it throws e.$OneSignal.on is not a function and I can't get why. On the setup, I've added the onesignal module before the pwa as the documentation says. This is what I'm doing in my component:

mounted() {
    this.$OneSignal.push(() => {
      this.$OneSignal.on('subscriptionChange', isSubscribed => {
        if (isSubscribed) {
          this.$OneSignal.getUserId().then(deviceId => this.addDeviceId(deviceId));
        }
      });
    });
},

I've tried to log the this.$OneSignal and when I get the error it prints an array with all the functions that were pushed into this.$OneSignal instead of the OneSignal object with all the methods, which is weird because this code should never be called before loading the script. Any help would be appreciated!

Thanks!

voxivoid

voxivoid posted a new question

pwa-module • a month ago

e.$OneSignal.on is not a function

I'm working on a project that uses @nuxtjs/pwa along with @nuxtjs/onesignal and I am having an issue while setting up a listener to the subscriptionChange event on mounted inside of my default layout component. Sometimes it throws e.$OneSignal.on is not a function and I can't get why. On the setup, I've added the onesignal module before the pwa as the documentation says. This is what I'm doing in my component:

mounted() {
    this.$OneSignal.push(() => {
      this.$OneSignal.on('subscriptionChange', isSubscribed => {
        if (isSubscribed) {
          this.$OneSignal.getUserId().then(deviceId => this.addDeviceId(deviceId));
        }
      });
    });
},

I've tried to log the this.$OneSignal and when I get the error it prints an array with all the functions that were pushed into this.$OneSignal instead of the OneSignal object with all the methods, which is weird because this code should never be called before loading the script. Any help would be appreciated!

Thanks!

Jones-S

Jones-S posted a new question

pwa-module • a month ago

How to include apple-touch icons from generated icon pngs

Hi
I am using the PWA module to generate my icons, which works perfekt.
It also generates my icons, but they are named like this:
icon16.00000000000.png icon32.00000000000.png etc.

If I add the homepage to the start screen on an iphone I don't get my icon. I assume this is because I need to declare
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

Should I just do that and link to the weirdly named pngs? (icon_16.00000000000.png)
Or what is best practice to provide apple touch icons?

Thanks for any hint.

cheers

J

longlongohhh

longlongohhh posted a new question

pwa-module • a month ago

Help with onesignal integration

Hi all,

Im trying to integrate the pwa module into my project, and I'm running into some issues.

Running on localhost currently:
In nuxt.config.js, all I have added is the following:

oneSignal: {
init: {
appId: 'appid',
allowLocalhostAsSecureOrigin: true,
welcomeNotification: {
"title" : "welcome"
}
}
}

On project mount I receive:

pic1.jpg

OneSignalWorker.js returns a 200 response, but the
sw.js appears to not exist, doesnt appear to install on npm install? I'm sure I'm just doing something amateurish wrong, any help would be appreciated. Sorry for inconveniences.

frederic117

frederic117 posted a new question

pwa-module • a month ago

Got a problem with sw registration

in my site in production i have an issue with the sw registration.
I must do something wrong but i can't figure what !

Service worker registration failed: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').
(anonymous) @ app.bfa97ce1d2287d2cb53f.js:1
Promise.catch (async)
Wq0Q @ app.bfa97ce1d2287d2cb53f.js:1
o @ manifest.391506ffe3ce792d1253.js:1
qcny @ app.bfa97ce1d2287d2cb53f.js:1
o @ manifest.391506ffe3ce792d1253.js:1
T23V @ app.bfa97ce1d2287d2cb53f.js:1
o @ manifest.391506ffe3ce792d1253.js:1
window.webpackJsonp @ manifest.391506ffe3ce792d1253.js:1
(anonymous) @ app.bfa97ce1d2287d2cb53f.js:1

the site is online you can check it @ www.insiders.football
thanks for your help

mazipan

mazipan posted a new feature request

pwa-module • a month ago

idea Upgrade workbox version on pwa-module

What problem does this feature solve?

Now workbox module on pwa module still using version 2.x.
Will be good to upgrade to v.3 because it have a lot improvement from workbox in those release.

apmontgomery

apmontgomery posted a new question

pwa-module • 2 months ago

Removing pre-cache from some _nuxt files

All files in the _nuxt folder seem to be precached by default. How can I keep some folders/files from being pre-cached?

memic84

memic84 posted a new feature request

pwa-module • 2 months ago

idea Changes to add to home screen behavior

What problem does this feature solve?

See: https://developers.google.com/web/updates/2018/06/a2hs-updates

There are incoming changes to the Chrome browser, for the install prompt.. It will be possible to manually trigger the install prompt.

What does the proposed changes look like?

Maybe implement this code as feature, to automatically show or not show the prompt.

memic84

memic84 posted a new feature request

pwa-module • 2 months ago

idea Web app banners

What problem does this feature solve?

Support for iOS 11.3, where web app banners are not shown and partial PWA support. I think that we need some support for those browsers which don't support everything yet.

What does the proposed changes look like?

Detect if when the browser is on iOS, and show a install prompt for the PWA the second the the user visits.

TrurlMcByte

TrurlMcByte posted a new feature request

pwa-module • 2 months ago

idea Customize sw.js path/name

What problem does this feature solve?

Writing directly to srcDir+'/static' folder with fixed name violating buildDir (and generate.dir) isolation and corrupting parallel builds.
How to generate few different sites with different routes in same time on same nuxt instance (with different buildDir and generate.dir)?

dverlik

dverlik posted a new bug report

pwa-module • 3 months ago

bug WorkboxError on fresh install

Version

v0.4.0

Reproduction link

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

Steps to reproduce

  1. Install:
$ vue init nuxt-community/pwa-template my-project  
$ cd my-project                     
# install dependencies
$ npm install # Or yarn install
$ npm run build
$ npm start
  1. Navigate to localhost:3000

What is expected ?

Error-less PWA application.

What is actually happening?

Error in browser console when entering /:

workbox.3de3418b.js:158 Uncaught (in promise) WorkboxError: An error was thrown by workbox with error code: ;'request-not-cached' with extras: '{"url":"http://localhost:3000/_nuxt/layouts_default.061f990e7d3f96dc329e.js","error":{}}'
    at http://localhost:3000/_nuxt/workbox.3de3418b.js:160:1358
    at Generator.throw (<anonymous>)
    at step (http://localhost:3000/_nuxt/workbox.3de3418b.js:83:30)
    at http://localhost:3000/_nuxt/workbox.3de3418b.js:96:13
WorkboxError @ workbox.3de3418b.js:158
(anonymous) @ workbox.3de3418b.js:160
step @ workbox.3de3418b.js:83
(anonymous) @ workbox.3de3418b.js:96
DrewLinzmaierGarratt

DrewLinzmaierGarratt posted a new question

pwa-module • 3 months ago

Image cache storage jumps to 100MB+ on second page load

Hi I've been trying out PWA for the last few weeks and have encountered a strange problem.

Using
nuxt-edge
@nuxtjs/pwa : 2.0.8

We added a runtimeCaching route to capture images from our CMS
{ urlPattern: `^${process.env.API}/app/uploads/(.*)`, strategyOptions: { cacheName: 'media', cacheExpiration: { maxEntries: 60, maxAgeSeconds: 24 * 60 * 60 }, cacheableResponse: { statuses: [0, 200] } } }

However, once added we found navigating between just 2 pages our storage size would be over 100MB

Our first page load
first.png

The second
second.png

And the total data actually transferred
total download.png

Has anyone had any experience of the storage ballooning like this?

Darkside73

Darkside73 posted a new question

pwa-module • 3 months ago

How to disable module for not supported browsers?

If Service Worker not supported module is trying to register it anyway

dwikip

dwikip posted a new question

pwa-module • 3 months ago

[HELP] PWA Module with firebase cloud messaging

Anyone have any experience extending nuxt-community/pwa-module using firebase cloud messaging?
I have tried following the guide,

add pwa in modules in nuxt.config.js:
modules: [
'@nuxtjs/axios',
['@nuxtjs/pwa', { icon: false }],
],

add importScript in workbox inside nuxt.config.js:
workbox: {
dev: true,
importScripts: [
'firebase-messaging-sw.js'
],
},

add manifest in nuxt.config.js
manifest: {
gcmsenderid: '103953800507',
name: 'test',
lang: 'id'
}

and i create firebase-messaging-sw.js in static folder:
importScripts ('https://www.gstatic.com/firebasejs/4.0.0/firebase-app.js')
importScripts ('https://www.gstatic.com/firebasejs/4.0.0/firebase-messaging.js')
console.log('Custom service worker!')
const config = {
apiKey: "",
messagingSenderId: 'xxxxxxx'
}
console.log('Custom service worker!')
if (! firebase.apps.length) {
const firebaseApp = firebase.initializeApp (config)
}

const messaging = firebase.messaging ()

i also install @firebase/messaging": "^0.2.4"
then in my page.vue :

<script> import { messaging } from 'firebase' import '@firebase/messaging' export default { created () { const message = messaging() message.requestPermission() .then(function () { console.log('Notification permission granted.') }) .catch(function (err) { console.log('Unable to get permission to notify.', err) }) } } </script>

then run my application using npm run dev
but when access the page, ive got error

[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

do i missed something?

mixn

mixn posted a new bug report

pwa-module • 4 months ago

bug Workbox and HTML5 video on iOS Safari

Version

2.0.8

Reproduction link

https://264-education-heitbuiyfy.now.sh/

Steps to reproduce

Visit the reproduction link in any browser / OS combination and the video plays without problems. Do so on Mobile Safari on iOS and the video freezes after 1–3s and / or doesn’t load at all.

This only happens when the pwa-module (the workbox part of it) is used. The video then plays only the very first time and often freezes after 1–3s, often it doesn’t load / play at all.

This issue looks very similar to this https://github.com/angular/angular/issues/23447 Angular issue, so it might be a core problem inside iOS / their SW implementation? I am not sure, I just ran into this.

I have tried explicitly ignoring the file with globIgnores and/or exclude, but wasn’t successful.

Thank you in advance, I appreciate it and the work you have put into this. :)

What is expected ?

Video should play when SW is activated in any browser / on any OS.

What is actually happening?

Video freezes after 1–3s and / or doesn’t play on Mobile Safari on iOS when SW is activated.

paumoreno

paumoreno posted a new feature request

pwa-module • 4 months ago

idea Set Cache-control to no-cache to sw.js

What problem does this feature solve?

I recently added pwa-module to my existing site built with Nuxt.js. I set the Cache-control header of my static assets to expire in one year, but after adding the pwa-module I had to add an exception for sw.js, so it wasn't cached.

Would it be possible that pwa-module added this exception atuomatically (e.g. by overriding the setHeaders method from config's render -> static)?

What does the proposed changes look like?

The approach I'm thinking of is something like:

this.options.render.static.setHeaders = (res, path) => {
    if (path.match(/sw\.js$/)) {
        // Prevent caching service worker
        res.setHeader('Cache-Control', 'no-cache')
    } else {
        // Call the user defined setHeaders, if any
    }
}
cloudbluedigital

cloudbluedigital posted a new question

pwa-module • 4 months ago

Service Worker not registered

Hi!

I have started using this package and I set it up like this:

  modules: [
      '@nuxtjs/dotenv',
      '@nuxtjs/axios',
      '@nuxtjs/toast',
      '@nuxtjs/pwa',
    ['nuxt-validate', {
      lang: 'en',
    }]
  ],

  workbox: {
    runtimeCaching: [
      {
        // Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*')
        urlPattern: 'https://cdn.timeandattendance/.*',
        // Defaults to `networkFirst` if omitted
        handler: 'cacheFirst',
        // Defaults to `GET` if omitted
        method: 'GET'
        }
      ]
  },

However when I use google chrome audits test it says that

It does not register Service worker and that it does not respond with 200 when offline, and as far as I am aware, this is what this package is supposed to do?