”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 如何使用 Java 和 Spring Boot 构建 PWA:离线功能的最佳实践?

如何使用 Java 和 Spring Boot 构建 PWA:离线功能的最佳实践?

发布于2024-08-24
浏览:985

How to Build a PWA with Java and Spring Boot: Best Practices for Offline Functionality?

我目前正在开展一个劳动力管理项目,其中的关键要求之一是确保即使用户的设备暂时离线也可以访问某些功能(例如打卡)。虽然这种情况很少见,但我希望通过根据需要启用额外的离线功能来确保应用程序面向未来。

使用案例:

  • 后端: Java 与 Spring Boot
  • 前端: Thymeleaf 与 HTMX(或可能的 Vaadin Flow)
  • 关键要求: 能够缓存 POST 请求并在离线时导航到缓存页面。

我正在考虑的技术:

  1. 带有 Thymeleaf 和 HTMX 的 Spring Boot: 我的首选堆栈。我喜欢使用 TDD 进行构建,这种组合非常符合我的经验。我已经使用 service-worker.js 构建了一个小演示项目来缓存和重新发送 POST 请求。我不确定这是否是将来继续添加离线功能的最佳选择。

  2. Vaadin Flow: 我对 Vaadin Flow 很感兴趣,因为它非常注重完全用 Java 构建业务应用程序。但是,我担心它支持离线功能的能力,因为它会动态更新视图。据我了解,这将使得无法缓存整个页面以供离线查看。我知道 Hilla,但我需要在 Typescript 中创建所有视图,在我看来,这违背了使用 Vaadin 的目的。

  3. PWA Starter: 我研究了 PWA Starter,但它似乎专注于用 Angular 或 React 等语言创建单页应用程序 (SPA),这不符合我的偏好留在 Spring Boot 生态系统中。

  4. Quarkus 或 JHipster: 我也考虑过 Quarkus 和 JHipster,但 JHipster 通常使用 Angular 或 Vue 作为前端,看来我对此不是很感兴趣。我正在寻找以获得更接近 Java 全栈方法的东西。 Quarkus好像主打微服务?

问题:

  1. 在 Java 和 Spring Boot 应用程序中集成 PWA 功能(特别是离线功能)的最佳实践或框架/工具是什么?例如,也许有一个可以帮助服务人员的工具?
  2. 有没有办法通过离线缓存有效地使用 Vaadin Flow,或者我应该坚持使用 Thymeleaf 和 HTMX 以更好地控制 Service Worker?
  3. 您是否建议在 Spring Boot 和 Thymeleaf 设置中实现 Service Worker 的任何特定资源、库或模式?

考虑到我倾向于留在 Java 生态系统中并避免添加重要的新前端技术,我正在寻求有关如何解决此问题的建议。我确信还有很多问题我没有考虑过。任何见解或建议将不胜感激!

回顾我尝试过的事情

  • 我通过编写自己的 Service Worker 构建了一个演示。很好,但我不确定我能走多远。
  • 我尝试了 Vaadin Flow,但后来意识到任何离线功能都需要 Typescript 和 Hilla。
  • 我开始关注 FlutterFlow,但这似乎是针对用户设备离线的这种边缘情况做出的重大设计决策。
