PWA experience?

[peterH]

Hi all,

Does anyone have any examples of or experience with the look & feel of NT generated PWA's?

As it is it's possible to "install" a web app on a phone or tablet by adding it to the home screen (provided you've got the right header settings and icons etc). This way you get rid of the browser frame but the app still very much behaves and looks like a web app. So I'm curious about what a PWA looks like - particularly when it comes to navigation, browses etc. Does it feel more like a web app or more like a native app? Or is it simply all about using the right CSS?

In the past I've been writing some native apps using a non-Clarion tool but I'm considering switching to PWA in order to avoid maintaining versions for different OS's and in particular not having to deal with the stores.

Any input is greatly appreciated as this is completely new to me.

TIA
Peter

[jking]

Peter,

     I have been working with a NT 11.07 PWA for many weeks now.  It has not been easy, trying to understand all the pieces etc.  This weekend I managed to get a version running on my iPhone.  Take a look at it:  https://mycoindb.net.  It has a browse and form that should give you an idea of how it looks and acts.  This is a work in progress and the server may be up and down as I continue to work things out.  I'm testing it as a standalone exe and a dll in the multi-site host.  The version running on the server now is the multi-site host.

Thanks,

Jeff King

[Bruce]

Hi Peter,

>> Does anyone have any examples of or experience with the look & feel of NT generated PWA's?

I'm not sure if I've set this up as a PWA yet, but for an APK see
https://online.eco-time.com/getapp
Under Settings set the Phone Number to be 0787871708 to get a sort of "test" account.

Basically the APK and PWA are identical from a user UI point of view. Both add an icon to the home screen, both load and run in the same way.

>> As it is it's possible to "install" a web app on a phone or tablet by adding it to the home screen (provided you've got the right header settings and icons etc). This way you get rid of the browser frame but the app still very much behaves and looks like a web app. So I'm curious about what a PWA looks like - particularly when it comes to navigation, browses etc. Does it feel more like a web app or more like a native app? Or is it simply all about using the right CSS?

It'a all about the CSS. Basically you can make it look, and behave, however you want.

Cheers
Bruce

[peterH]

Hi Jeff,

Very helpful, thank you.
I know you've been working hard on your filter settings etc. but I assume that the layout/styling is out of the box (using the base theme)?
Also, did you do anything to make the This Device browse scroll rather than using the Next/Previous buttons or is that something that's done automatically by NetTalk?

Peter

[Bruce]

Jeff said;

>> I have been working with a NT 11.07 PWA for many weeks now.  It has not been easy, trying to understand all the pieces etc.

I agree. You've certainly had your fair share of challenges. Some of that is around the feature set you want (some of which has now been added) some of it is just inexperience with the web platform and some of it is definitely a lack of learning and training materials. Yes, it's a progression from the WebServer stuff, but if you're new to all of it there are a lot of moving parts to assimilate.

One of my goals for the next few months is to develop more training materials on building we apps. The training at CIDC this year for example will be focused on building a mobile app (from scratch) and will hopefully incorporate as many features as I can dream up. We'll look at the server side, the api side, and the end-user UI. This will likely also form the foundation for some sort of NetTalk Apps book on the process.

Cheers
Bruce

[Bruce]

>>  did you do anything to make the This Device browse scroll rather than using the Next/Previous buttons or is that something that's done automatically by NetTalk?

That's a nettalk thing - browses in mobile apps are file-loaded not page loaded.

cheers
Bruce

[peterH]

Cool!
Your example is also very helpful, thank you Bruce.

Peter

[jking]

Peter,

     This app is basically, "out of the box", using the Base theme.  I made a few adjustments in my custom.css file:

.coin-nt-browse-grid-cell{
 width: 100%;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 5px;
 margin-right: 5px;
 border-style: solid;
 border-width: 1px;
 border-color: #dddddd;
}

.nt-browse-table{
 width: 100%; 
}

Bruce helped me construct a JS filter:

return record.type.toLowerCase().indexOf($("#typeSearch").val().toLowerCase()) >= 0 && record.mint_date.toLowerCase().indexOf($("#dateSearch").val().toLowerCase()) >= 0 ? recordOk : recordFiltered;

This worked well when I was doing local testing, but no longer works for the version I have out on my server.  I'm still trying to get this sorted.

Stay Tuned!

Jeff

[jking]

All,

     I found the issue with my filter, JS is case sensitive (I knew this already!).  I was using $("#typeSearch") when it should have been $("#typesearch") and $("#dateSearch") when it should have been $("#datesearch").

     I'll next add the final two filter parameters for Mint and Variety.  Then I'll try the secondary pop up form again, to enter the filter parameters.  I don't really like the look of the 4 filter fields at the top, above the browse.  I want to call a second form for this.  So far, today has been pretty good!

Jeff