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

♻️(service-worker) create useSWRegister hook

Browse Source 
Create useSWRegister hook, which will be used to
register the service worker in the app.
This commit is contained in:
Anthony LC
2024-06-26 17:03:45 +02:00
committed by Anthony LC
parent d87c278cce
commit 9c19b22a66
4 changed files with 26 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,26 +1,15 @@
import '@testing-library/jest-dom'; import '@testing-library/jest-dom';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import { Router } from 'next/router';
import { PropsWithChildren, ReactElement } from 'react';
import App from '@/pages/_app'; import { useSWRegister } from '../hooks/useSWRegister';
import { AppWrapper } from '@/tests/utils';
import { NextPageWithLayout } from '@/types/next'; const TestComponent = () => {
useSWRegister();
const Page: NextPageWithLayout = () => {
return <div>Test Page</div>; return <div>Test Page</div>;
}; };
Page.getLayout = function getLayout(page: ReactElement) { describe('useSWRegister', () => {
return <div>{page}</div>;
};
jest.mock('@/core/', () => ({
...jest.requireActual('@/core/'),
AppProvider: ({ children }: PropsWithChildren) => <div>{children}</div>,
}));
describe('App', () => {
it('checks service-worker is register', () => { it('checks service-worker is register', () => {
process.env.NEXT_PUBLIC_BUILD_ID = '123456'; process.env.NEXT_PUBLIC_BUILD_ID = '123456';
jest.spyOn(console, 'error').mockImplementation(() => {}); jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -39,9 +28,7 @@ describe('App', () => {
writable: true, writable: true,
}); });
render(<App Component={Page} router={{} as Router} pageProps={{}} />, { render(<TestComponent />);
wrapper: AppWrapper,
});
expect(registerSpy).toHaveBeenCalledWith('/service-worker.js?v=123456'); expect(registerSpy).toHaveBeenCalledWith('/service-worker.js?v=123456');
}); });
@@ -64,9 +51,7 @@ describe('App', () => {
writable: true, writable: true,
}); });
render(<App Component={Page} router={{} as Router} pageProps={{}} />, { render(<TestComponent />);
wrapper: AppWrapper,
});
expect(registerSpy).not.toHaveBeenCalledWith('/service-worker.js?v=123456'); expect(registerSpy).not.toHaveBeenCalledWith('/service-worker.js?v=123456');
}); });

16
src/frontend/apps/impress/src/features/service-worker/hooks/useSWRegister.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { useEffect } from 'react';
export const useSWRegister = () => {
useEffect(() => {
if (
'serviceWorker' in navigator &&
process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true'
) {
navigator.serviceWorker
.register(`/service-worker.js?v=${process.env.NEXT_PUBLIC_BUILD_ID}`)
.catch((err) => {
console.error('Service worker registration failed:', err);
});
}
}, []);
};

1
src/frontend/apps/impress/src/features/service-worker/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './hooks/useSWRegister';

16
src/frontend/apps/impress/src/pages/_app.tsx
View File

@@ -1,9 +1,9 @@
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import Head from 'next/head'; import Head from 'next/head';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { AppProvider } from '@/core/'; import { AppProvider } from '@/core/';
import { useSWRegister } from '@/features/service-worker/';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import './globals.css'; import './globals.css';
@@ -13,22 +13,10 @@ type AppPropsWithLayout = AppProps & {
}; };
export default function App({ Component, pageProps }: AppPropsWithLayout) { export default function App({ Component, pageProps }: AppPropsWithLayout) {
useSWRegister();
const getLayout = Component.getLayout ?? ((page) => page); const getLayout = Component.getLayout ?? ((page) => page);
const { t } = useTranslation(); const { t } = useTranslation();
useEffect(() => {
if (
'serviceWorker' in navigator &&
process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true'
) {
navigator.serviceWorker
.register(`/service-worker.js?v=${process.env.NEXT_PUBLIC_BUILD_ID}`)
.catch((err) => {
console.error('Service worker registration failed:', err);
});
}
}, []);
return ( return (
<> <>
<Head> <Head>