Skip to content

Commit

Permalink
Merge branch 'feat/pwa' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
eun-hak committed May 28, 2024
2 parents 8a10421 + 9c484a3 commit 2e31167
Show file tree
Hide file tree
Showing 9 changed files with 4,593 additions and 217 deletions.
9 changes: 8 additions & 1 deletion next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/** @type {import('next').NextConfig} */
import withPWA from 'next-pwa';

const nextConfig = {
images: {
domains: [
Expand All @@ -19,7 +21,12 @@ const nextConfig = {
else config.resolve.alias['msw/node'] = false;
}
return config;
}
},
pwa: withPWA({
dest: 'public',
register: true,
skipWaiting: true
})
};

export default nextConfig;
4,693 changes: 4,478 additions & 215 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@
"@tanstack/react-query-devtools": "^5.36.0",
"axios": "^1.6.8",
"date-fns": "^3.6.0",
"firebase": "^10.12.2",
"framer-motion": "^11.1.9",
"haversine": "^1.1.1",
"next": "14.2.3",
"next-pwa": "^5.6.0",
"react": "^18",
"react-cookie": "^7.1.4",
"react-dom": "^18",
Expand Down
20 changes: 20 additions & 0 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"description": "My awesome Progressive Web App!",
"icons": [
{
"src": "/termsCheck.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/termsCheck.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
21 changes: 21 additions & 0 deletions public/sw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// sw.js

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-unused-vars */

// install event
self.addEventListener('install', (e) => {
// console.log('[Service Worker] installed');
});

// activate event
self.addEventListener('activate', (e) => {
// console.log('[Service Worker] actived', e);
});

// fetch event
self.addEventListener('fetch', (e) => {
// console.log('[Service Worker] fetched resource ' + e.request.url);
});

// 등등 앱에 따라 pwa 기능을 추가하고 sw.js에 작성할 수 있습니다.
37 changes: 37 additions & 0 deletions src/components/pwa/SetUp.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
export const registerServiceWorker = () => {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/sw.js')
.then((registration) => {
console.log('Service Worker 등록 성공:', registration);
})
.catch((error) => {
console.log('Service Worker 등록 실패:', error);
});
});
}
};

export const requestNotificationPermission = () => {
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('푸시 알림 권한이 허용됨');
} else {
console.log('푸시 알림 권한이 거부됨');
}
});
}
};

export const sendPushNotification = (title: string, body: string) => {
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.ready.then((registration) => {
registration.showNotification(title, {
body,
icon: '/termsCheck.png'
});
});
}
};
21 changes: 21 additions & 0 deletions src/components/pwa/Test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useEffect } from 'react';
import {
registerServiceWorker,
requestNotificationPermission,
sendPushNotification
} from './SetUp';

export const Test = () => {
// 푸시 알림 테스트
const clickPushHandler = () => {
sendPushNotification('매직포스 알림', '알림 가나요?');
};
useEffect(() => {
registerServiceWorker();
requestNotificationPermission();
// 직접 푸시 알림 테스트
sendPushNotification('테스트 알림', '테스트 알림입니다.');
}, []);

return <button onClick={clickPushHandler}>알림 보내기</button>;
};
2 changes: 2 additions & 0 deletions src/pages/sign/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Test } from '@/components/pwa/Test';
import MainContainer from '@/components/shared/MainContainer';
import SignInButton from '@/components/shared/sign/SignInButton';
import SignUpButton from '@/components/shared/sign/SignUpButton';
Expand Down Expand Up @@ -37,6 +38,7 @@ const SignHomePage = () => {
</span>
</Link>
</div>
{Test()}
</MainContainer>
);
};
Expand Down
5 changes: 4 additions & 1 deletion src/providers/MockProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import initMocks from '@/mocks';

if (process.env.NEXT_PUBLIC_API_MOCKING === 'enable') {
if (
process.env.NEXT_PUBLIC_API_MOCKING === 'enable' &&
process.env.NODE_ENV === 'development'
) {
initMocks();
}

Expand Down

0 comments on commit 2e31167

Please sign in to comment.