From f1e520b2c364692cec4f268aadb332ccfde001f4 Mon Sep 17 00:00:00 2001 From: jimmy-guzman Date: Sun, 23 Jun 2024 15:35:44 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20PWA=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .knip.json | 2 +- README.md | 1 + index.html | 1 - package.json | 2 ++ public/favicon.ico | Bin 15406 -> 0 bytes public/logo.svg | 34 ++++++++++++++++++++++++++++++++++ pwa-assets.config.ts | 12 ++++++++++++ src/pages/home.tsx | 6 +++++- vite.config.ts | 41 +++++++++++++++++++++++++++++++++++++++++ 9 files changed, 96 insertions(+), 3 deletions(-) delete mode 100644 public/favicon.ico create mode 100644 public/logo.svg create mode 100644 pwa-assets.config.ts diff --git a/.knip.json b/.knip.json index 979bd08..110c4d3 100644 --- a/.knip.json +++ b/.knip.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/knip@5/schema.json", - "ignore": ["src/route-tree.gen.ts"], + "ignore": ["src/route-tree.gen.ts", "pwa-assets.config.ts"], "ignoreDependencies": ["gitzy", "@iconify-json/*"], "eslint": { "entry": ["eslint.config.ts"] diff --git a/README.md b/README.md index 8737f38..b888bfc 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ - 🍞 [bun][bun] for a fast runtime and package manager. - ⚡️ [vite][vite] for instant server start and lighting fast HMR. +- ✨ [Vite PWA](https://vite-pwa-org.netlify.app) for PWAs with very little configuration. - 🏷️ [TypeScript][TypeScript] for a less frustrating & consistent experience. - 🏝️ [TanStack Router][TanStack Router] for a fully type-safe React router. - 🏝️ [TanStack Query][TanStack Query] for asynchronous state management. diff --git a/index.html b/index.html index 0b92822..5d5693a 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - *1rl09O9(AQK~RK6R^a{5xnI6-YMP6?vcK~@H+SaVd+vGfx%HIz z`25c2_dbmp`B2`%XTTqPe8PNud|I?ne)~V@D zm@@GVm~@GVGUnqiT^7L*m5(TC81Yf)7cck-C54-C>iB+KI9HC-r3dkCdf&@xx!F9+LTX#HHZNe)baEQP?(roYyPX;k@z z>w3T@&4I=CCalI8uu6F_>hvVzp`x7YM1AB(uo~uy?@Xi8+oaiud3*)T6MG@H?RvyZ zr3jO{AU0$tdS#u*p!Y5#KCKeQPj4b}`1hioX&m&#d-O{%zmo>*s4Un!FC+RV1bu2+ z1;!o$#vBHoD*#en`>u+9jthO#)Hl#&(Gb`s_klfawniTteG(%M0MG6Q27dAn{B_em z@p#8mVhk$(2){gZ8b2AS%d_x!?iASk55gGq7^2#&N5t?;=)MUUvhGJj2NY|GX%zZ^ z9E0yD7@Bsj&?`u7)ZZQw$ z<%~y`{4#$*o{G%f&r#yZ7*bPxelJS_7ykYH11>Ocz22|!znyoLESPuIUEy6u?lQa0 zznS;1iT@kpM`P3aHR4|3yQMy9&im646{Z(*H0r|X9GV4t$SO#d1@Mpg1XkTj`n?in zDO;1Z^Z1|co~qq7>K#*C{>_td;S-x^Kr?6l_`!^N}!en=}u4YY`gsU5UF#?8n`&96^JDU*O)SS0OC&AR?sx)$%_>cYML-71*<7rMRPc zTo=xrz{z9#QF;29#{bl@eS$Z?1ynhy{KMrBa98h@xaZYl+P!|?giC1n!e-o`wx&k@ z+!wz$M8EXrQ2X|lpF4TPrC#M9WXr={Sw$Le^=)zg#2@g-7xvc5-;-B4N{e?1T%L6& zagN?1-<&Oj%3mMzF_@Rex9V-fzZ>OV_R9bH0sURZ;><^tb@ASf9&LDTN{b7`+icq8 ziORgT`^+nE=KtsH?}&dtkNLNm(r~cgxJUntgV);eLpw$8j7$B_Z?n^-rRe%tj_5ax z?(pWBjyIhuhyQu=2ZUQoAqS*+@HhB%Lqy9B=$5b*-P_hb*#kF1?>kcTt8Xy@hNc_Q z?5U#;InaFg*@|FjyaCLM&wS_oX9(!5y&;_66ZQFSc=SclufcbW)>rH3LOh&Nj@Gt9 zt&DlO^OtpjF!*Le-((@B#q~~xM`-V>@0(yV^v$Px>0_bb!Mr^A*ZOu4G`I7vbe2E& zYt%*2+RPB^lh>$g${<}O#sx#Tl@Ncy(=giBK ze?QSC&b%AuH!}op)*GVx<+;#CNy;AMyH)f_;~rgfQ|Jo_|&FXMKj#s6#-XZ9w8`!1TdS zM61X}l|haC2akh!avCg?d%EB-=k|v^bw0`8ZT!T)$DprW_^UWLAG!SodJR8MI;dl9 z)Wkor#|k7b8H$u;!_aQdKo<w^mw4A0HF zB-%5LdkP~S&i9Y1e;E9q((VUS(C273auQM&j}SPLW{uYB46O$W?E2<2l(MFDpJknc z{K*a2v(8}n#%oA@{;1a8+x^A7#285b(Dbhm1N2SjyU-b0tV5(_5u#!jDCJF-k^XHK zw1zh6RJPvHzR3p1cPD+^gFo?*i5Kg9%$s#UP5)%QJg_|s0UbOOmCKUyzGv(r1zSAZ zd81X!L?4nuTcv+8fByU@^=}2i|Ifc{Cm|E9Pj5blOH>xlVXN-*1{bSSxh8aTxwh`u=zaHFG`^h1K%mtDr08+vMe{CcRTw8eo6bFyZrvu--MMg6ZXi+ruWd9 zKl2Wfy?Rf~WbBcVk-y=0?5lruUDTak^82rpzcoU}kj#Pj=);-#Y~F{rEqyxoL*%~p zD%!EYeJHnKfiO>4wix+bTZ^&$k!( zM;IkcczrC{y&U#H)fRL+a`p|bTDA}|)`+Tg5=u01Kro6 zb=w_?HXIRkaZ(A{c*hW(_RjNIKM8g-wrp7E)z30v-=JsX4_Q?2jYOR>|L zr1pe=r@+@FX(QQ{SD?YOU*fJIJJB$63mWuaEynXu>Uv@0j*-41{5ECoysRH*{A|14 zL-uC2WACFeoIO$OGB1_1#@N2eiN~s98UReZdzAo{A`;)T(ntWU>rveY}fn&jD!8=XHS&i zZ24iAas~f!?BDr?pgpp0E6$S*S;fw|GyYKPda+I#zPQB&yJB1Y0r$QBH5v~3ipIAB zZQ>W#8Na|m_TA#WU!iFGTCrA~G1T_G^3)NrhIpLrZJqJAY)@-u;Fq{}e1#@=)h?{& z_f7bYVhDDib>fnG;b*?Q&MQwJ^^h^wF*degt9#QOXLY}w@dw4{12-&*bYV>er{dg*$P^{QfV&P$7T6ZREipQ?T~=X&Sw=V&kRIm`1@R#J*C9a9Ac zV@Lu__T9qwqpp+c@+LzsA|h-(jFP2V{6;AX&-GkFJY3HUXDsS>-WQBp@!fguQMH}O zX`gWWbEi&V%J?Eggev!!92AEz-&N2*b_x%U|GwIJ_}`rGV2&t7c&o)^hM)xE*Qp3Q!Mcfs9U(}QopIwNDOj*z1w|Y&qb+5Cy>RvU-KaB1~E9q@9 z(t5;%Y;YtgAJMk?uvGpZ!Gx$Us~`F zw6~UvdiFm@jK8Y+$yC2^Sl)G#o2!3Z;HS06d!{b<<4gx&8cRl=qw}NcXh=d({VLn zf7(U%LjL0iQtZJOh>Iw4nTML>pW3qm*#$Q|e9`Qa9lV!feDi_m6+pxi8q0!PFlS!$ zzJBU~Kf2Eh5A2LzqzS!gT@3^KtvRM4UU#g<_0!&5j;wXpJ@B(nS4|@iQoJ$69CuxP z6P_rW$irHH}ri9`Y zw*7?uZ_)ZPy6)ln;Ey*KqW#2dq%0jKe8rtU%S80F-k#%_kS<~?qIKlMtvWy1=BLU` z%{$u5F}i9GFm7HuBPpKZm16qtG!M>W;w`iTlWvqgzVVT_|m&KzgnVJ*c4UIKag9_)bPu#a$)m3fOx8ljVwp_+t-x4 zbrH~m)(o$Gbqr5sxW+KKV^)7NraI}r%}B>2UDMQJGh({UMe^VO>N$pG!x7)>V-c5P zY_^4B7rzp5ed_+zw;V@0E!kSB&JB9eN$>#EQgyjpaF?zEqflwRy;Tbpj}MgMj2pHiHp{*lQZ{TbV=fvq#yB{K8S zVcc8j^v-y+&wksbozM%b@N+DVM+{8DJ{U4iz>v5fGU>RF_dJ9SDf?k;Nph_Xw^~ow zs$w}c|0(-`9sX<5fBl~%eRP@EKKXxU^^?H=0U#^;-T(jq diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..6aafa34 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts new file mode 100644 index 0000000..fdbd9c5 --- /dev/null +++ b/pwa-assets.config.ts @@ -0,0 +1,12 @@ +import { + defineConfig, + minimal2023Preset as preset, +} from "@vite-pwa/assets-generator/config"; + +export default defineConfig({ + headLinkOptions: { + preset: "2023", + }, + images: ["public/logo.svg"], + preset, +}); diff --git a/src/pages/home.tsx b/src/pages/home.tsx index a04d942..50618f6 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,5 +1,8 @@ import { ExtLink } from "@/components/ext-link"; +// eslint-disable-next-line import-x/no-absolute-path -- https://vite.dev/guide/assets#the-public-directory +import logo from "/logo.svg"; + export const Home = () => { return (
@@ -17,7 +20,8 @@ export const Home = () => { React Starter

- 🍱 Another React Starter using{" "} + logo{" "} + Another React Starter using{" "} Bun, Vite , TypeScript,{" "} tailwindcss and{" "} diff --git a/vite.config.ts b/vite.config.ts index a3dfe24..e143051 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,7 @@ import { TanStackRouterVite as tanStackRouterVite } from "@tanstack/router-vite-plugin"; import react from "@vitejs/plugin-react-swc"; import { defineConfig, loadEnv } from "vite"; +import { VitePWA } from "vite-plugin-pwa"; import tsconfigPaths from "vite-tsconfig-paths"; import { configDefaults } from "vitest/config"; @@ -18,6 +19,46 @@ export default defineConfig(({ mode }) => { semicolons: true, }), tsconfigPaths(), + VitePWA({ + devOptions: { + type: "module", + }, + manifest: { + icons: [ + { + sizes: "64x64", + src: "pwa-64x64.png", + type: "image/png", + }, + { + sizes: "192x192", + src: "pwa-192x192.png", + type: "image/png", + }, + { + purpose: "any", + sizes: "512x512", + src: "pwa-512x512.png", + type: "image/png", + }, + { + purpose: "maskable", + sizes: "512x512", + src: "maskable-icon-512x512.png", + type: "image/png", + }, + ], + name: "React Starter", + short_name: "React Starter", + theme_color: "#ffffff", + }, + pwaAssets: { + config: true, + disabled: false, + overrideManifestIcons: true, + }, + registerType: "autoUpdate", + }), ], server: { port: Number(PORT),