Comments (13)
I'm going to revert last change, I need to review what's happening in workbox-window and the register module here, sw events seems to be wrong.
from vite-plugin-pwa.
Why are you exposing update
instead updateServiceWorker
? I need to check if calling await serviceWorkerRegistration()?.update();
will skip the awaiting state (this call seems to be the problem).
In the meantime, can you test using the logic provided in the periodic sync for updates and exposing updateServiceWorker
in the update
value?
from vite-plugin-pwa.
Why are you exposing
update
insteadupdateServiceWorker
?
Good shout, this is completely redundant.
In the meantime, can you test using the logic provided in the periodic sync for updates and exposing updateServiceWorker in the update value?
I'm seeing the same issue with this logic, here is the updated hook if you'd like to double check my changes:
export function useUpdate() {
const {
needRefresh: [needRefresh],
updateServiceWorker,
} = useRegisterSW({
onRegisteredSW(serviceWorkerUrl, serviceWorkerRegistration) {
setInterval(async () => {
if (!(!serviceWorkerRegistration?.installing && navigator)) {
return;
}
if ("connection" in navigator && !navigator.onLine) {
return;
}
const response = await fetch(serviceWorkerUrl, {
cache: "no-store",
headers: {
cache: "no-store",
"cache-control": "no-cache",
},
});
if (response?.status === 200) {
await serviceWorkerRegistration?.update();
}
}, 60 * 1000);
},
onRegisterError(error) {
console.error("SW registration error", error);
},
});
return { updateReady: needRefresh, updateServiceWorker };
}
from vite-plugin-pwa.
Can you try removing the interval in your local? I Will check your reproduction tmr (refresh the page once built second time).
from vite-plugin-pwa.
Can you try removing the interval in your local? I Will check your reproduction tmr (refresh the page once built second time).
Removing setInterval
and refreshing the page works as expected, the update installs and it doesn't trigger a refresh.
I did a separate test to see what happens if we update the service worker with Chrome's dev tools (also with setInterval
removed) and it behaves the same way setInterval
does. Once the update is waiting to activate, the page refreshes itself (but still waits for the user to trigger updateServiceWorker
, causing a second refresh).
from vite-plugin-pwa.
You Will need to avoid calling update if the sw also waiting to be activated, I guess the update will also trigger the event to active it
from vite-plugin-pwa.
It seems the problem is the heuristic time approach in worbox window to detect false positives: you can try awaiting 1 minute between builds (https://github.com/GoogleChrome/workbox/blob/v7/packages/workbox-window/src/Workbox.ts#L414)
from vite-plugin-pwa.
Thank you for all your help, looking forward to getting to the bottom of this.
You Will need to avoid calling update if the sw also waiting to be activated
This doesn't seem to help, even if I remove serviceWorkerRegistration?.update()
the issue still happens when I manually trigger the update from the Chrome dev tools (Chrome isn't aware of a new service worker at all at this point).
It seems the problem is the heuristic time approach in worbox window to detect false positives: you can try awaiting 1 minute between builds (https://github.com/GoogleChrome/workbox/blob/v7/packages/workbox-window/src/Workbox.ts#L414)
I tried the following but the issue still occurs:
- 1st build
- Install service worker and refresh
- Wait 10 minutes
- Second build
- Manually trigger service worker update from Chrome dev tools
- Service worker installing...
- Service worker waiting -> automatic refresh (bug)
- After refresh
needRefresh
istrue
and service worker is still waiting to be activated (expected)
from vite-plugin-pwa.
Cleanup the storage removing the sw, the logic is always 1 step behind, you don't need to wait 10 min. just 1 min.
EDIT: I have no idea what's the behavior when using refresh from chrome dev tools, you can just await the periodic sync to refresh it or just refresh the page
from vite-plugin-pwa.
I have no idea what's the behavior when using refresh from chrome dev tools
I think it's the same as calling serviceWorkerRegistration.update()
once.
you can just await the periodic sync to refresh it or just refresh the page
Sorry I'm not sure what you mean by this.
Cleanup the storage removing the sw
Sorry I'm not sure what you mean by this either.
from vite-plugin-pwa.
I guess it is a problem with the heuristic time based and short sw periodic sync + update call (when precaching new sw and calling update)
from vite-plugin-pwa.
@alexlapwood can you try this approach (update signals and effect, I'm not a solid expert)?
const [updateFound, setUpdateFound] = createSignal(false)
const [interval, registerInterval] = createSignal<ReturnType<typeof setInterval> | undefined>(undefined)
createEffect(() => {
if (updateFound())
clearInterval(interval())
})
then in your onRegisteredSW
callback:
onRegisteredSW(swUrl, r) {
if (r) {
navigator.serviceWorker.ready.then((registration) => {
registration.addEventListener('updatefound', () => {
console.log('updatefound')
setUpdateFound(true)
})
})
registerInterval(setInterval(async () => {
if (!(!r.installing && navigator))
return
if (('connection' in navigator) && !navigator.onLine)
return
const resp = await fetch(swUrl, {
cache: 'no-store',
headers: {
'cache': 'no-store',
'cache-control': 'no-cache',
},
})
if (resp?.status === 200)
await r.update()
}, 20000))
}
}
from vite-plugin-pwa.
can you try this approach (update signals and effect, I'm not a solid expert)?
Your use of signals and effects looks good to me, but the same issue still occurs. Let me know if there's anything else I can do to help figure this one out.
from vite-plugin-pwa.
Related Issues (20)
- PWA Assets generation on the fly HOT 5
- dev sw file gets created at "base/base/dev-sw.js?dev-sw" HOT 8
- How to handle SSR? HOT 2
- How to use different network strategy
- Wrong envPrefix in Astro Integration HOT 7
- vite-plugin-pwa removes mock service worker HOT 7
- no SW.js when registerSW() function is in pwa.js file with particular import manner HOT 3
- Cannot bundle Node.js built-in "fs" imported from ... Consider disabling ssr.noExternal or remove the built-in dependency HOT 10
- pwa assets disabled when using inline custom preset
- favicon preset not being applied when using custom inline preset
- service-worker cannot detect new version to update cache when using Link, NavLink in React HOT 4
- [bug] add-to-cache-list-conflicting when setting both the globPattern and icons manifest HOT 3
- ServiceWorker script at https://app.***.com/sw.js for scope https://app.***.com/ encountered an error during installation.
- submit logo to simple-icon HOT 2
- Problems with auto generated service-worker on old safari webview
- Issue on Vercel after each new deployement HOT 8
- SW not working with cross origin headers (sharedArrayBuffers) HOT 1
- Cache media received from the server HOT 1
- preact + ts and types issue
- manifest icons do not follow "base" path HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-pwa.