ICEfaces
  1. ICEfaces
  2. ICE-11015

ace:growlMessages - Add support for Native Platform Notifications

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.2.BETA, 4.2
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Any
    • Assignee Priority:
      P2
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      A new ACE component that leverages browser native notifications would be a popular and useful addition to ICEfaces. The component would shield app developers from writing and managing the Javascript themselves.

      These notifications could be used in tandem with ICEpush, or just for app level notifications (in the same way ace:growlMessages is used now).

      Since the user has to give permission for browser notifications we could even have this new component gracefully fall back to a built in toast/growl style if the user disallows native notifications.

      https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

        Activity

        Hide
        Mircea Toma added a comment -

        Added initial implementation for the Notification API based messages component.

        Show
        Mircea Toma added a comment - Added initial implementation for the Notification API based messages component.
        Hide
        Mircea Toma added a comment -

        Added ace:notificationMessages demo in showcase.

        Show
        Mircea Toma added a comment - Added ace:notificationMessages demo in showcase.
        Hide
        Mircea Toma added a comment -

        Need to decide if icons that correspond to the message severity level should be shown.

        Show
        Mircea Toma added a comment - Need to decide if icons that correspond to the message severity level should be shown.
        Hide
        Liana Munroe added a comment -

        ICEfaces 4 trunk r49110
        Tested showcase ace:notification demo using Chrome 52, FF 43, IE 11/10 and edge. Some issue were found:

        1). Using IE edge/11/10 the demo can not be accessed by either clicking the link or using the search field. No navigation occurs. If the console is open, the browser locks up and the following error is seen:
        SCRIPT5009: 'Notification' is undefined
        File: coalesced.js.jsf, Line: 14457, Column: 1

        2.) Using Firefox the demo fails to behave consistently.

        • messages autoHide when autoHide = to false or true.
        • When using the check boxes, the first message renders in the bottom right of the screen. The second message renders in the top right of the screen. A third message will not render at all.
        • The only message that consistently works in Firefox is the "No checkboxes checked" message.

        3.) Chrome seems the most stable unless you have an additional notification demo open in another browser. When this happens the Chrome application sends duplicate messages. Closing those messages often results in more messages opening.

        4.) Suggestion: It seems that there is a limit of 3 messages to be rendered at any time. Since there are 4 check boxes that can be selected it could be confusing when the messages you have selected are not shown until others are closed. Perhaps the max messages shown at one time could be increased to 4.

        Show
        Liana Munroe added a comment - ICEfaces 4 trunk r49110 Tested showcase ace:notification demo using Chrome 52, FF 43, IE 11/10 and edge. Some issue were found: 1). Using IE edge/11/10 the demo can not be accessed by either clicking the link or using the search field. No navigation occurs. If the console is open, the browser locks up and the following error is seen: SCRIPT5009: 'Notification' is undefined File: coalesced.js.jsf, Line: 14457, Column: 1 2.) Using Firefox the demo fails to behave consistently. messages autoHide when autoHide = to false or true. When using the check boxes, the first message renders in the bottom right of the screen. The second message renders in the top right of the screen. A third message will not render at all. The only message that consistently works in Firefox is the "No checkboxes checked" message. 3.) Chrome seems the most stable unless you have an additional notification demo open in another browser. When this happens the Chrome application sends duplicate messages. Closing those messages often results in more messages opening. 4.) Suggestion: It seems that there is a limit of 3 messages to be rendered at any time. Since there are 4 check boxes that can be selected it could be confusing when the messages you have selected are not shown until others are closed. Perhaps the max messages shown at one time could be increased to 4.
        Hide
        Ken Fyten added a comment -

        I reviewed the current functionality on OSX. All tested browsers work (Safari, FF, Chrome), but Chrome uses it's own notifications and doesn't access the underlying OS notifications, which is pretty crap IMHO.

        I think the problem Liana had with non-chrome browsers was due to running Windows 8, which doesn't have native notifications. I had Pat test it on his Windows 10 machine and the notifications works as expected on Edge, FF.

        Show
        Ken Fyten added a comment - I reviewed the current functionality on OSX. All tested browsers work (Safari, FF, Chrome), but Chrome uses it's own notifications and doesn't access the underlying OS notifications, which is pretty crap IMHO. I think the problem Liana had with non-chrome browsers was due to running Windows 8, which doesn't have native notifications. I had Pat test it on his Windows 10 machine and the notifications works as expected on Edge, FF.
        Hide
        Ken Fyten added a comment -

        It does seem like we should just make this a new optional mode that can be enabled on the existing ace:growlMessages component. The way it could work would be that, when specified, the growlMessages would first attempt to use the native notifications instead of rendering them itself. If it detects that it's running in an unsupported browser / OS, or if the user declines to provide security access to the native notifications on the machine, then it should gracefully fallback to rendering as growlMessages instead.

        The new attribute on growlMessages for this could be called "useNativeNotifications=true/false".

        Show
        Ken Fyten added a comment - It does seem like we should just make this a new optional mode that can be enabled on the existing ace:growlMessages component. The way it could work would be that, when specified, the growlMessages would first attempt to use the native notifications instead of rendering them itself. If it detects that it's running in an unsupported browser / OS, or if the user declines to provide security access to the native notifications on the machine, then it should gracefully fallback to rendering as growlMessages instead. The new attribute on growlMessages for this could be called "useNativeNotifications=true/false".
        Hide
        Mircea Toma added a comment -

        Implemented native notifications as part of the ace:growlMessages component. Removed ace:notificationMessages component and its associated demo in 'showcase'. Modified ace:growlMessages demo 'showcase' to dynamically change useNativeNotifications attribute.

        Show
        Mircea Toma added a comment - Implemented native notifications as part of the ace:growlMessages component. Removed ace:notificationMessages component and its associated demo in 'showcase'. Modified ace:growlMessages demo 'showcase' to dynamically change useNativeNotifications attribute.
        Hide
        Carmen Cristurean added a comment -

        ICEfaces4 trunk r.49171/IE11, MS Edge, FF47, Chrome53 on Windows10 Test VM:
        Tested showcase > ace:growlMessages with useNativeNotifications=true, and most of the issues found earlier by Liana on ace:notification demo, could be reproduced.

        1) When changing "useNativeNotifications=true", a browser console error occurs on IE11/MS Edge, and the demo is not functional:
        SCRIPT5009: 'Notification' is undefined
        showcase.jsf (55,9)

        The JS error does not occur on other browsers.

        2) Native Notifications don't work on Firefox47.
        I tested this demo on FF47 locally (Windows7), and on the Windows10 VM. The notification were seen occasionally only on the Windows10 Test VM.

        3) Chrome52/ Windows10 VM: autoHide, closeAll, position attributes don't appear to work consistently when using native notifications.

        • native notifications render always at the bottom-right side of the screen;
        • autoHide=true fails to hide all messages at once; messages are being hidden in stages and after a considerable time.
        • closeAll, when enabled, fails to render the closeAll button.
        Show
        Carmen Cristurean added a comment - ICEfaces4 trunk r.49171/IE11, MS Edge, FF47, Chrome53 on Windows10 Test VM: Tested showcase > ace:growlMessages with useNativeNotifications=true, and most of the issues found earlier by Liana on ace:notification demo, could be reproduced. 1) When changing "useNativeNotifications=true", a browser console error occurs on IE11/MS Edge, and the demo is not functional: SCRIPT5009: 'Notification' is undefined showcase.jsf (55,9) The JS error does not occur on other browsers. 2) Native Notifications don't work on Firefox47. I tested this demo on FF47 locally (Windows7), and on the Windows10 VM. The notification were seen occasionally only on the Windows10 Test VM. 3) Chrome52/ Windows10 VM: autoHide, closeAll, position attributes don't appear to work consistently when using native notifications. native notifications render always at the bottom-right side of the screen; autoHide=true fails to hide all messages at once; messages are being hidden in stages and after a considerable time. closeAll, when enabled, fails to render the closeAll button.
        Hide
        Ken Fyten added a comment -

        Re-opened due to QA issues.

        NOTE that Windows 7 doesn't support native notifications, so not expected to work on anything < windows 10. OSX works as well.

        I have also found on OS X all browsers when initially enabling native notifications in the Showcase demo, I receive several error notifications (see attached screenshot image). Once these are cleared it functions normally until I disable native notifications or reload the page, then I once again receive a set of the error notifications.

        Show
        Ken Fyten added a comment - Re-opened due to QA issues. NOTE that Windows 7 doesn't support native notifications, so not expected to work on anything < windows 10. OSX works as well. I have also found on OS X all browsers when initially enabling native notifications in the Showcase demo, I receive several error notifications (see attached screenshot image). Once these are cleared it functions normally until I disable native notifications or reload the page, then I once again receive a set of the error notifications.
        Hide
        Mircea Toma added a comment - - edited

        1) Fixed by testing for the existence of Notification API before using it.

        Show
        Mircea Toma added a comment - - edited 1) Fixed by testing for the existence of Notification API before using it.
        Hide
        Mircea Toma added a comment - - edited

        2) I can confirm that notifications on FF 47.0 do not work most of the times.

        Show
        Mircea Toma added a comment - - edited 2) I can confirm that notifications on FF 47.0 do not work most of the times.
        Hide
        Mircea Toma added a comment - - edited

        3) As for Chrome browser:

        • Positioning of the native notifications is set/chosen by the browser.
        • Again, the autoHide interval is set/chosen by the browser. Here we can close earlier the notifications if we want to override the native behaviour.
        • The "closeAll" is not present because the browser is responsible to choose what UI makes sense for the OS is running in.
        Show
        Mircea Toma added a comment - - edited 3) As for Chrome browser: Positioning of the native notifications is set/chosen by the browser. Again, the autoHide interval is set/chosen by the browser. Here we can close earlier the notifications if we want to override the native behaviour. The "closeAll" is not present because the browser is responsible to choose what UI makes sense for the OS is running in.
        Hide
        Ken Fyten added a comment -

        Post review notes:

        • Let's move the native notifications to their own demo, inside the ace:growlMessages demo. Make sure they are easily found if someone searches for "native notifications", or just "notifications".
        • We will only support the default platform behaviors for native notifications, not try to force them to close earlier, etc.
        • Expose the header string and make it settable in the new demo.
        Show
        Ken Fyten added a comment - Post review notes: Let's move the native notifications to their own demo, inside the ace:growlMessages demo. Make sure they are easily found if someone searches for "native notifications", or just "notifications". We will only support the default platform behaviors for native notifications, not try to force them to close earlier, etc. Expose the header string and make it settable in the new demo.
        Hide
        Mircea Toma added a comment -

        Moved the native notifications to their own demo. Exposed the header string and make it settable.

        Show
        Mircea Toma added a comment - Moved the native notifications to their own demo. Exposed the header string and make it settable.
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk r49203, Tomcat 8, Windows 10 test machine with MS edge, FF 48, Chrome 53.

        MS edge - I was not prompted to allow native notifications when running the ace:growlMessages > Native Notifications demo on this browser. All notifications were rendered as ace:growlMessages.

        FF 48 - I was prompted to allow native notifications however no native notifications or ace:growlMessages were displayed when using the ace:growlMessages > Native Notifications demo.

        Chrome - ace:growlMessages > Native Notifications demo appears to work as expected.

        Other concerns:
        Message types selections are not cleared when navigating between the two ace:growlMessages demos.

        It would be helpful if the Native Notification demo had the minimum requirements for OS/browser listed in the description.

        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk r49203, Tomcat 8, Windows 10 test machine with MS edge, FF 48, Chrome 53. MS edge - I was not prompted to allow native notifications when running the ace:growlMessages > Native Notifications demo on this browser. All notifications were rendered as ace:growlMessages. FF 48 - I was prompted to allow native notifications however no native notifications or ace:growlMessages were displayed when using the ace:growlMessages > Native Notifications demo. Chrome - ace:growlMessages > Native Notifications demo appears to work as expected. Other concerns: Message types selections are not cleared when navigating between the two ace:growlMessages demos. It would be helpful if the Native Notification demo had the minimum requirements for OS/browser listed in the description.
        Hide
        Mircea Toma added a comment -

        Fix native notification demo description and title. Add separate backing bean for the native notification demo. Remove auto-hide feature since its not supported by any browsers yet. Add missing form to documentation menu to avoid having 'missing enclosing form' messages rendered.

        Show
        Mircea Toma added a comment - Fix native notification demo description and title. Add separate backing bean for the native notification demo. Remove auto-hide feature since its not supported by any browsers yet. Add missing form to documentation menu to avoid having 'missing enclosing form' messages rendered.
        Hide
        Carmen Cristurean added a comment -

        Tested ICEfaces4 trunk r49300 on Windows10 VM/ MS Edge38, and issues 1) and 5) can still be reproduced.

        Show
        Carmen Cristurean added a comment - Tested ICEfaces4 trunk r49300 on Windows10 VM/ MS Edge38, and issues 1) and 5) can still be reproduced.
        Hide
        Mircea Toma added a comment -

        1) The title now is ace:growlMessage - Native Notifications. This follows the naming conventions in all other demos.

        5) I ran the test with Edge browser, it always showed the messages that were selected. To more clearly see what messages are rendered is better to clear the Action Centre messages and then run the test. The bubble notification on the bottom-righ corner shows only the last message.

        Show
        Mircea Toma added a comment - 1) The title now is ace:growlMessage - Native Notifications . This follows the naming conventions in all other demos. 5) I ran the test with Edge browser, it always showed the messages that were selected. To more clearly see what messages are rendered is better to clear the Action Centre messages and then run the test. The bubble notification on the bottom-righ corner shows only the last message.
        Hide
        Mircea Toma added a comment -

        1) Modified title to have all words start with a capital - "Native Notifications".

        Show
        Mircea Toma added a comment - 1) Modified title to have all words start with a capital - "Native Notifications".
        Hide
        Carmen Cristurean added a comment -

        Verified 1) - title with ICEfaces4 trunk.49310/ IE11.

        Show
        Carmen Cristurean added a comment - Verified 1) - title with ICEfaces4 trunk.49310/ IE11.
        Hide
        Mircea Toma added a comment -

        5) Added ace:ajax to checkboxes to save any state change right away. Disabled message persistence for ace:growlMessages demos.

        Show
        Mircea Toma added a comment - 5) Added ace:ajax to checkboxes to save any state change right away. Disabled message persistence for ace:growlMessages demos.
        Hide
        Carmen Cristurean added a comment -

        Verified 5) with ICEfaces4 trunk r49316 on MS Edge38, Chrome53/ Windows10 OS.

        Show
        Carmen Cristurean added a comment - Verified 5) with ICEfaces4 trunk r49316 on MS Edge38, Chrome53/ Windows10 OS.
        Hide
        Ken Fyten added a comment -

        Reopened to adopt the "for='@inView'" attribute configuration on the ace:message(s) components to avoid rendering messages for components that are no longer in the view.

        Show
        Ken Fyten added a comment - Reopened to adopt the "for='@inView'" attribute configuration on the ace:message(s) components to avoid rendering messages for components that are no longer in the view.
        Hide
        Mircea Toma added a comment -

        Adopting the "for=@inView" strategy cannot work in the case of the demoes. The messages are created by the backing bean so there is not component to point to. Also, the view does not change when nvigating in bewteen demoes so the messages will still be propagated.

        Show
        Mircea Toma added a comment - Adopting the "for=@inView" strategy cannot work in the case of the demoes. The messages are created by the backing bean so there is not component to point to. Also, the view does not change when nvigating in bewteen demoes so the messages will still be propagated.
        Hide
        Ken Fyten added a comment -

        Re-opened to add documentation to the existing growlMessages Wiki topic (http://www.icesoft.org/wiki/display/ICE/GrowlMessages) for Native Notifications, including the min. spec required for browsers and platform OSs.

        Show
        Ken Fyten added a comment - Re-opened to add documentation to the existing growlMessages Wiki topic ( http://www.icesoft.org/wiki/display/ICE/GrowlMessages ) for Native Notifications, including the min. spec required for browsers and platform OSs.
        Hide
        Mircea Toma added a comment -

        Added documentation for Native Notifications.

        Show
        Mircea Toma added a comment - Added documentation for Native Notifications.

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Carlo Guglielmin
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: