Activities

filrak

filrak posted a new feature request

pwa-module •

idea [RFC] ATHS component

What problem does this feature solve?

As a follow up to discussion I had with @pi0 and @Atinux I would like to propose a small DX enhancement for PWA module in a form of PWA components.

An example of such component would be ATHS component which I would like to start with.

Currently the ATHS banner that is shown by Chrome has a lot of limitations (especially when it comes to design) and can't be spawned again after dissmision which is a undesirable behavior for (probably) anyone that builds a PWA. Another problem is lack of common ATHS flow across browsers.

Proposed solution is a soft opt-in component responsible for ATHS behavior. It will handle catching the native beforeinstallprompt event, preventing default banner from being shown and passing the native prompt() event into a scoped slot so developers have more control over ATHS flow and the way it looks.

Having it handled in a 3rd party component will also help with promoting good practices and being up to date with web standards.

Please let me know what do you think about this idea @pi0 ;)

What does the proposed changes look like?

Example usage could look more or less like this:

<add-to-home-screen v-slot="addToHomeScreen"> <button @click="addToHomeScreen">Add to Home Screen</button> </add-to-home-screen>

OfekA

OfekA posted a new question

pwa-module •

Update SW on route change and also refresh page when detecting an update?

Is there a way to do the following - update the Service Worker on route change and also refreshing the page automatically when detecting an update?

sheldonWan

sheldonWan posted a new question

pwa-module •

cannt read property 'emit' of undefined

when i run the projiect, i got a problem at @nuxtjs/icon/index.js :104:26 , the hook can not read

kstadler

kstadler posted a new feature request

pwa-module •

idea Compatibility with Workbox Webpack InjectManifest Plugin

What problem does this feature solve?

If I'm not mistaken it is currently neither possible to dynamically add assets bundled by webpack to the preCache with out of the box Nuxt PWA features nor is it possible to integrate the Worbox Webpack InjectManifest Plugin (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin).
It would be great if either of those two options would be implemented, to allow pre-caching files dynamically generated by webpack.

mauxtin

mauxtin posted a new feature request

pwa-module •

idea Restrict the pages that the "Add to Home Screen" dialog is showing

What problem does this feature solve?

I'd like to display the dialog only in homepage. I believe this is good UX for the user.

riso348

riso348 posted a new bug report

pwa-module •

bug Workbox strategies uncaught no-response

Version

v3.0.0-beta.14

Reproduction link

https://jsfiddle.net/

Steps to reproduce

