shaianest
commented
2 years ago fairly easily fixed the second problem by adding below logic to a component emphsize on isShowing and how i get it you see check if the route is finnished loading or not const [ isShowing, setIsShowing ] = useState(false);
function routeChangeStart () { setIsShowing(true); }
function routeChangeEnd() { setIsShowing(false); } useEffect(() => { Router.events.on('routeChangeStart', routeChangeStart); Router.events.on('routeChangeComplete', routeChangeEnd); Router.events.on('routeChangeError', routeChangeEnd); return () => { Router.events.off('routeChangeStart', routeChangeStart); Router.events.off('routeChangeComplete', routeChangeEnd); Router.events.off('routeChangeError', routeChangeEnd); }; }, []); const [isOnline, setIsOnline] = React.useState(true) React.useEffect(() => { if (typeof window !== 'undefined' && 'ononline' in window && 'onoffline' in window) { setIsOnline(window.navigator.onLine) if (!window.ononline) { window.addEventListener('online', () => { setIsOnline(true) }) } if (!window.onoffline) { window.addEventListener('offline', () => { setIsOnline(false) }) } } }, [])
const router = useRouter()
React.useEffect(() => {
// @ts-ignore
if (typeof window !== 'undefined' && 'serviceWorker' in navigator && window.workbox !== undefined && isOnline && !isShowing) {
// skip index route, because it's already cached under start-url caching object
if (router.route !== '/') {
// @ts-ignore
const wb = window.workbox
wb.active.then(worker => {
wb.messageSW({ action: 'CACHE_NEW_ROUTE' })
})
}
}
}, [isOnline, router.route,isShowing])
fixed the third issue in next.config.js by adding rewrites tldr; but is wanky and please help fix it the right way of not including it in precache async rewrites() { return [ { source: '/public/sw.js', destination: '/sw.js', }, ] },
Summary
What can I help with? Please keep this clear and concise. pleas any link or help on next routing on offline like normal a and cache of others is a bit to soon and page is display noned and no css but a bit later page is complete and for that i have to put the links in the search bar to work please any ideas? also one more thing in the build i have to do redirect source: '/public/sw.js', destination: '/sw.js', because its looking in public that way to complete precache
Versions
next-pwa: 5.4.6next:12.1.0How To Reproduce
Steps to reproduce the behavior:
Link to minimal reproduce setup repository if any.
Expected Behaviors
A clear and concise description of what you expected to happen. 1) how to change link component in offline to simple a tag or similar beahavior on error 2) a bit later or fully render page to cache in cach on frontend nav 3)dont precache sw.js
Screenshots
If applicable, add screenshots to help explain your problem.
Additional Context
Add any other context about the problem here.