studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(service-worker) improve SW registration and update handling

Browse Source 
It is apparently a bad practice to add the version
number to the service worker file name.
This prevents the browser from properly updating
the service worker when a new version is available.

We improve the update handling by a more usual
pattern.
This commit is contained in:
Anthony LC
2025-10-09 15:41:11 +02:00
parent 8023720da3
commit af01c6e466
3 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -30,6 +30,7 @@ and this project adheres to
- ♿ add h1 for SR on 40X pages and remove alt texts #1438 - ♿ add h1 for SR on 40X pages and remove alt texts #1438
- ♿ update labels and shared document icon accessibility #1442 - ♿ update labels and shared document icon accessibility #1442
- 🍱(frontend) Fonts GDPR compliants #1453 - 🍱(frontend) Fonts GDPR compliants #1453
- ♻️(service-worker) improve SW registration and update handling #1473
### Fixed ### Fixed

6
src/frontend/apps/impress/src/features/service-worker/__tests__/useSWRegister.test.tsx
View File

@@ -11,7 +11,6 @@ const TestComponent = () => {
describe('useSWRegister', () => { describe('useSWRegister', () => {
it('checks service-worker is register', () => { it('checks service-worker is register', () => {
process.env.NEXT_PUBLIC_BUILD_ID = '123456';
vi.spyOn(console, 'error').mockImplementation(() => {}); vi.spyOn(console, 'error').mockImplementation(() => {});
const registerSpy = vi.fn(); const registerSpy = vi.fn();
@@ -35,7 +34,7 @@ describe('useSWRegister', () => {
render(<TestComponent />); render(<TestComponent />);
expect(registerSpy).toHaveBeenCalledWith('/service-worker.js?v=123456'); expect(registerSpy).toHaveBeenCalledWith('/service-worker.js');
expect(addEventListenerSpy).toHaveBeenCalledWith( expect(addEventListenerSpy).toHaveBeenCalledWith(
'controllerchange', 'controllerchange',
expect.any(Function), expect.any(Function),
@@ -44,7 +43,6 @@ describe('useSWRegister', () => {
it('checks service-worker is not register', () => { it('checks service-worker is not register', () => {
process.env.NEXT_PUBLIC_SW_DEACTIVATED = 'true'; process.env.NEXT_PUBLIC_SW_DEACTIVATED = 'true';
process.env.NEXT_PUBLIC_BUILD_ID = '123456';
const registerSpy = vi.fn(); const registerSpy = vi.fn();
registerSpy.mockImplementation( registerSpy.mockImplementation(
@@ -62,6 +60,6 @@ describe('useSWRegister', () => {
render(<TestComponent />); render(<TestComponent />);
expect(registerSpy).not.toHaveBeenCalledWith('/service-worker.js?v=123456'); expect(registerSpy).not.toHaveBeenCalledWith('/service-worker.js');
}); });
}); });

10
src/frontend/apps/impress/src/features/service-worker/hooks/useSWRegister.tsx
View File

@@ -7,7 +7,7 @@ export const useSWRegister = () => {
process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true' process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true'
) { ) {
navigator.serviceWorker navigator.serviceWorker
.register(`/service-worker.js?v=${process.env.NEXT_PUBLIC_BUILD_ID}`) .register(`/service-worker.js`)
.then((registration) => { .then((registration) => {
registration.onupdatefound = () => { registration.onupdatefound = () => {
const newWorker = registration.installing; const newWorker = registration.installing;
@@ -29,11 +29,13 @@ export const useSWRegister = () => {
console.error('Service worker registration failed:', err); console.error('Service worker registration failed:', err);
}); });
const currentController = navigator.serviceWorker.controller; let refreshing = false;
const onControllerChange = () => { const onControllerChange = () => {
if (currentController) { if (refreshing) {
window.location.reload(); return;
} }
refreshing = true;
window.location.reload();
}; };
navigator.serviceWorker.addEventListener( navigator.serviceWorker.addEventListener(
'controllerchange', 'controllerchange',