setup pwa 📲

This commit is contained in:
Guz
2022-08-08 11:01:27 -03:00
parent d83afbe994
commit a4fc460038
18 changed files with 95 additions and 12 deletions

2
.gitignore vendored
View File

@@ -37,3 +37,5 @@ next-env.d.ts
workbox-*.js
sw.js
.vercel

View File

@@ -9,4 +9,7 @@ module.exports = withPWA({
config.plugins.push(new WindiCSS());
return config;
},
pwa: {
dest: 'public',
}
});

View File

@@ -16,7 +16,7 @@
"@mantine/next": "^5.0.3",
"framer-motion": "^7.0.0",
"next": "latest",
"next-pwa": "^5.5.5",
"next-pwa": "5.5.4",
"react": "18.1.0",
"react-dom": "18.1.0",
"use-sound": "^4.0.1"

8
pnpm-lock.yaml generated
View File

@@ -15,7 +15,7 @@ specifiers:
eslint-config-prettier: ^8.5.0
framer-motion: ^7.0.0
next: latest
next-pwa: ^5.5.5
next-pwa: 5.5.4
postcss: ^8.4.14
prettier: ^2.7.1
react: 18.1.0
@@ -32,7 +32,7 @@ dependencies:
'@mantine/next': 5.0.3_aw5etqyqeg72n336fp4iawiv6e
framer-motion: 7.0.0_ef5jwxihqo6n7gxfmzogljlgcm
next: 12.2.4_oilcy444popke7cin4orzlm63e
next-pwa: 5.5.5_nuwb3lpqi7ag646uncz35yq74i
next-pwa: 5.5.4_nuwb3lpqi7ag646uncz35yq74i
react: 18.1.0
react-dom: 18.1.0_react@18.1.0
use-sound: 4.0.1_react@18.1.0
@@ -3986,8 +3986,8 @@ packages:
resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
dev: false
/next-pwa/5.5.5_nuwb3lpqi7ag646uncz35yq74i:
resolution: {integrity: sha512-EdheDzxr3V7piAeW2qAeH0uJW5iouSt7s/Fzz6xuvkmRPgbyqQeRY/3ZOWbhfgbPBuzGjdbBWzVurWJPH8bY5w==}
/next-pwa/5.5.4_nuwb3lpqi7ag646uncz35yq74i:
resolution: {integrity: sha512-EgB2MQWGR8oZDzY6US+/D0LOCUhPZYCgeqRVBYDxQWNi0N6XfQOoZPw2COIrg/eMt/rB0M+/mquhAQACs5v4Ag==}
peerDependencies:
next: '>=9.0.0'
dependencies:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

1
public/icons/android.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_11" data-name="Layer 11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><defs><style>.cls-1{fill:#f8f9fa;}.cls-2{fill:#212529;}</style></defs><rect class="cls-1" x="20" y="20" width="152" height="152" rx="12"/><path class="cls-2" d="M96,137.14a4.55,4.55,0,0,1-3.21-1.32L58.58,101.9a27.41,27.41,0,0,1,18.76-47,27.62,27.62,0,0,1,18.72,7A27.41,27.41,0,0,1,136.2,98.84a28.86,28.86,0,0,1-2.7,3.09l-.29.26L99.26,135.82A4.56,4.56,0,0,1,96,137.14ZM65,95.36l0,0,31,30.75,31.05-30.75.29-.27a17.3,17.3,0,0,0,1.53-1.78,18.27,18.27,0,0,0-29.22-22A4.55,4.55,0,0,1,96,73.21h0a4.54,4.54,0,0,1-3.65-1.84,19.05,19.05,0,0,0-1.92-2.19,18.41,18.41,0,0,0-13-5.18A18.27,18.27,0,0,0,65,95.36Z"/></svg>

After

Width:  |  Height:  |  Size: 702 B

BIN
public/icons/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

42
public/manifest.json Normal file
View File

@@ -0,0 +1,42 @@
{
"name": "Hello.Kei",
"short_name": "Hello.Kei",
"icons": [
{
"src": "/icons/android-ldpi.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icons/android-mdpi.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/android-hdpi.png",
"sizes": "288x288",
"type": "image/png"
},
{
"src": "/icons/android-xhdpi.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/android-xxhdpi.png",
"sizes": "576x576",
"type": "image/png"
},
{
"src": "/icons/android-xxxhdpi.png",
"sizes": "768x768",
"type": "image/png"
}
],
"theme_color": "#212529",
"background_color": "#212529",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}

View File

@@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because one or more lines are too long

View File

@@ -36,7 +36,7 @@ export default function App(props: AppProps) {
<title>Page title</title>
<meta
name='viewport'
content='minimum-scale=1, initial-scale=1, width=device-width'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/>
</Head>

View File

@@ -9,7 +9,46 @@ export default class _Document extends Document {
render() {
return (
<Html>
<Head />
<Head>
<meta name='application-name' content='Hello.Kei' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta
name='apple-mobile-web-app-status-bar-style'
content='default'
/>
<meta name='apple-mobile-web-app-title' content='Hello.Kei' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='theme-color' content='#212529' />
<link rel='shortcut icon' href='/icons/favicon.ico' />
<link
rel='icon'
type='image/png'
sizes='144x144'
href='/icons/android-ldpi.png'
/>
<link
rel='icon'
type='image/png'
sizes='192x192'
href='/icons/android-mdpi.png'
/>
<link
rel='icon'
type='image/png'
sizes='288x288'
href='/icons/android-hdpi.png'
/>
<link rel='apple-touch-icon' href='/icons/android-hdpi.png' />
<link rel='manifest' href='/manifest.json' />
<meta property='og:type' content='website' />
<meta property='og:title' content='Hello.Kei' />
<meta property='og:site_name' content='Hello.Kei' />
<meta property='og:url' content='https://hellokei.vercel.app' />
<meta
property='og:image'
content='https://hellokei.vercel.app/icons/android-hdpi.png'
/>
</Head>
<body>
<Main />
<NextScript />