De um aplicativo Web dependente da rede a um aplicativo Web independente da rede

Sou desenvolvedor web de pilha completa e atualmente estou construindo aplicativos de página única usando a estrutura de front-end, como a estrutura angular e de back-end, como a inicialização por mola.

Normalmente, o design do meu aplicativo da web (digamos que seja um CRUD) é o seguinte: Digamos que estou na página de atualização e atualizo uma entidade. Em seguida, é feita uma solicitação ao back-end que atualiza a entidade no banco de dados. Quando o back-end responde dizendo que está tudo bem, sua entidade foi atualizada (código de status 200), passo a página seguinte, que é a página de leitura com um URL comoentityName/{id} passo a onde passo o ID da entidade para a página seguinte através do URL. Em seguida, na página de leitura, obtenho esse ID, solicito ao back-end, recupero os dados da entidade e os mostro.

O problema surge quando o usuário perde a conectividade com a Internet, portanto, a solicitação para o back-end não pode ser feita e, consequentemente, os dados não podem ser exibidos na interface do usuário ou atualizados.

Um outro design seria este: estou na página de atualização e atualizo minha entidade. É feita uma solicitação ao back-end, mas também o estado está sendo mantido no lado do cliente. Então, digamos que a conectividade esteja perdida, ainda posso ir para a página de leitura e exibir a entidade atualizada. Além disso, como o estado / dados é mantido no lado do cliente, não preciso fazer a segunda solicitação ao back-end para obter a entidade a partir do ID, pois a entidade vive no lado do cliente. Durante o tempo que o usuário passou no aplicativo, a conectividade volta e a solicitação de atualização é feita ao servidor para sincronizar os dados no banco de dados e no lado do cliente.

Parece-me que a segunda abordagem é mais conveniente para o usuário, pois a interface do usuário não depende tanto da solicitação feita ao back-end para exibir suas informações, tornando-as mais fluentes e agradáveis.

Sei muito bem que a primeira abordagem está em uso. Eu me desenvolvo assim e, portanto, minha pergunta é: É possível ir do primeiro design ao segundo design e, se sim, com quais tecnologias?

O que eu faria para implementar o segundo design seria compartilhar dados entre componentes usando serviços (ao implementar com angular). Dessa forma, o estado do aplicativo pode ser mantido no lado do cliente. Mas talvez haja uma maneira melhor. Eu ouvi sobre a biblioteca NgRx para gerenciar o estado de um aplicativo. É o caminho certo a seguir para gerenciar o estado do aplicativo no lado do cliente?

Também existe um segundo problema: garantir que as solicitações que não puderam ser feitas quando a conectividade foi perdida sejam feitas quando a conectividade estiver de volta. E então eu me pergunto: é possível usar uma ferramenta que permita enfileirar as solicitações e executá-las novamente quando a conectividade estiver de volta? Tenho noção de trabalhadores progressivos de aplicativos e serviços da Web, mas apenas noção (como eu sei que um trabalhador de serviço pode ser usado para armazenar em cache os dados trocados com o servidor) e me pergunto se é uma maneira de resolver esse problema?

Estou aguardando seus comentários no meu post. Espero que não demore muito. Desde já, obrigado.

Além disso, como o estado / dados é mantido no lado do cliente, não preciso fazer a segunda solicitação ao back-end para obter a entidade do ID, pois a entidade vive no lado do cliente

Isso depende inteiramente de quanto você pode confiar no BE. Se ocorrer um erro por qualquer motivo (token expirado / desconectado? Dados atualizados em outro cliente?), Essa abordagem poderá se tornar significativamente mais complicada.

É possível ir do primeiro design ao segundo design e, se sim, com quais tecnologias?

Potencialmente, você pode tornar seu aplicativo um PWA e usar profissionais de serviço . Encontrei um bom guia para isso aqui . No caso de o blog ser desativado, ele passa pelo cache de ativos e fontes no e ngsw-config.json, em seguida, retoma o cache da API. Aqui está como o resultado final pode ser:

{
  "$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"
      }
    }
  ]
}

"Para a estratégia de rede em primeiro lugar, é a atualização, para o cache em primeiro lugar - desempenho"

É o caminho certo a seguir para gerenciar o estado do aplicativo no lado do cliente?

Você pode usar o NgRx para armazenar em cache os dados do aplicativo, mas precisará garantir que o cache esteja sempre atualizado. Idealmente, você usa um soquete da web para detectar alterações de BE, mas também pode fazer pesquisas.

No entanto, se tudo o que você precisa é de funcionalidade offline, os PWAs parecem o caminho a percorrer.

É possível usar uma ferramenta que permita enfileirar as solicitações e executá-las novamente quando a conectividade estiver de volta?

Esse recurso é chamado de sincronização em segundo plano e é um recurso dos trabalhadores do serviço. Dito isto, encontrei esta questão em aberto . Você pode tentar isso, mas parece um hack. Se dependesse de mim, eu criaria uma matriz de observáveis ​​que são chamados quando a conexão volta até que haja um melhor suporte pwa para isso