Service Worker weird caching #5316
Comments
|
You need to close all tabs or fully close the browser to see the changes reflected. A page reload will not reflect the changes. |
|
Hey @Timer, from what I see on the video, OP is using the incognito mode with a single open tab. I cloned the repo and I can reproduce the problem as well. Maybe something is wrong with the V2 service worker? |
|
/cc @jeffposnick |
|
Is this the expected behaviour? Does it happen only on localhost? When onUpdate gets called I would like to add a popup which prompts the user to reload the page. |
|
Yes -- the expected behavior is that you must close all tabs or browser before the new content appears. This is the behavior everywhere, not just on You should be able to override this via |
|
May we convert this into a "doc improvement" issue so that we keep track of this? I think the current documentation should at least mention it. |
|
Yeah we should probably note this in https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#offline-first-considerations |
|
In the meantime I found this: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin |
|
Yes, this does warrant improvements to the v2 docs. I can tackle that next week. FYI, #3613 (comment) is the best explanation of why defaulting tl;dr is that if |
|
@gabrielmicko , @jeffposnick , Can the |
|
On this line the workbox-webpack-plugin is registered with
Should the default behaviour be setting |
|
@mymattcarroll yes, that way you get the update asap. For now I don't know how am I going to get a callback about the update onUpdate seems to be broken if skipWaiting is set to true. I'll take a look later. |
|
Finally I was able to test with "react-scripts": "^1.1.0". Actually it works how it should! Once it reloads, I instantly see the change, whereas in create-react-app v2 I won't. I guess this is something that has to be addressed. Please at least make it configurable. This case onUpdate would instantly fire once skipWaiting() get's called. What do you think? /cc @jeffposnick Edit: actually I am a little confused if it could be added to serviceWorker.js file. Cause I guess it has to be in the service-worker.js. |
|
@gabrielmicko, it will have to be a build time configuration as it needs to be added to the webpack configuration here. Perhaps configuration in {
"serviceWorkerOptions": {
"skipWaiting": true
}
} |
|
@mymattcarroll This would be awesome. Other questions is how do you let serviceWorker.js know that skipWaiting has been called? The developer want's to subscribe to that event, so he can let the users know there was an update. |
|
@Timer, it seems the default behaviour of the service worker has changed between v1 and v2. Our project is no longer hitting this line to allow us to prompt the user when new content is available by just refreshing the current page. Was this intentional? If it was, I have been able to make changes to a local fork to get v1 behaviour to occur again by making the following changes:
I would be happy to contribute with a pull request if you believe these changes are desirable for others. If setting This library is awesome, would hate to consider ejecting... |
|
Very well said @mymattcarroll! This is what I realised as well! I guess the default behaviour should match v1 so that devs would not need to change anything! |
|
So I had mistakenly thought that being able to override the default Workbox options via an external config file had made it into That would allow folks who feel comfortable with the tradeoffs around potentially buggy lazy-loading to opt-in to using I've filed separate issue to track the addition of that config file: #5359 |
|
I'm in favor of adding a At first I thought it could already be done. |
This is the hacky way I had to do it npm install --save-dev replace-in-filecreate a file in the root called 'use strict';
const replace = require('replace-in-file');
try {
console.log('Adding skipWaiting: true to react-script webpack-config.js');
replace.sync({
files: 'node_modules/react-scripts/config/webpack.config.js',
from: /clientsClaim: true,$/gm,
to: (match) => {
return match + ' skipWaiting: true,';
},
});
} catch (e) {
console.log('Something went wrong when trying to add skipWaiting: true to react-script webpack-config.js', e);
process.exit();
}Add it as a postinstall script to your {
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "node hack-add-skipWaiting-true-to-react-script.js"
}
}run |
|
If you use react-app-rewired it is fairly easy to achieve this. I can post it if somebody wants it. |
That'd be good but isn't react-app-wired deprecated on CRA v2.0? |
|
@kevinOriginal nope, the message on their repo is confusing. It works just fine, it's just that the utilities used to inject your own configuration work just on V1. But you can either write the code yourself or use the ones provided by customize-cra |
|
Thanks for the solutions. Works perfect for me on ios. I had to tweak obviously to get it working how I wanted. |
Can you share tweaks please? |
I'd recommend posting what you have. And are you posting skip waiting on a button click? |
No, i just used the following snipped that was shared above. |
|
The problem of not updating the cache in iOS, I opened this issue for Safari (only PWA): https://bugs.webkit.org/show_bug.cgi?id=199110 While this problem is not solved, I did a workround that worked well for me: https://gist.github.com/kawazoe/fa3b5a3c998d16871ffb9e2fd721cb4b#gistcomment-2953706 |
And what's in your service-worker.js? as the above alone won't trigger the update. and in the register & registerValidSW function you need to have props.onUpdate attached to an event that tells the worker theres an update. Also without those it shouldn't work on chrome too? Or has it been working there for you? |
Thanks for your response. |
|
On > > > > > Thanks for the solutions. Works perfect for me on ios. I had to tweak obviously to get it working how I wanted.
I was able to make the update work following this guide but for chrome and Android only. |
this is precisely what had happened to me. On the smartphone app became dead and users can do nothing with that |
|
This is code I use: /* eslint-disable */
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
import Toaster from './services/Toaster';
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
Toaster.show({
message: 'New version available!',
intent: 'success',
action: {
onClick: () => {
installingWorker.postMessage({ action: 'skipWaiting' });
window.location.reload();
},
text: 'Update'
}
});
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
} |
|
If anyone wonder, here is a TypeScript version of @EddiG's serviceWorker.register({
onUpdate: registration => {
const waitingServiceWorker = registration.waiting;
interface ServiceWorkerEvent extends Event {
target: Partial<ServiceWorker> & EventTarget | null;
}
if (waitingServiceWorker) {
waitingServiceWorker.addEventListener(
'statechange',
(event: ServiceWorkerEvent) => {
if (event.target && event.target.state === 'activated') {
window.location.reload();
}
}
);
waitingServiceWorker.postMessage({ type: 'SKIP_WAITING' });
}
}
});It probably could be improved, but it seems to do the job. |
|
pro tip: in the bottom of your index file add registerServiceWorker({
onUpdate: async function (registration) {
const waitingServiceWorker = registration.waiting
const bc = new BroadcastChannel('app-update');
bc.postMessage('App has updated.');
}
})then add a component (make sure you render it somewhere) import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import * as React from "react";
import withTheme from "./components/tmx/withTheme";
class ReleaseDialog extends React.Component {
public state = {
open: false,
};
public componentWillMount = () => {
if (typeof BroadcastChannel !== 'undefined') {
const updateChannel = new BroadcastChannel('app-update');
updateChannel.addEventListener('message', event => {
this.setState({open: true})
});
}
}
public handleAccept = async () => {
try {
if (navigator && navigator.serviceWorker) {
const waitingServiceWorker = await navigator.serviceWorker.ready
if (waitingServiceWorker.waiting) {
waitingServiceWorker.waiting.postMessage({type: "SKIP_WAITING"});
}
}
} catch (e) {
console.error(e)
}
}
public handleClose = () => {
this.setState({open: false});
};
public render() {
const {version} = this.props;
return (
<div>
<Dialog
open={this.state.open}
onClose={this.handleClose}
>
<DialogTitle id="alert-dialog-title">The site Just got better!</DialogTitle>
<DialogActions>
<Button onClick={this.handleClose} color="default">
Cancel
</Button>
<Button onClick={this.handleAccept} color="primary" autoFocus={true}>
UPDATE
</Button>
</DialogActions>
</Dialog>
</div>
)
}
}also add this just before the closing tag of let refreshing = false;
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (refreshing) {
return;
}
refreshing = true;
console.log("controller change")
window.location.reload();
});The most important thing to note is you need to send SKIP_WAITING to the waiting serviceWorker not the active one! PS I stripped out/altered some stuff from the code above so it may need to be altered |
|
There are a lot of solutions. Do we have one universal solution to solve this issue without custom webpack config, workbox and etc.? |
|
I think because there isn’t really a one solution for all and it’s more of
a service worker thing. Developers may have their own way they want to
handle service workers.
On Thu, 31 Oct 2019 at 10:57, Denys Morozov ***@***.***> wrote:
There are a lot of solutions. Do we have one universal solution to solve
this issue without custom webpack config, workbox and etc.?
Can create-react-app solve this issue out of the box? I think it's major
question!
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#5316?email_source=notifications&email_token=ABEA4E44JPIYMJAB4BSSH3TQRK227A5CNFSM4FZJ37O2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECXJ7HY#issuecomment-548315039>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABEA4E4MILKKSOPAKWZMO6TQRK227ANCNFSM4FZJ37OQ>
.
--
*Ricco*
*Web designer/developer*
*m: *07957914698
*w: *riccoski.com
|
Thanks! |
|
I don't understand why it's advised to ask the user to update the app before triggering |
Yes. You are right. And you can force refresh a page. |
|
Sometimes you want to notify the user that there are updates. And let them
choose to update in case they are in the middle of something
On Fri, 22 Nov 2019 at 15:22, Denys Morozov ***@***.***> wrote:
I don't understand why it's advised to ask the user to update the app
before triggering skipWaiting(). This piece of code just tells the
browser to replace the old service worker with the new one and on the next
refresh, new version will be installed right ?
serviceWorker.register({
onUpdate: (registration: ServiceWorkerRegistration) => {
if (registration.waiting) {
registration.waiting.postMessage({ type: "SKIP_WAITING" });
}
}
});
Yes. You are right. And you can force refresh a page.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#5316?email_source=notifications&email_token=ABEA4EZKCXKOYJYYYEOFHYLQU72KBA5CNFSM4FZJ37O2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE56Q2A#issuecomment-557574248>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABEA4E4UU5EYBO3B2O5CJLLQU72KBANCNFSM4FZJ37OQ>
.
--
*Ricco*
*Web designer/developer*
*m: *07957914698
*w: *riccoski.com
|
Ok I have an issue with this solution. whenever I refresh a lot, in a small period of time, when I know there's a new update available, it will skip the update and it will stay in a "waiting to activate" state ... Any chance I can trigger the update when it's in this state ? |
|
Ok, to make sure index.js: serviceWorker.js: |
|
I ran into the same issue with users struggling to load the updated version of my app. I read through this thread and came up with a simplified solution thanks to the updates that have been made to the serviceWorker.js included in CRA 3.2.0. Note that this solution only works well if you are Not lazy-loading. in index.tsx add: I wrote a blog post that explains more here: https://steemit.com/typescript/@jfbloom22/how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript |
serviceWorker.register({
onUpdate: async registration => {
// We want to run this code only if we detect a new service worker is
// waiting to be activated.
// Details about it: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
if (registration && registration.waiting) {
await registration.unregister();
// Makes Workbox call skipWaiting()
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
// Once the service worker is unregistered, we can reload the page to let
// the browser download a fresh copy of our app (invalidating the cache)
window.location.reload();
}
},
}); |
|
Just to add to this thread and make it useful for more people, in my case my PWA is going to run for a long time without a refresh (a long-running always open dashboard in a TV, no end-user interactions). In this case, I understand I to need to trigger periodically check for updates by myself. A change needs to be done inside serviceWorker.ts file for that: navigator.serviceWorker
.register(swUrl)
.then(registration => {
// Start addition---
// https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#manual_updates
// Added code, as our application will be open for a long time and we are a SPA, we need
// to trigger checks for updates frequently
setInterval(() => {
console.log('Checking if service worker was updated in server')
registration.update()
}, 15 * 60 * 1000) // Every 15 mins check
// End addition---
registration.onupdatefound = () => {...}Hope that is useful and feel free to correct me if I'm wrong. |
|
Can anyone confirm if iOS 14 helps with these issues? |
|
Hi, I can't decide which variant is better? serviceWorkerRegistration.register({
onUpdate: async (registration) => {
// We want to run this code only if we detect a new service worker is
// waiting to be activated.
// Details about it: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
if (registration?.waiting) {
await registration.unregister();
registration.waiting.addEventListener('statechange', (event) => {
const sw = event?.target as ServiceWorker;
if (sw.state === 'activated') {
// Once the service worker is unregistered, we can reload the page to let
// the browser download a fresh copy of our app (invalidating the cache)
window.location.reload();
}
});
// Makes Workbox call skipWaiting() that will trigger upper listener
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
}
},
});or by @estevaolucas serviceWorkerRegistration.register({
onUpdate: async (registration) => {
// We want to run this code only if we detect a new service worker is
// waiting to be activated.
// Details about it: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
if (registration?.waiting) {
await registration.unregister();
// Makes Workbox call skipWaiting()
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
// Once the service worker is unregistered, we can reload the page to let
// the browser download a fresh copy of our app (invalidating the cache)
window.location.reload();
}
},
});Also I want to know why should we call registration.unregister()? |
and others
Is this a bug report?
Yes
Did you try recovering your dependencies?
Yes
Which terms did you search for in User Guide?
#2398
Environment
Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Binaries:
Node: 9.10.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 62.0.3
Safari: 12.0
npmPackages:
react: ^16.5.2 => 16.5.2
react-dom: ^16.5.2 => 16.5.2
react-scripts: 2.0.4 => 2.0.4
npmGlobalPackages:
create-react-app: 2.0.3
Steps to Reproduce
(Write your steps here:)
yarn install. Create a build.yarn run build.serve -s build(if you don't have serveyarn global add serve), ornode server.js.App.jsand runyarn run buildagain.Expected Behavior
After refreshing the page at point 7. I should see my changes.
Actual Behavior
I see the old version of my app.
(Write what happened. Please add screenshots!)
Reproducible Demo
https://www.youtube.com/watch?v=Hl5HbZ0TWoY
The text was updated successfully, but these errors were encountered: