Schritte zur Einführung von PWA in ein Vue-Projekt

vue fügt @vue/pwa hinzu

importiere { register } von 'register-service-worker'

wenn (Prozess.Umgebung.NODE_ENV === 'Produktion') {
  registrieren(`${process.env.BASE_URL}service-worker.js`, {
    bereit () {
      konsole.log(
        'Die App wird von einem Service Worker aus dem Cache bereitgestellt.\n' +
        „Weitere Einzelheiten finden Sie unter https://goo.gl/AFskqB“
      )
    },
    registriert () {
      console.log('Service Worker wurde registriert.')
    },
    zwischengespeichert () {
      console.log('Der Inhalt wurde für die Offline-Verwendung zwischengespeichert.')
    },
    Update gefunden () {
      console.log('Neuer Inhalt wird heruntergeladen.')
    },
    aktualisiert () {
      console.log('Neuer Inhalt ist verfügbar; bitte aktualisieren.')
    },
    offline () {
      console.log('Keine Internetverbindung gefunden. App läuft im Offlinemodus.')
    },
    Fehler (Fehler) {
      console.error('Fehler bei der Service Worker-Registrierung:', Fehler)
    }
  })
}

modul.exporte = {
  pwa:
    Arbeitsboxoptionen: {
      skipWaiting: wahr,
      clientsClaim: wahr,
      importWorkboxFrom: "lokal",
      Importverzeichnis: "js",
      navigateFallback: '/',
      navigateFallbackBlacklist: [/\/api\//]
    }
  }
}

{
  "short_name": "Kurzname der Anwendung", // Wird zukünftig unter dem Symbol der mobilen Desktopanwendung angezeigt "name": "Vollständiger Name der Anwendung", // Wird zukünftig unter dem Symbol der Computer-Desktopanwendung angezeigt "icon": [
      {
          "Quelle": "./img/icons/android-chrome-192x192.png",
          "Größen": "192x192",
          "Typ": "Bild/PNG"
      },
      {
          "Quelle": "./img/icons/android-chrome-512x512.png",
          "Größen": "512x512",
          "Typ": "Bild/PNG"
      }
  ], // Desktopsymbole, ein Array, achte auf die Bildgröße und das Format "start_url": "index.html", // URL beim Start der Anwendung
  "Anzeige": "eigenständig",
  "Hintergrundfarbe": "#080403",
  "Themenfarbe": "#080403"
}

<meta name="Themenfarbe" Inhalt="#080403">
<link rel="manifest" href="manifest.json" rel="externes Nofollow" >