workbox-strategies.prod.js:1
Uncaught (in promise) no-response: no-response :: [{"url":"https://XXXX/admin/advertisements/create"}]
at a.makeRequest (https://cdn.jsdelivr.net/npm/[email protected]/workbox/workbox-strategies.prod.js:1:2145)

@ workbox-core.prod.js:1makeRequest
@ workbox-strategies.prod.js:1

What is expected ?

Caught error or page load at least

What is actually happening?

The webpage at https://XXXX/admin/advertisements/create might be temporarily down or it may have moved permanently to a new web address.
ERR_FAILED

Additional comments?

I have this error at soma of my subpages while using PWA.
How can i help, or send you something more to prevent this error. When i try to refresh the page, there is a Chrome error ERR_FAILED

kstadler

kstadler posted a new question

pwa-module •

Add example usage to workbox preCaching documentation

The workbox preCaching option sounds useful for loading static assets that are likely to be needed offline.
Could you please add an example about how to add static image and javascript assets?
That would be very helpful!

mauxtin

mauxtin posted a new bug report

pwa-module •

bug Images not showing at all

Version

v3.0.0-beta.14

Reproduction link

http://noreproduction.com

Steps to reproduce

I am having a weird issue with my nuxt app and I think this is due to the pwa module.

Sometimes when I open my page the images are not showing up. If I then refresh the page the images are shown correctly. It's a bit weird so I am thinking that it has to be something with the caching. Could this be something the pwa module is responsible for? Or is it completely unrelated?

I am not even sure how to debug this..

What is expected ?

Images to be shown

What is actually happening?

Not showing

mauxtin

mauxtin posted a new question

pwa-module •

Images not showing

I am having a weird issue with my nuxt app and I think this is due to the pwa module.

Sometimes when I open my page the images are not showing up. If I then refresh the page the images are shown correctly. It's a bit weird so I am thinking that it has to be something with the caching. Could this be something the pwa module is responsible for? Or is it completely unrelated?

I am not even sure how to debug this..

reutovDan

reutovDan posted a new question

pwa-module •

fix w3c

Replace value 'true' to '' on file onesignal/index.js on 76. It's need to fix this error http://joxi.ru/823z00Wi9J9pqm

kstadler

kstadler posted a new question

pwa-module •

How to try reloading current page on network error / not yet cached request

I want to offer the user a button to try to reload the current page if it couldn't be loaded because the user is offline and the page isn't cached yet.
I tried router.go(0) but it completly reloads the page, leading to the browser error page instead of my own nuxt error page if the user is still offline.
I suppose there is a better solution for this problem?

kstadler

kstadler posted a new question

pwa-module •

How to redo initial SSR axios requests when in PWA mode

I'm loading data with axios in asyncdata on every page.
This causes the PWA solution not to cache the initial SSR rendered page.
Is there some kind of solution for this?
E.g. is there a way to make the same axios call on the client as on the server (but not handle the result), to cache the data?

maziarz

maziarz posted a new question

pwa-module •

How to remove/uninstall pwa-module completely

Due to changes in one particular project i do not need the PWA module any longer. I have around unique 250K visitors monthly on the website, so i am seeking a "clean" way to remove the pwa-module and uninstall the SW silently without messing up clients experience on the website. Is there a guide to do so?

maziarz

maziarz posted a new question

pwa-module •

SPA deploys on Netlify is not working consistently

I have a big SPA running on Netlify, but since moving to SPA i have been experiencing some issues.

My workbox configuration is default, and i am running the latest version: 3.0.0-beta.14.

A few details which are quite critical:

Netlify _headers:

/sw.js
    cache-control: max-age=0,no-cache,no-store,must-revalidate

So once in a while when i deploy a new version of the website, i experience that some browsers are stuck in the previous version and causing the chunking error:

Uncaught SyntaxError: Unexpected token <
ceb2b52b4f3e9be31700.js:1 Uncaught SyntaxError: Unexpected token <
a0ede5654d96016357c1.js:1 Uncaught SyntaxError: Unexpected token <
abf7d84673f9bad275c2.js:1 Uncaught SyntaxError: Unexpected token <

In some cases i try to clear cache and even unregister the SW, but it still doesn't work.

The chunking strategy also seems to be conflicting with Netlify's best practices:

It looks like your assets are all hashed. The error Uncaught SyntaxError: Unexpected token <  is almost always caused by something in your site's code referring to an asset that is no longer available.  This is typically due to a filename change in assets generated during your build, such as  /assets/main-123abc.js - where there is a variable hash included in the filename).  Your build tools may be doing that for you automatically even if you don't intend it.
For reference: In most cases, this is not a needed pattern on Netlify, since it is used for cache-busting.  We have a caching implementation that is very purposeful and makes the need for most cachebusting schemes unnecessary; this is what enables our atomic deploys and rollbacks. You can read more about how we cache here: https://www.netlify.com/blog/2017/02/23/better-living-through-caching/
The primary situation in which this makes sense is with javascript chunking.  There are a few workarounds such as the ones mentioned in thread that may help you create a successful implementation: https://spectrum.chat/react/general/how-to-handle-deployments-with-webpack-code-splitting~16dc5f85-0b4b-4eee-8693-066d82dcdc7f .  Another suggestion that some customers use in production is to have your page send a period request - e.g. HTTP HEAD - to a chunk that matches what is currently loaded in the browser every X minutes and if it 404's, then the page can know there has been a redeploy and   either reload the page automatically, or prompt the user to reload ASAP.

Basically i am experiencing a regression in failing visits on our website due to the error shown below. How do i get around this?

Thanks :-)

