%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}
<head>
  ...
  <link rel="apple-touch-icon" href="/PROJEKTNAME/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/PROJEKTNAME/android-chrome-512x512.png" color="#FFFFFF">
  <link rel="icon" href="/favicon.ico">
  <meta name="theme-color" content="#ffffff">
  ... 
</head>
\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}
