Từ một ứng dụng web phụ thuộc vào mạng đến một ứng dụng web độc lập với mạng

Tôi là một nhà phát triển web stack đầy đủ và hiện tại tôi chủ yếu xây dựng ứng dụng một trang bằng cách sử dụng khung công tác mặt trước như khung góc cạnh và phụ trợ như khởi động mùa xuân.

Thông thường, thiết kế ứng dụng web của tôi (giả sử đó là CRUD) như sau: Giả sử tôi đang ở trang cập nhật và tôi cập nhật một thực thể. Sau đó, một yêu cầu được đưa ra cho phụ trợ cập nhật thực thể trong cơ sở dữ liệu. Khi phản hồi phụ trợ nói rằng mọi thứ đều ổn, thực thể của bạn đã được cập nhật (mã trạng thái 200) Tôi đi qua trang tiếp theo là trang đọc với một url như entityName/{id}nơi tôi chuyển id của thực thể sang trang tiếp theo thông qua url. Sau đó, trên trang đọc tôi nhận được id đó, đưa ra yêu cầu đến phần phụ trợ, truy xuất dữ liệu thực thể và hiển thị chúng.

Vấn đề phát sinh khi người dùng mất kết nối với internet, do đó không thể thực hiện yêu cầu đến phụ trợ và do đó dữ liệu không thể được hiển thị cho ui hoặc được cập nhật.

Một thiết kế khác sẽ là cái này: Tôi đang ở trang cập nhật và tôi cập nhật thực thể của mình. Một yêu cầu được đưa ra cho phần phụ trợ nhưng trạng thái đang được giữ ở phía máy khách. Vì vậy, giả sử mất kết nối, tôi vẫn có thể truy cập trang đọc và hiển thị thực thể được cập nhật. Ngoài ra, vì trạng thái / dữ liệu được giữ ở phía máy khách, tôi không phải thực hiện yêu cầu thứ hai đó cho phụ trợ để lấy thực thể từ id vì thực thể sống ở phía máy khách. Trong thời gian người dùng dành cho ứng dụng, kết nối trở lại và yêu cầu cập nhật được gửi đến máy chủ để đồng bộ hóa dữ liệu trong db và ở phía máy khách.

Đối với tôi, dường như cách tiếp cận thứ hai sẽ thuận tiện hơn cho người dùng vì ui không phụ thuộc nhiều vào yêu cầu được đưa ra cho phần phụ trợ để hiển thị thông tin của nó làm cho nó trôi chảy và dễ chịu hơn.

Tôi rất biết rằng cách tiếp cận đầu tiên được sử dụng. Tôi phát triển như thế này và vì vậy câu hỏi của tôi là: Có thể đi từ thiết kế thứ nhất sang thiết kế thứ hai và nếu có với công nghệ gì?

Những gì tôi sẽ làm để thực hiện thiết kế thứ hai sẽ là chia sẻ dữ liệu giữa các thành phần bằng cách sử dụng các dịch vụ (khi thực hiện với góc). Theo cách này, trạng thái của ứng dụng có thể được giữ ở phía máy khách. Nhưng có lẽ có một cách tốt hơn. Tôi đã nghe nói về thư viện NgRx để quản lý trạng thái của một ứng dụng. Đây có phải là cách đúng đắn để quản lý trạng thái của ứng dụng về phía máy khách?

Ngoài ra, có một vấn đề thứ hai là đảm bảo rằng các yêu cầu không thể được thực hiện khi mất kết nối được thực hiện khi kết nối trở lại. Và vì vậy tôi tự hỏi: Có thể sử dụng một công cụ cho phép xếp hàng các yêu cầu và chạy lại chúng khi kết nối trở lại? Tôi có khái niệm về các nhân viên dịch vụ và ứng dụng web tiến bộ nhưng chỉ có khái niệm (như tôi biết rằng một nhân viên dịch vụ có thể được sử dụng để lưu trữ dữ liệu trao đổi với máy chủ) và tôi tự hỏi liệu đó có phải là cách giải quyết vấn đề này không?

Tôi đang chờ ý kiến ​​của bạn về bài viết của tôi. Tôi hy vọng nó không quá dài. Cảm ơn trước.

Ngoài ra, vì trạng thái / dữ liệu được giữ ở phía máy khách, tôi không phải thực hiện yêu cầu thứ hai đó đến phần phụ trợ để lấy thực thể từ id vì thực thể sống ở phía máy khách

Điều này phụ thuộc hoàn toàn vào mức độ bạn có thể tin tưởng vào BE. Nếu xảy ra lỗi vì bất kỳ lý do gì (mã thông báo đã hết hạn / đăng xuất? Dữ liệu được cập nhật trên máy khách khác?), Cách tiếp cận này có thể trở nên phức tạp hơn đáng kể.

Có thể đi từ thiết kế thứ nhất sang thiết kế thứ hai và nếu có với công nghệ gì?

Có khả năng bạn có thể biến ứng dụng của mình thành PWA và sử dụng nhân viên dịch vụ . Tôi tìm thấy một hướng dẫn tốt cho việc này ở đây . Trong trường hợp blog bị sập, nó sẽ chuyển qua bộ đệm của tài sản và phông chữ trong ngsw-config.jsonđó, sau đó nó sẽ chạm vào bộ đệm API. Đây là kết quả cuối cùng có thể trông như thế nào:

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

"Đối với chiến lược đầu tiên trên mạng, đó là sự mới mẻ, cho bộ nhớ cache đầu tiên - hiệu suất"

Đây có phải là cách đúng đắn để quản lý trạng thái của ứng dụng về phía máy khách?

Bạn có thể sử dụng NgRx để lưu trữ dữ liệu ứng dụng của mình, nhưng bạn sẽ cần đảm bảo rằng bộ đệm luôn được cập nhật. Lý tưởng nhất là bạn sử dụng một số websocket để phát hiện các thay đổi BE, nhưng bạn cũng có khả năng thực hiện bỏ phiếu.

Tuy nhiên, nếu tất cả những gì bạn cần là chức năng ngoại tuyến, PWAs sẽ cảm thấy như vậy.

Có thể sử dụng một công cụ cho phép xếp hàng các yêu cầu và chạy lại chúng khi kết nối trở lại?

Tính năng này được gọi là đồng bộ hóa nền và là một tính năng của nhân viên phục vụ. Điều đó đang được nói, tôi tìm thấy vấn đề mở này trên nó. Bạn có thể thử điều này nhưng nó cảm thấy như một hack. Nếu nó tùy thuộc vào tôi, tôi sẽ tạo ra một loạt các vật thể quan sát được gọi khi kết nối trở lại cho đến khi có sự hỗ trợ tốt hơn cho việc này