UPDATE #1:

I tried to open one of the hashed chunks from a new tab in Chrome, which failed. Then i did it again, and it loaded the JS file without any problems. After that i was able to open the website again. Could this anomoly explain the issue i am facing?

maziarz

maziarz posted a new question

pwa-module •

Disable caching for JSON files

I recently noticed that the JSON files which i fetch and saved on my CDN via my headless CMS are cached. The files are located in /static/data in my nuxt project. Is there a way to exclude these from being cached, so they are always fetched?

jhnns

jhnns posted a new bug report

pwa-module •

bug Icon resize task blocks the main thread during build

Version

2.6.0

Reproduction link

https://github.com/jhnns/nuxt-pwa-build-perf-demo

Steps to reproduce

  • Create an initial nuxt project with create-nuxt-app and select the PWA module
  • Run node --inspect-brk ./node_modules/.bin/nuxt
  • Open Chrome and go to chrome://inspect/#devices
  • Select Node process and create a profile

What is expected ?

The icon resize task should start as soon as possible in a different process/thread to speed up the build.

What is actually happening?

Here is a flamegraph that demonstrates that the icon resize task takes up more than half of the build time. But the bigger problem is that the task blocks the main thread which means that webpack can't start to do its work in the mean time. Here I've marked the resize task with red:
Bildschirmfoto 2019-03-30 um 17.57.58 Kopie.jpg

You can see that webpack starts its work only after around 16s.

Additional comments?

Spinning up a separate process doesn't come for free. Usually it's better to have a separate thread for this kind of task. We could do this with Node.js worker threads (https://nodejs.org/api/worker_threads.html) which are only available for Node >10.

josteph

josteph posted a new question

pwa-module •

Listen for PWA update

Hello, I notice that this pwa-module supports auto updating the sw.js, but I would like to give a friendly notification for the user to reload the PWA.

Is this necessary to do so? Also, how do I attach the event like updatefound in the workbox config?

Thank you very much.

robertpiosik

robertpiosik posted a new question

pwa-module •

k

o

ptdev

ptdev posted a new question

pwa-module •

Add to homescreen prompt

Hi, I've been building an app with nuxt-pwa but had some issues making the app show the "Add to homescreen" prompt.
According to this Google document there are some requirements for the prompt to show up. This module appears to implement all of the requirements except the last one which states:
"Has registered a service worker with a fetch event handler"

As far as I could tell, the generated service worker doesn't implement a fetch handler, therefore mobile browsers never show the "add to homescreen" prompt.

I worked around this by doing the following step. On my workbox config (in nuxt-config.js) I added the following:

importScripts: [
    'custom-sw.js'
]

And on my static/custom-sw.js file I added only this:

self.addEventListener('fetch', (event) => {})

Once this was done, my app now shows the "add to homescreen" bar at the bottom of mobile browsers (at least on mobile chrome)

Now my question/request is: shouldn't this functionality be built into the module (maybe like a boolean or something) so that we don't need to create an extra custom service worker file just for that fetch call?

Thanks

dasZGFz

dasZGFz posted a new bug report

pwa-module •

bug corejs issues

Version

v3.0.0-beta.14

Reproduction link

https://github.com/dasZGFz/das.zgfz.me

Steps to reproduce

Running the build displays all kinds of issues with core-js. Note: this repo is on nuxt-edge

What is expected ?

The build should run.

What is actually happening?

The build fails.

Additional comments?

I narrowed this down to the pwa module by running yarn remove @nuxtjs/pwa and removing it from my nuxt config.