javascript - 将 PWA 支持添加到 JSF Web 应用程序

Question

我正在尝试评估是否可以将 Progressive Web App 支持添加到 JavaServerFaces Web 应用程序。我们的 JSF 应用程序多年来一直在发展， future 可能的需求可能是使应用程序的某些部分可供离线使用。除了 PWA 功能提供的其他不错的功能(通知、全屏 Web 应用程序、添加到主屏幕等)之外，我们主要对 PWA 与 service worker 和缓存一起提供的离线功能感兴趣。

我们的客户必须在有时无法连接互联网的地区工作。在这种情况下，理想情况下，他们应该能够访问该应用程序、对自己进行身份验证并导航到他们需要在现场使用的应用程序部分。在应用程序的这一部分，他们将操纵或创建新的数据集。如果我被正确告知，理论上可以使用 PWA service worker 来缓存数据，甚至可以存储新创建或更新的数据，以便稍后与服务器同步。是这样吗？

虽然支持 PWA 的想法看起来不错，但我严重怀疑是否有可能在 JSF 应用程序中实现特别是离线模式功能，因为所有应用程序逻辑基本上都在服务器端，客户端不会直接API 调用 GET/POST/PUT/etc(并因此缓存和同步)数据。

到目前为止，我的研究没有产生任何实质性成果(JSF 和 PWA)，这就是我发布这个问题的原因。如果 JSF 应用程序可以利用 PWA 技术，尤其是离线/缓存/同步功能，如果有人能指出我正确的方向或给我一个答案，那就太好了。

谢谢。

Answer 1

从 3.7 版开始，OmniFaces通过内置的 PWAResourceHandler 在一定程度上增加了 PWA 支持. showcase 中详细记录并演示了用法.

1. 首先创建一个扩展自 WebAppManifest 的类

   public class YourWebAppManifest extends WebAppManifest {
   }
   

2. 给它一个与其状态相匹配的 CDI 范围注解，例​​如@ApplicationScoped .

   @ApplicationScoped
   public class YourWebAppManifest extends WebAppManifest {
   }
   

3. 覆盖/实现属性符合其 Javadoc和 W3 spec 中的规则.

   @ApplicationScoped
   public class YourWebAppManifest extends WebAppManifest {
   
       @Override
       public String getName() {
           return "Your Application";
       }
   
       @Override
       public Collection<ImageResource> getIcons() {
           return Arrays.asList(
               ImageResource.of("logo.svg"),
               ImageResource.of("logo-120x120.png", Size.SIZE_120),
               ImageResource.of("logo-180x180.png", Size.SIZE_180),
               ImageResource.of("logo-192x192.png", Size.SIZE_192),
               ImageResource.of("logo-512x512.png", Size.SIZE_512)
           );
       }
   
       @Override
       public String getOfflineViewId() {
           return "/offline.xhtml";
       }
   }
   

4. 在您的 HTML 头中引用它，如下所示，并使用确切的库名称 omnifaces和资源名称 manifest.json :

   <link rel="manifest" href="#{resource['omnifaces:manifest.json']}" />
   

基本上就是这样。 PWAResourceHandler会自动生成想要的manifest.json和 sw.js文件并提供 /offline.xhtml模板作为离线 View 。

默认情况下，所有 <welcome-file> web.xml 中的条目被注册为“可缓存资源”，即它们也可以离线使用。您可以在自定义 WebAppManifest 中覆盖它如下:

@Override
public Collection<String> getCacheableViewIds() {
    return Arrays.asList("/index.xhtml", "/contact.xhtml", "/support.xhtml");
}

您可能还想在这些页面中制作所有 JSF 表单 stateless通过使用 <f:view transient="true">这样他们就不会抛出 ViewExpiredException .

这PWAResourceHandler的主要优势主要是您不需要手动制作 sw.js ，但可以通过简单的 CDI bean 控制其内容/配置。