%Schriftgröße, Layout, Papierformat, Art des Dokumentes \documentclass[10pt,oneside,a4paper]{scrartcl} %Einstellungen der Seitenränder \usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry} %neue Rechtschreibung \usepackage[ngerman]{babel} %Umlaute ermöglichen \usepackage[utf8]{inputenc} %Gesamtseitenzahl \usepackage{lastpage} % Kopf- und Fußzeile \usepackage[automark]{scrpage2} %Quellcode-Listings \usepackage{listings} %Hyperlinks \usepackage{hyperref} %Kopfzeile \ihead{Vite} \chead{} \ohead{http://kohnlehome.de/html/vite-plugin-pwa.pdf} \setheadsepline{0.5pt} %Fußzeile \setfootsepline{0.5pt} \ifoot{Franz Kohnle} \cfoot{Seite \thepage\ von \pageref{LastPage}} \ofoot{\today} \pagestyle{scrheadings} \begin{document} % Überschrift \begin{center} \LARGE % Schriftgröße \bfseries % Fettdruck \sffamily % Serifenlose Schrift PWA mit vite-plugin-pwa \end{center} \section{Icons erstellen} \subsection*{Icon-Dateien} \begin{itemize} \item android-chrome-192x192.png \item android-chrome-512x512.png (maskable) \item apple-touch-icon.png (180 x 180) \item favicon.ico \end{itemize} \subsection*{Tools} \begin{itemize} \item Icons erzeugen: \href{https://realfavicongenerator.net/}{realfavicongenerator.net} \item Maskable Icon testen: \href{https://maskable.app/}{maskable.app} \end{itemize} \section{index.html} \begin{verbatim}
... ... \end{verbatim} \section{Installation des Vite-Plugins} \begin{verbatim} npm i vite-plugin-pwa -D \end{verbatim} \newpage \section{vite.config.js} \begin{verbatim} import { VitePWA } from 'vite-plugin-pwa'; export default defineConfig({ plugins: [ ..., VitePWA({ registerType: 'autoUpdate', devOptions: { enabled: true }, includeAssets: ["**/*.{png}"], manifest: { name: 'PROJEKTNAME', start_url: "/PROJEKTNAME/", id: "/PROJEKTNAME/", short_name: 'PROJEKTNAME', description: 'Tolle Webapp', lang: 'de', theme_color: '#031c36', icons: [ { src: '/PROJEKTNAME/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' }, { src: '/PROJEKTNAME/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' }, { src: '/PROJEKTNAME/android-chrome-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' } ] } }) ], ... }) \end{verbatim} \end{document}