From e841ee7eee6a1e0df162789a19154061f7815093 Mon Sep 17 00:00:00 2001 From: wonderlandpark Date: Sun, 16 May 2021 22:58:21 +0900 Subject: [PATCH] feat: support pwa --- .gitignore | 15 +- components/Navbar.tsx | 37 +- next.config.js | 8 +- package.json | 1 + pages/_app.tsx | 18 +- pages/_document.tsx | 25 + pages/_offline.tsx | 29 + pages/callback/discord.tsx | 14 +- public/android-icon-144x144.png | Bin 0 -> 7286 bytes public/android-icon-192x192.png | Bin 0 -> 8183 bytes public/android-icon-36x36.png | Bin 0 -> 1852 bytes public/android-icon-48x48.png | Bin 0 -> 2239 bytes public/android-icon-72x72.png | Bin 0 -> 3918 bytes public/android-icon-96x96.png | Bin 0 -> 5073 bytes public/apple-icon-114x114.png | Bin 0 -> 5926 bytes public/apple-icon-120x120.png | Bin 0 -> 6061 bytes public/apple-icon-144x144.png | Bin 0 -> 7286 bytes public/apple-icon-152x152.png | Bin 0 -> 7811 bytes public/apple-icon-180x180.png | Bin 0 -> 9390 bytes public/apple-icon-57x57.png | Bin 0 -> 3017 bytes public/apple-icon-60x60.png | Bin 0 -> 3122 bytes public/apple-icon-72x72.png | Bin 0 -> 3918 bytes public/apple-icon-76x76.png | Bin 0 -> 4005 bytes public/apple-icon-precomposed.png | Bin 0 -> 8757 bytes public/apple-icon.png | Bin 0 -> 8757 bytes public/browserconfig.xml | 2 + public/favicon-16x16.png | Bin 0 -> 1112 bytes public/favicon-32x32.png | Bin 0 -> 1731 bytes public/favicon-96x96.png | Bin 0 -> 5073 bytes public/favicon.ico | Bin 0 -> 1150 bytes public/manifest.json | 47 + public/ms-icon-144x144.png | Bin 0 -> 7286 bytes public/ms-icon-150x150.png | Bin 0 -> 7653 bytes public/ms-icon-310x310.png | Bin 0 -> 19531 bytes public/ms-icon-70x70.png | Bin 0 -> 3747 bytes types/global.d.ts | 1 + utils/Tools.ts | 10 + yarn.lock | 1573 ++++++++++++++++++++++++++++- 38 files changed, 1711 insertions(+), 69 deletions(-) create mode 100644 pages/_offline.tsx create mode 100644 public/android-icon-144x144.png create mode 100644 public/android-icon-192x192.png create mode 100644 public/android-icon-36x36.png create mode 100644 public/android-icon-48x48.png create mode 100644 public/android-icon-72x72.png create mode 100644 public/android-icon-96x96.png create mode 100644 public/apple-icon-114x114.png create mode 100644 public/apple-icon-120x120.png create mode 100644 public/apple-icon-144x144.png create mode 100644 public/apple-icon-152x152.png create mode 100644 public/apple-icon-180x180.png create mode 100644 public/apple-icon-57x57.png create mode 100644 public/apple-icon-60x60.png create mode 100644 public/apple-icon-72x72.png create mode 100644 public/apple-icon-76x76.png create mode 100644 public/apple-icon-precomposed.png create mode 100644 public/apple-icon.png create mode 100644 public/browserconfig.xml create mode 100644 public/favicon-16x16.png create mode 100644 public/favicon-32x32.png create mode 100644 public/favicon-96x96.png create mode 100644 public/favicon.ico create mode 100644 public/manifest.json create mode 100644 public/ms-icon-144x144.png create mode 100644 public/ms-icon-150x150.png create mode 100644 public/ms-icon-310x310.png create mode 100644 public/ms-icon-70x70.png diff --git a/.gitignore b/.gitignore index 7140179..b0234c4 100644 --- a/.gitignore +++ b/.gitignore @@ -41,8 +41,17 @@ yarn-error.log* # Prevent commiting lock file. package-lock.json -secret.json - # sub module +api-docs/ -api-docs/ \ No newline at end of file +# next-pwa +public/precache.*.*.js +public/sw.js +public/workbox-*.js +public/worker-*.js +public/fallback-*.js +public/precache.*.*.js.map +public/sw.js.map +public/workbox-*.js.map +public/worker-*.js.map +public/fallback-*.js \ No newline at end of file diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 1b14901..65fb104 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -11,7 +11,7 @@ import { User, UserCache } from '@types' import DiscordAvatar from '@components/DiscordAvatar' import Fetch from '@utils/Fetch' -const Navbar = ({ token }:{ token: string }): JSX.Element => { +const Navbar = ({ token, pwa }:{ token: string, pwa: boolean }): JSX.Element => { const [userCache, setUserCache] = useState() const [navbarOpen, setNavbarOpen] = useState(false) const [dropdownOpen, setDropdownOpen] = useState(false) @@ -124,18 +124,11 @@ const Navbar = ({ token }:{ token: string }): JSX.Element => { : - { - if(!(logged)) { - localStorage.redirectTo = window.location.href - setNavbarOpen(false) - redirectTo(router, 'login') - } - }} onClick={()=> { - if(!(logged)) { - localStorage.redirectTo = window.location.href - setNavbarOpen(false) - redirectTo(router, 'login') - } + { + localStorage.redirectTo = window.location.href + setNavbarOpen(false) + if(pwa) window.open('/api/auth/discord') + else redirectTo(router, 'login') }} className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer outline-none'> 로그인 @@ -204,15 +197,15 @@ const Navbar = ({ token }:{ token: string }): JSX.Element => { 로그아웃 - : - { - localStorage.redirectTo = window.location.href - setNavbarOpen(false) - }} className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> - - 로그인 - - + : { + localStorage.redirectTo = window.location.href + setNavbarOpen(false) + if(pwa) window.open('/api/auth/discord') + else redirectTo(router, 'login') + }} className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> + + 로그인 + } diff --git a/next.config.js b/next.config.js index 7583649..b76e73e 100644 --- a/next.config.js +++ b/next.config.js @@ -1,8 +1,12 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const { withSentryConfig } = require('@sentry/nextjs') +const withPWA = require('next-pwa') const VERSION = require('./package.json').version -module.exports = withSentryConfig({ +module.exports = withSentryConfig(withPWA({ + pwa: { + dest: 'public' + }, env: { NEXT_PUBLIC_RELEASE_VERSION: VERSION, SENTRY_SKIP_AUTO_RELEASE: true @@ -13,4 +17,4 @@ module.exports = withSentryConfig({ experimental: { scrollRestoration: true } -}, {}) \ No newline at end of file +}), {}) \ No newline at end of file diff --git a/package.json b/package.json index 4f46f8f..fee810c 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "mysql": "2.18.1", "next": "10.2.0", "next-connect": "0.10.1", + "next-pwa": "5.2.21", "next-session": "3.4.0", "node-emoji": "1.10.0", "nprogress": "0.2.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index caae990..87ef62c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,7 +7,7 @@ import { GlobalHotKeys } from 'react-hotkeys' import NProgress from 'nprogress' import Logger from '@utils/Logger' -import { parseCookie, systemTheme } from '@utils/Tools' +import { handlePWA, parseCookie, systemTheme } from '@utils/Tools' import { shortcutKeyMap } from '@utils/Constants' import { Theme } from '@types' @@ -34,6 +34,7 @@ Router.events.on('routeChangeError', NProgress.done) const KoreanbotsApp = ({ Component, pageProps, err, cookie }: KoreanbotsProps): JSX.Element => { const [ shortcutModal, setShortcutModal ] = useState(false) const [ theme, setTheme ] = useState('system') + const [ standalone, setStandalone ] = useState(false) const router = useRouter() useEffect(() => { @@ -50,24 +51,17 @@ const KoreanbotsApp = ({ Component, pageProps, err, cookie }: KoreanbotsProps): setTheme(systemTheme()) } else setTheme(localStorage.theme) + setStandalone(handlePWA()) }, []) return
- + 한국 디스코드봇 리스트 - - - - - - - - - +
- +
{ !(router.pathname.startsWith('/developers')) &&