chore: improved pwa

This commit is contained in:
wonderlandpark 2021-05-17 15:19:50 +09:00
parent 3b5ffc44f8
commit a25f079fc0
9 changed files with 86 additions and 21 deletions

View File

@ -3,9 +3,9 @@ const { withSentryConfig } = require('@sentry/nextjs')
const withPWA = require('next-pwa')
const VERSION = require('./package.json').version
module.exports = withSentryConfig(withPWA({
const NextConfig = {
pwa: {
dest: 'public'
register: false
},
env: {
NEXT_PUBLIC_RELEASE_VERSION: VERSION,
@ -17,4 +17,5 @@ module.exports = withSentryConfig(withPWA({
experimental: {
scrollRestoration: true
}
}), {})
}
module.exports = withSentryConfig(withPWA(NextConfig))

View File

@ -8,7 +8,7 @@ import NProgress from 'nprogress'
import Logger from '@utils/Logger'
import { handlePWA, parseCookie, systemTheme } from '@utils/Tools'
import { shortcutKeyMap } from '@utils/Constants'
import { shortcutKeyMap, TITLE } from '@utils/Constants'
import { Theme } from '@types'
const Footer = dynamic(() => import('@components/Footer'))
@ -52,12 +52,16 @@ const KoreanbotsApp = ({ Component, pageProps, err, cookie }: KoreanbotsProps):
}
else setTheme(localStorage.theme)
setStandalone(handlePWA())
if('serviceWorker' in navigator) {
navigator.serviceWorker.register("/sw.js")
} else Logger.warn('[SW] Load Failed')
}, [])
return <div className={theme}>
<Head>
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
<title> </title>
<title>{TITLE}</title>
</Head>
<Navbar token={cookie.token} pwa={standalone} />
<div className='iu-is-the-best min-h-screen text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>

View File

@ -1,3 +1,4 @@
import { DESCRIPTION, THEME_COLOR, TITLE } from '@utils/Constants'
import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
@ -8,21 +9,62 @@ class MyDocument extends Document {
}
render() {
return (
<Html>
<Html lang='ko-KR'>
<Head>
{/* META */}
<meta charSet='utf-8' />
<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
<meta name='description' content='다양한 국내 디스코드봇들을 확인하고, 초대해보세요!' />
<meta name='og:title' content='한국 디스코드봇 리스트' />
<meta name='description' content={DESCRIPTION} />
<meta name='keywords' content='Korea, Korean, Discord, Bot, 디스코드봇, 한디리' />
<meta name='og:title' content={TITLE} />
<meta name='og:url' content='https://koreanbots.dev' />
<meta name='og:description' content='다양한 국내 디스코드봇들을 확인하고, 초대해보세요!' />
<meta name='og:description' content={DESCRIPTION} />
<meta name='og:image' content='/favicon.ico' />
<link rel='shortcut icon' href='/favicon.ico' />
{/* Android */}
<meta name='theme-color' content={THEME_COLOR} />
<meta name='mobile-web-app-capable' content='yes' />
{/* iOS */}
<meta name='apple-mobile-web-app-title' content='Application Title' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='default' />
{/* Windows */}
<meta name='msapplication-navbutton-color' content={THEME_COLOR} />
<meta name='msapplication-TileColor' content={THEME_COLOR} />
<meta name='msapplication-TileImage' content='/ms-icon-144x144.png' />
<meta name='msapplication-config' content='browserconfig.xml' />
{/* Pinned Sites */}
<meta name='application-name' content={TITLE} />
<meta name='msapplication-tooltip' content={DESCRIPTION} />
<meta name='msapplication-starturl' content='/' />
{/* Tap highlighting */}
<meta name='msapplication-tap-highlight' content='no' />
{/* UC Mobile Browser */}
<meta name='full-screen' content='yes' />
<meta name='browsermode' content='application' />
<meta name='nightmode' content='disable' />
<meta name='layoutmode' content='fitscreen' />
<meta name='imagemode' content='force' />
<meta name='screen-orientation' content='portrait' />
{/* LINK */}
<link rel='manifest' href='/manifest.json' />
<link rel='search' type='application/opensearchdescription+xml' title={TITLE} href='/opensearch.xml' />
<link
rel='stylesheet'
href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/solarized-dark.min.css'
/>
<link rel='search' type='application/opensearchdescription+xml' title='한국 디스코드봇 리스트' href='/opensearch.xml' />
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' />
<link rel='icon' type='image/png' sizes='96x96' href='/favicon-96x96.png' />
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png' />
{/* iOS */}
<link rel='apple-touch-icon' sizes='57x57' href='/apple-icon-57x57.png' />
<link rel='apple-touch-icon' sizes='60x60' href='/apple-icon-60x60.png' />
<link rel='apple-touch-icon' sizes='72x72' href='/apple-icon-72x72.png' />
@ -32,14 +74,17 @@ class MyDocument extends Document {
<link rel='apple-touch-icon' sizes='144x144' href='/apple-icon-144x144.png' />
<link rel='apple-touch-icon' sizes='152x152' href='/apple-icon-152x152.png' />
<link rel='apple-touch-icon' sizes='180x180' href='/apple-icon-180x180.png' />
<link rel='apple-touch-icon' sizes='256x256' href='/apple-icon-256x256.png' />
<link rel='apple-touch-icon' sizes='512x512' href='/apple-icon-512x512.png' />
{/* Android */}
<link rel='icon' type='image/png' sizes='192x192' href='/android-icon-192x192.png' />
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' />
<link rel='icon' type='image/png' sizes='96x96' href='/favicon-96x96.png' />
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png' />
<link rel='manifest' href='/manifest.json' />
<meta name='msapplication-TileColor' content='#3366FF' />
<meta name='msapplication-TileImage' content='/ms-icon-144x144.png' />
<meta name='theme-color' content='#3366FF' />
{/* Others */}
<link rel='shortcut icon' href='/favicon.ico' />
{/* SCRIPT */}
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'></script>
<script
data-ad-client='ca-pub-4856582423981759'

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -4,9 +4,12 @@
"lang": "ko-KR",
"description": "다양한 국내 디스코드봇들을 확인하고, 초대해보세요!",
"start_url": "/",
"scope": "/",
"background_color": "#3366FF",
"theme_color": "#3366FF",
"display": "standalone",
"orientation": "portrait",
"prefer_related_applications": true,
"icons": [
{
"src": "\/android-icon-36x36.png",
@ -43,6 +46,11 @@
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
},
{
"src": "\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}

View File

@ -2,6 +2,11 @@ import { Bot, ImageOptions, KoreanbotsImageOptions } from '@types'
import { KeyMap } from 'react-hotkeys'
import { formatNumber, makeImageURL } from './Tools'
// Website META DATA
export const TITLE = '한국 디스코드봇 리스트'
export const DESCRIPTION = '다양한 국내 디스코드 봇들을 확인하고, 초대해보세요!'
export const THEME_COLOR = '#3366FF'
export const VOTE_COOLDOWN = 12 * 60 * 60 * 1000
export const BUG_REPORTERS = ['345265069132742657', '260303569591205888']
export const Status = {

View File

@ -3,7 +3,8 @@ import { Readable } from 'stream'
import cookie from 'cookie'
import { BotFlags, ImageOptions, UserFlags } from '@types'
import { BASE_URLs, KoreanbotsEndPoints, Oauth } from './Constants'
import Logger from '@utils/Logger'
import { BASE_URLs, KoreanbotsEndPoints, Oauth } from '@utils/Constants'
import { NextRouter } from 'next/router'
export function handlePWA(): boolean {
@ -15,10 +16,11 @@ export function handlePWA(): boolean {
try {
window.ga('set', 'dimension1', displayMode)
} catch {
console.warn('GA Failed')
Logger.warn('[GA] Blocked.')
}
return displayMode === 'standalone'
}
export function formatNumber(value: number):string {
const suffixes = ['', '만', '억', '조','해']
const suffixNum = Math.floor((''+value).length/4)