版本声明 本文转载于:https://dev.to/livenathan/how-to-build-a-pwa-with-java-and-spring-boot-best-practices-for-offline-functionality-4l3k?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何将MySQL数据库添加到Visual Studio 2012中的数据源对话框中?
    如何将MySQL数据库添加到Visual Studio 2012中的数据源对话框中?
    在Visual Studio 2012 尽管已安装了MySQL Connector v.6.5.4,但无法将MySQL数据库添加到实体框架的“ DataSource对话框”中。为了解决这一问题,至关重要的是要了解MySQL连接器v.6.5.5及以后的6.6.x版本将提供MySQL的官方Visual...
    编程 发布于2025-05-24
  • 如何将多种用户类型(学生,老师和管理员)重定向到Firebase应用中的各自活动?
    如何将多种用户类型(学生,老师和管理员)重定向到Firebase应用中的各自活动?
    Red: How to Redirect Multiple User Types to Respective ActivitiesUnderstanding the ProblemIn a Firebase-based voting app with three distinct user type...
    编程 发布于2025-05-24
  • 左连接为何在右表WHERE子句过滤时像内连接?
    左连接为何在右表WHERE子句过滤时像内连接?
    左JOIN CONUNDRUM:WITCHING小时在数据库Wizard的领域中变成内在的加入很有趣,当将c.foobar条件放置在上面的Where子句中时,据说左联接似乎会转换为内部连接。仅当满足A.Foo和C.Foobar标准时,才会返回结果。为什么要变形?关键在于其中的子句。当左联接的右侧值...
    编程 发布于2025-05-24
  • Java开发者如何保护数据库凭证免受反编译?
    Java开发者如何保护数据库凭证免受反编译?
    在java 在单独的配置文件保护数据库凭证的最有效方法中存储凭据是将它们存储在单独的配置文件中。该文件可以在运行时加载,从而使登录数据从编译的二进制文件中远离。使用prevereness class import java.util.prefs.preferences; 公共类示例{ 首选项...
    编程 发布于2025-05-24
  • 如何解决由于Android的内容安全策略而拒绝加载脚本... \”错误?
    如何解决由于Android的内容安全策略而拒绝加载脚本... \”错误?
    Unveiling the Mystery: Content Security Policy Directive ErrorsEncountering the enigmatic error "Refused to load the script..." when deployi...
    编程 发布于2025-05-24
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中检索一个随机项目,利用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-05-24
  • Python中何时用"try"而非"if"检测变量值?
    Python中何时用"try"而非"if"检测变量值?
    使用“ try“ vs.” if”来测试python 在python中的变量值,在某些情况下,您可能需要在处理之前检查变量是否具有值。在使用“如果”或“ try”构建体之间决定。“ if” constructs result = function() 如果结果: 对于结果: ...
    编程 发布于2025-05-24
  • Python读取CSV文件UnicodeDecodeError终极解决方法
    Python读取CSV文件UnicodeDecodeError终极解决方法
    在试图使用已内置的CSV模块读取Python中时,CSV文件中的Unicode Decode Decode Decode Decode decode Error读取,您可能会遇到错误的错误:无法解码字节 在位置2-3中:截断\ uxxxxxxxx逃脱当CSV文件包含特殊字符或Unicode的路径逃...
    编程 发布于2025-05-24
  • Go语言垃圾回收如何处理切片内存?
    Go语言垃圾回收如何处理切片内存?
    Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片时,了解垃圾收集行为至关重要,以避免潜在的内存泄...
    编程 发布于2025-05-24
  • 您可以使用CSS在Chrome和Firefox中染色控制台输出吗?
    您可以使用CSS在Chrome和Firefox中染色控制台输出吗?
    在javascript console 中显示颜色是可以使用chrome的控制台显示彩色文本,例如红色的redors,for for for for错误消息?回答是的,可以使用CSS将颜色添加到Chrome和Firefox中的控制台显示的消息(版本31或更高版本)中。要实现这一目标,请使用以下模...
    编程 发布于2025-05-24
  • 如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    postgresql:为每个唯一标识符提取最后一行,在Postgresql中,您可能需要遇到与在数据库中的每个不同标识相关的信息中提取信息的情况。考虑以下数据:[ 1 2014-02-01 kjkj 在数据集中的每个唯一ID中检索最后一行的信息,您可以在操作员上使用Postgres的有效效率: ...
    编程 发布于2025-05-24
  • 在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8表中将latin1字符转换为utf8 ,您遇到了一个问题,其中含义的字符(例如,“jáuòiñe”)在utf8 table tabled tablesset中被extect(例如,“致电。为了解决此问题,您正在尝试使用“ mb_convert_encoding”和“ iconv”转换受...
    编程 发布于2025-05-24
  • Go语言如何动态发现导出包类型?
    Go语言如何动态发现导出包类型?
    与反射软件包中的有限类型的发现能力相反,本文探讨了在运行时发现所有包装类型(尤其是struntime go import( “ FMT” “去/进口商” ) func main(){ pkg,err:= incorter.default()。导入(“ time”) ...
    编程 发布于2025-05-24
  • 您如何在Laravel Blade模板中定义变量?
    您如何在Laravel Blade模板中定义变量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配变量对于存储以后使用的数据至关重要。在使用“ {{}}”分配变量的同时,它可能并不总是最优雅的解决方案。幸运的是,Blade通过@php Directive提供了更优雅的方法: $ old_section =“...
    编程 发布于2025-05-24

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3