Von einer netzwerkabhängigen Web-App zu einer netzwerkunabhängigen Web-App

Ich bin ein Full-Stack-Webentwickler und erstelle derzeit eine Single-Page-App mit einem Front-End-Framework wie Angular und einem Back-End-Framework wie Spring Boot.

Normalerweise sieht meine Web-App wie folgt aus (sagen wir, es ist eine CRUD): Angenommen, ich bin auf der Aktualisierungsseite und aktualisiere eine Entität. Anschließend wird eine Anforderung an das Backend gesendet, die die Entität in der Datenbank aktualisiert. Wenn das Backend antwortet, dass alles in Ordnung ist, wurde Ihre Entität aktualisiert (Statuscode 200). Ich gehe die nächste Seite durch, bei der es sich um die gelesene Seite mit einer URL handelt, z. B. entityName/{id}wo ich die ID der Entität über die URL an die nächste Seite weitergebe. Dann erhalte ich auf der gelesenen Seite diese ID, stelle eine Anfrage an das Backend, rufe die Entitätsdaten ab und zeige sie an.

Das Problem tritt auf, wenn der Benutzer die Verbindung zum Internet verloren hat, sodass die Anforderung an das Backend nicht erfolgen kann und folglich keine Daten für die Benutzeroberfläche angezeigt oder aktualisiert werden können.

Ein anderes Design wäre dieses: Ich bin auf der Aktualisierungsseite und aktualisiere meine Entität. Eine Anfrage wird an das Backend gestellt, aber auch der Status wird auf der Client-Seite beibehalten. Angenommen, die Konnektivität ist unterbrochen. Ich kann trotzdem zur Leseseite gehen und die aktualisierte Entität anzeigen. Da der Status / die Daten auf der Clientseite gespeichert sind, muss ich diese zweite Anforderung nicht an das Backend senden, um die Entität von der ID abzurufen, da die Entität auf der Clientseite lebt. Während der Zeit, die der Benutzer für die App aufgewendet hat, wird die Konnektivität wiederhergestellt und die Aktualisierungsanforderung an den Server gesendet, um die Daten in der Datenbank und auf der Clientseite zu synchronisieren.

Es scheint mir, dass der zweite Ansatz für den Benutzer bequemer ist, da sich die Benutzeroberfläche nicht so sehr auf die Anforderung an das Backend stützt, seine Informationen anzuzeigen, wodurch es fließender und angenehmer wird.

Ich weiß sehr gut, dass der erste Ansatz verwendet wird. Ich entwickle mich so und meine Frage lautet: Ist es möglich, vom ersten zum zweiten Entwurf zu wechseln und wenn ja, mit welchen Technologien?

Was ich tun würde, um das zweite Design zu implementieren, wäre, Daten mithilfe von Diensten komponentenübergreifend zu teilen (bei der Implementierung mit Angular). Auf diese Weise kann der Status der App auf der Client-Seite beibehalten werden. Aber vielleicht gibt es einen besseren Weg. Ich habe von der NgRx-Bibliothek gehört, um den Status einer Anwendung zu verwalten. Ist es der richtige Weg, um den Status der Anwendung auf der Clientseite zu verwalten?

Es gibt auch ein zweites Problem, das darin besteht, sicherzustellen, dass die Anforderungen, die nicht gestellt werden konnten, als die Konnektivität unterbrochen wurde, gestellt werden, wenn die Konnektivität wieder hergestellt ist. Und so frage ich mich: Ist es möglich, ein Tool zu verwenden, mit dem die Anforderungen in die Warteschlange gestellt und erneut ausgeführt werden können, wenn die Konnektivität wiederhergestellt ist? Ich habe eine Vorstellung von progressiven Web-App- und Service-Mitarbeitern, aber nur eine Vorstellung (wie ich weiß, dass ein Service-Mitarbeiter zum Zwischenspeichern von Daten verwendet werden kann, die mit dem Server ausgetauscht werden), und ich frage mich, ob dies eine Möglichkeit ist, dieses Problem zu lösen.

Ich warte auf Ihre Kommentare zu meinem Beitrag. Ich hoffe es war nicht zu lange. Danke im Voraus.

Da der Status / die Daten auf der Clientseite gespeichert sind, muss ich diese zweite Anforderung nicht an das Backend senden, um die Entität von der ID abzurufen, da die Entität auf der Clientseite lebt

Dies hängt ganz davon ab, wie sehr Sie dem BE vertrauen können. Wenn aus irgendeinem Grund ein Fehler auftritt (abgelaufenes Token / abgemeldet? Daten auf einem anderen Client aktualisiert?), Kann dieser Ansatz erheblich komplizierter werden.

Ist es möglich, vom ersten zum zweiten Entwurf zu wechseln und wenn ja, mit welchen Technologien?

Möglicherweise können Sie Ihre App zu einer PWA machen und Servicemitarbeiter einsetzen . Ich habe hier einen guten Leitfaden dafür gefunden . Wenn das Blog ausfällt, durchläuft es das Caching von Assets und Schriftarten in der ngsw-config.json, dann wird das API-Caching verbessert. So könnte das Endergebnis aussehen:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ],
  "dataGroups": [{
    "name": "api-freshness",
    "urls": [
      "/timeline"
    ],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 100,
      "maxAge": "3d",
      "timeout": "10s"
    }
  },
    {
      "name": "api-performance",
      "urls": [
        "/favorites"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]
}

"Für die Network-First-Strategie ist es Frische, für Cache-First - Leistung"

Ist es der richtige Weg, um den Status der Anwendung auf der Clientseite zu verwalten?

Sie können NgRx verwenden, um Ihre App-Daten zwischenzuspeichern. Sie müssen jedoch sicherstellen, dass der Cache immer auf dem neuesten Stand ist. Idealerweise verwenden Sie einen Websocket, um BE-Änderungen zu erkennen, aber Sie können möglicherweise auch Abfragen durchführen.

Wenn Sie jedoch nur Offline-Funktionen benötigen, sind PWAs genau das Richtige für Sie.

Ist es möglich, ein Tool zu verwenden, mit dem die Anforderungen in die Warteschlange gestellt und erneut ausgeführt werden können, wenn die Konnektivität wiederhergestellt ist?

Diese Funktion wird als Hintergrundsynchronisierung bezeichnet und ist eine Funktion von Servicemitarbeitern. That being said, ich diese offene Frage gefunden drauf. Sie könnten versuchen , diese aber es fühlt sich wie ein Hack. Wenn es nach mir ginge, würde ich eine Reihe von Observablen erstellen, die aufgerufen werden, wenn die Verbindung wiederhergestellt wird, bis dies besser unterstützt wird