Incorporating Progressive Web App Support into a JavaServer Faces Web Application

Question

Incorporating Progressive Web App Support into a JavaServer Faces Web Application

Exploring the possibility of integrating Progressive Web App support into a JavaServerFaces web application has become a focal point for our team. As our JSF app continues to evolve, we foresee the need to provide offline access to certain parts of the application in the future. Along with the appealing features offered by PWAs such as notifications, full screen web apps, and the ability to add to homescreen, our main focus lies on leveraging the offline capabilities enabled by PWA through service workers and caching.

Our clients often find themselves working in areas with limited or no internet connectivity. In such scenarios, it is crucial for them to be able to access the app, authenticate themselves, and navigate to the required section of the app on-site. Here, they would work with existing data or create new datasets. I believe that utilizing the PWA service worker could potentially allow for caching data and storing newly generated information for later synchronization with the server. Is this indeed feasible?

Despite the appeal of PWA support, I harbor doubts about the feasibility of implementing offline mode functionalities in a JSF application. Given that all application logic resides on the server side and clients do not directly engage in API calls like GET/POST/PUT (essential for caching and synchronization), I question the seamless integration of these technologies.

My attempts to find substantial information on the topic of JSF & PWA have yielded little results, prompting me to pose this inquiry. Any guidance or insights on whether JSF apps can effectively harness PWA technologies, particularly in terms of offline access, caching, and synchronization, would be greatly appreciated.

Thank you.

javascript jsf progressive-web-apps

Answer 1

Answer №1

Starting from version 3.7, OmniFaces now includes PWA support through the built-in PWAResourceHandler. You can find detailed usage documentation and demonstrations in the showcase.

To begin, create a class that extends WebAppManifest

public class YourWebAppManifest extends WebAppManifest {
}

Apply a CDI scope annotation that matches its state, for example, @ApplicationScoped.
```
@ApplicationScoped
public class YourWebAppManifest extends WebAppManifest {
}
```

Make sure to override/implement properties according to their Javadoc and standards in the 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";
    }
}

Add it to your HTML head like this, using the library name omnifaces and resource name manifest.json:
```
<link rel="manifest" href="#{resource['omnifaces:manifest.json']}" />
```

That's essentially the process. The PWAResourceHandler will automatically create the desired manifest.json and sw.js files, serving the /offline.xhtml template as offline view.

By default, all <welcome-file> entries in web.xml are registered as "cacheable resources", making them available offline. This can be customized in your own WebAppManifest as shown below:

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

If necessary, ensure JSF forms on these pages are made stateless by including

<f:view transient="true">

to prevent a ViewExpiredException.

The main benefit of using the PWAResourceHandler is that manual creation of the sw.js file is no longer required, allowing easy control over its contents/configuration through a simple CDI bean.

Answer 2

Starting from version 3.7, OmniFaces now includes PWA support through the built-in PWAResourceHandler. You can find detailed usage documentation and demonstrations in the showcase.

To begin, create a class that extends WebAppManifest

public class YourWebAppManifest extends WebAppManifest {
}

Apply a CDI scope annotation that matches its state, for example, @ApplicationScoped.
```
@ApplicationScoped
public class YourWebAppManifest extends WebAppManifest {
}
```

Make sure to override/implement properties according to their Javadoc and standards in the 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";
    }
}

Add it to your HTML head like this, using the library name omnifaces and resource name manifest.json:
```
<link rel="manifest" href="#{resource['omnifaces:manifest.json']}" />
```

That's essentially the process. The PWAResourceHandler will automatically create the desired manifest.json and sw.js files, serving the /offline.xhtml template as offline view.

By default, all <welcome-file> entries in web.xml are registered as "cacheable resources", making them available offline. This can be customized in your own WebAppManifest as shown below:

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

If necessary, ensure JSF forms on these pages are made stateless by including

<f:view transient="true">

to prevent a ViewExpiredException.

The main benefit of using the PWAResourceHandler is that manual creation of the sw.js file is no longer required, allowing easy control over its contents/configuration through a simple CDI bean.

Answer 3

Answer №2

After exploring various technologies, it appears that JSF may not be the most suitable choice for offline functionality. One significant challenge is that certain platforms, such as iOS, can sometimes clear cookies/local storage due to inactivity, causing disruptions when users attempt to resume their sessions. To address this issue, we are currently transitioning our codebase to use JAX-RS endpoints instead.

Answer 4

After exploring various technologies, it appears that JSF may not be the most suitable choice for offline functionality. One significant challenge is that certain platforms, such as iOS, can sometimes clear cookies/local storage due to inactivity, causing disruptions when users attempt to resume their sessions. To address this issue, we are currently transitioning our codebase to use JAX-RS endpoints instead.

Answer 5

Answer №3

Exploring a similar concept has caught my attention recently, despite being relatively new to PWAs. JSF functions as a taglib that first goes through a servlet, allowing for easy customization of tags for rendering specific content.

However, it seems that the existing theme and component libraries may not align well with PWA principles. This leads me to believe that starting with pure JSF and creating a prototype might be the best approach.

To fully grasp the inner workings in JSF, I've revisited JSTL. By familiarizing myself with patterns and creating custom taglibs, I hope to gain a deeper understanding of how everything comes together in JSF. (It's worth mentioning that last time I delved into web development, JSTL was still a novel concept, but the core concepts remain timeless)

Answer 6

Exploring a similar concept has caught my attention recently, despite being relatively new to PWAs. JSF functions as a taglib that first goes through a servlet, allowing for easy customization of tags for rendering specific content.

However, it seems that the existing theme and component libraries may not align well with PWA principles. This leads me to believe that starting with pure JSF and creating a prototype might be the best approach.

To fully grasp the inner workings in JSF, I've revisited JSTL. By familiarizing myself with patterns and creating custom taglibs, I hope to gain a deeper understanding of how everything comes together in JSF. (It's worth mentioning that last time I delved into web development, JSTL was still a novel concept, but the core concepts remain timeless)

Incorporating Progressive Web App Support into a JavaServer Faces Web Application

Answer №1

Answer №2

Answer №3

Similar questions

scope.$digest completes before triggering scope.$watch in Karma unit tests

Why won't the button's color change when I try clicking on it?

When using angular $resource.save for savings, the view is forced to redraw and reflow because of the collection watcher

Retrieve a div element using two specific data attributes, while excluding certain other data attributes

What is the process for accessing a table in indexedDB using Dexie.js immediately after it has been opened?

How to accentuate search results using Angular filters and conceal non-matching text?

Modifying JavaScript prototypes on the fly can lead to troublesome issues

Incorporate npm libraries into vanilla JavaScript for HTML pages

Can two writable stores in Svelte be set up to subscribe to each other simultaneously?

Guidelines for sending JSON Data via Request Body using jQuery

Modifying button appearance upon clicking using JavaScript

Do the "Save to Drive" buttons require manual cleaning?

The functionality of the Toastr "options" seems to be malfunctioning

Tips for creating a navigation bar item that displays a component depending on its active state

problem with creating a django template script

Migrate the JavaScript variable created with 'passport' to an Express router

Setting a variable in Angular after a successful AJAX call

Issue encountered in Vite Preview: Uncaught (in promise) SyntaxError: JSON.parse found an unexpected character at the beginning of the JSON data, line 1 column 1

Retrieving & Refreshing Data with ajax and Jquery

Are the events objects failing to render or is the scope not being broadcasted properly