feat: PWA support!

This commit is contained in:
Anthony Fu 2020-10-28 18:05:02 +08:00
parent c01ae61223
commit 56b2726437
8 changed files with 1661 additions and 5 deletions

View File

@ -20,7 +20,9 @@
- 🗂 [File based routing](./src/pages) - 🗂 [File based routing](./src/pages)
- 📲 [Components auto importing](./src/components) - 📦 [Components auto importing](./src/components)
- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
- 🎨 TailwindCSS with dark mode out-of-box - 🎨 TailwindCSS with dark mode out-of-box
@ -30,7 +32,7 @@
- 🦾 TypeScript, of course - 🦾 TypeScript, of course
- ☁️ Deploy on Netlify, zero config - ☁️ Deploy on Netlify, zero-config
<br> <br>
@ -50,6 +52,7 @@
- [Vue Router](https://github.com/vuejs/vue-router) - [Vue Router](https://github.com/vuejs/vue-router)
- [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie) - file system based routing - [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie) - file system based routing
- [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import - [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import
- [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
- [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization - [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs

View File

@ -4,6 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">
<title>Vitesse</title> <title>Vitesse</title>
</head> </head>
<body> <body>

View File

@ -15,18 +15,19 @@
}, },
"devDependencies": { "devDependencies": {
"@antfu/eslint-config-vue": "^0.4.3", "@antfu/eslint-config-vue": "^0.4.3",
"@iconify/json": "^1.1.247", "@iconify/json": "^1.1.248",
"@purge-icons/generated": "^0.4.1", "@purge-icons/generated": "^0.4.1",
"@typescript-eslint/eslint-plugin": "^4.6.0", "@typescript-eslint/eslint-plugin": "^4.6.0",
"@vue/compiler-sfc": "^3.0.2", "@vue/compiler-sfc": "^3.0.2",
"@vuedx/typescript-plugin-vue": "^0.2.3", "@vuedx/typescript-plugin-vue": "^0.2.3",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"eslint": "^7.12.0", "eslint": "^7.12.1",
"tailwindcss": "^1.9.6", "tailwindcss": "^1.9.6",
"typescript": "^4.0.5", "typescript": "^4.0.5",
"vite": "^1.0.0-rc.8", "vite": "^1.0.0-rc.8",
"vite-plugin-components": "^0.2.14", "vite-plugin-components": "^0.2.14",
"vite-plugin-purge-icons": "^0.4.4", "vite-plugin-purge-icons": "^0.4.4",
"vite-plugin-pwa": "^0.1.3",
"vite-plugin-voie": "^0.4.0", "vite-plugin-voie": "^0.4.0",
"voie-pages": "^0.4.0" "voie-pages": "^0.4.0"
}, },

File diff suppressed because it is too large Load Diff

BIN
public/pwa-192x192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/pwa-512x512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2916 6015 c-93 -57 -173 -108 -178 -113 -6 -6 7 -36 33 -78 23 -38
86 -141 139 -229 54 -88 135 -221 180 -295 46 -74 94 -155 108 -180 14 -25 29
-52 35 -60 7 -12 -9 -45 -62 -130 -39 -63 -85 -140 -103 -170 -18 -30 -117
-194 -222 -365 -104 -170 -199 -326 -210 -346 -12 -19 -61 -102 -111 -183 -49
-81 -101 -166 -115 -189 -14 -23 -39 -64 -55 -90 -17 -27 -77 -126 -134 -220
-57 -95 -127 -210 -156 -257 -194 -315 -325 -533 -325 -541 0 -5 -4 -9 -10 -9
-5 0 -10 -4 -10 -9 0 -5 -55 -98 -121 -207 -247 -404 -403 -660 -416 -684 -8
-14 -58 -97 -112 -185 l-98 -160 -189 -2 c-104 -1 -225 -2 -269 -2 l-80 -1 1
-210 c0 -116 4 -213 8 -218 11 -11 6107 -9 6114 2 8 13 8 406 0 419 -4 7 -88
10 -265 9 l-259 -2 -50 77 c-27 43 -54 87 -60 98 -6 11 -62 103 -124 205 -62
102 -120 197 -129 212 -9 16 -85 142 -170 280 -85 139 -160 262 -165 273 -6
11 -13 22 -16 25 -3 3 -30 46 -59 95 -30 50 -102 169 -161 265 -59 96 -240
393 -402 660 -163 267 -371 609 -463 760 -92 151 -194 318 -225 370 -31 52
-101 167 -155 255 l-97 160 27 50 c16 27 32 55 36 61 5 5 38 59 74 120 36 60
69 116 74 124 5 8 75 122 155 253 81 131 144 242 141 247 -4 7 -114 76 -183
115 -10 6 -52 32 -95 58 -42 27 -81 46 -87 42 -8 -5 -94 -140 -140 -219 -19
-33 -221 -365 -246 -404 -15 -22 -18 -18 -111 135 -52 87 -123 203 -157 258
-67 108 -67 110 -111 184 -16 28 -34 51 -40 50 -5 0 -86 -47 -179 -104z m739
-1642 c319 -526 519 -854 637 -1046 43 -70 78 -130 78 -133 0 -2 5 -10 10 -17
6 -7 69 -109 140 -227 72 -118 134 -222 139 -230 5 -8 55 -89 111 -180 56 -91
105 -172 110 -180 9 -14 52 -84 270 -445 54 -88 135 -221 180 -295 46 -74 91
-148 100 -165 9 -16 31 -53 48 -81 18 -28 32 -54 32 -57 0 -3 -403 -6 -895 -5
l-895 0 0 81 c-1 45 -1 439 -1 875 l0 792 -37 1 c-57 1 -344 1 -374 0 l-27 -1
0 -832 c0 -458 0 -852 0 -875 l-1 -42 -895 1 c-492 0 -895 3 -895 5 0 9 115
198 122 201 5 2 8 7 8 12 0 5 23 46 51 92 28 46 78 128 112 183 33 55 70 116
82 135 12 19 132 215 265 435 133 220 266 438 295 485 65 105 206 338 220 362
6 10 172 284 370 608 198 325 387 635 420 690 33 55 62 100 65 100 3 0 73
-111 155 -247z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -3,6 +3,7 @@ import { UserConfig } from 'vite'
import Voie from 'vite-plugin-voie' import Voie from 'vite-plugin-voie'
import PurgeIcons from 'vite-plugin-purge-icons' import PurgeIcons from 'vite-plugin-purge-icons'
import ViteComponents from 'vite-plugin-components' import ViteComponents from 'vite-plugin-components'
import { VitePWA } from 'vite-plugin-pwa'
const alias = { const alias = {
'/~/': path.resolve(__dirname, 'src'), '/~/': path.resolve(__dirname, 'src'),
@ -26,6 +27,24 @@ const config: UserConfig = {
alias, alias,
}), }),
PurgeIcons(), PurgeIcons(),
VitePWA({
manifest: {
name: 'Vitesse',
short_name: 'Vitesse',
icons: [
{
src: '/pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
}),
], ],
} }