12.1p+ Browser information methods / attributes in your Browser class

[Blama]

Apart from that, I agree that a standalone showcase sample (or rather an own app, linked from the showcase, but showing all the code in the showcase) using these features would be a great addition to the showcase, showing what it possible on mobile with the framework. I think this could even be SmartClient only, as one has to use JS anyway.

Perhaps a ToDo List App based on ListGrid for the different lists and Adaptive Menu to show which list is currently open and another ListGrid for the open/done items with some or all of the following:

• PWA install button and Tour as mentioned in #7 for iOS
• Todo-Due date and push notifications
• google maps map showing my position
• Offline capabilities or completely local storage with IndexedDB
• Speech-to-Text to fill out a description field of a new Todo

What do you think, Isomorphic? I know that you don't like a gazillion Showcase samples (I do!), but this would be something different, taking your Complete Application sample a bit further.

Best regards
Blama

[Blama]

Hi claudiobosticco,

I followed the instructions from the google web.dev docs.
I see the libraries you mention there, but I just did it myself. You'll need a manifest.json and JavaScript for the install after a button click (for non-iOS browsers).
For iOS, it is like the docs say:

Chrome and Edge on iOS and iPadOS do not support PWA installation, so the beforeinstallprompt event can't fire. In this case, the only option is to open the PWA using Safari, where it is installable from the share, add to the home screen menu.

You could recognize that it is iOS and create a Tour with screenshots explaining how to install on iOS. The button-click install is not possible on iOS, but if this is important to you, I wouldn't that let me stop me.

Best regards
Blama

[claudiobosticco]

Hi Blama , and thank you very much for sharing your experience and example code.

Indeed, in the future, I might be interested in the topic of push notifications (which I currently use in non-PWAs with the RealtimeMessaging module) and also offline capabilities, especially in the mobile context.
For now, though, I was thinking to just use them to provide an installation prompt for the "add to home screen" action.
Similar to what libraries like https://github.com/philfung/add-to-homescreen do.

However, I found out that, using service workers, this isn't supported on iOS: https://firt.dev/notes/pwa_ios/
Since I have to use an alternative solution for iOS, I don't think I'll adopt them, for now.

Out of curiosity, have you considered using tools like https://www.pwabuilder.com/ or libraries like https://developer.chrome.com/docs/workbox?hl=en

I'm asking because it doesn't seem trivial to do complex things with service worker APIs, so something that abstracts their functionality could be interesting (unless Isomorphic plans to integrate some service workers API/features in the future...;)).

[Blama]

Hi claudiobosticco,

yes, I'm using this and you need a (simple) service worker.
Background: I want to display mobile phone notifications. For ages, this has been only possible with "real" apps on iOS, so we needed to have a "real" app, namely a PhoneGap hull around my index.jsp page. Complete complexity overkill requiring a Mac and a 99$/year Apple developer account, thank you very much, Apple.
Today, PhoneGap is ancient history and I don't know how similar technologies (Titanium) or PhoneGap's descendant Apache Cordova are doing.
But the good news is that Apple supports notifications in iOS as of iOS 16.4, so we don't need a "real" app anymore, PWA will do.

In general I think that PWA is not related to SmartClient. PWA must work with any framework.
I remember that I had some problems with the PWA installation and finding out if the device supports it, as this is async JS.
I'm using SmartGWT, and therefore you'd need async JSNI to use this in SmartGWT. Of course possible, but nothing I ever did.
Should be easier in SmartClient I assume.

Regarding the ServiceWorker, this is mine:

self.addEventListener("fetch", () => {});

self.addEventListener("push", function(event) {
    console.log("Received push with following data:");
    if (event.data) {
        console.log("\x22" + event.data.text() + "\x22");
        const notificationData = event.data.json();
        console.log("Title: \x22" + notificationData.title + "\x22");
        console.log("Text: \x22" + notificationData.text + "\x22");
        console.log("URL: \x22" + notificationData.url + "\x22");
        self.registration.showNotification(notificationData.text, {
            body: notificationData.title,
            data: {
                url: notificationData.url
            }
        });
    }
});

self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.url)
    );
})

If you don't need notifications, I think the simplest SW possible is just the first line.
If you to want to use addEventListener for push, remember that it is mandatory to call showNotification(), otherwise the browser will block the eventHandler eventually.

Hope this helps.

Best regards
Blama

[claudiobosticco]

I want to use this in order to decide whether I want to offer a "Install as PWA" button or similar.

Hello Blama, may I ask if you decided to offer this functionality and whether you used service workers?
I'm trying to get a better understanding of this technology, and I'd love to hear if someone has had good experiences with it in a SmartClient web app, before going down this path.

[Blama]

Hi Isomorphic,

OK, thanks. It turned out that the feature detection way + JSNI to communicate this to my app was easy, so I did this. For the little version log output that I'd like from your detection mechanism I can make/keep my few JSNI methods.

Best regards
Blama

[Isomorphic]

We intentionally don't doc these because there's a lot of churn, and the only way to doc them really would be to explain exactly what the method of detection is, which is often arcane, since some vendors have take to intentionally trying to hide what engine they are.

We would recommend just getting a detection method from ChatGPT or perhaps StackOverflow.

[Blama]

Hi Isomorphic,

having a look at your Browser class I can see only a few methods / attributes, while you have a lot more information.
Could you add documentation (and SmartGWT methods) for all the other attributes you already identify, like version, isDesktop, isFirefox etc?

I want to use this in order to decide whether I want to offer a "Install as PWA" button or similar.
I already have JSNI for some of this, but of course it would be nice if it was supported natively.
Another way would be to use feature detection here, but for now I'd be fine with "don't show this button Firefox".

Thank you & Best regards
Blama