PWA

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
jimwatterson
Posts: 37
Joined: Thu Jul 09, 2020 8:31 am

PWA

Post by jimwatterson » Tue Jun 22, 2021 8:49 am

In V15's new Offline Support tab there is an option to add a 'Web App Manifest / Server Worker' then an option to add a Web App Manifest icon'. Does anyone know how to actually add an icon here. I can't work out how to do it and the documentation this area is virtually non-existent.

BrendanB
Posts: 62
Joined: Tue Nov 24, 2015 10:29 am

Re: PWA

Post by BrendanB » Tue Jun 22, 2021 9:20 am

Jim,

Try setting the identifier to something like:

Identifier = /Images/AppIcon.png
Size = 192

NOTE: i created a 192x192 icon called AppIcon.png to test this.

This seems to work nicely.

I would recommend you use a subdir (eg: /Images/AppIcons/appicon192.png )

there are minimum sizes that are required. (i think 144 x 144 is the minimum that will work).

You should supply icons in multiple sizes where possible, (the manifest will contain the links, but the execution environment will decide which size it wants (eg. your Android phone would decide which size it wants for the desktop icon, and only load that from the manifest).

Brendan.

Dominik
Posts: 21
Joined: Fri Jun 10, 2016 12:14 pm

Re: PWA

Post by Dominik » Tue Jun 22, 2021 10:11 am

There is no browse button, and manually typing/pressing save does not update the tree on the right, so you might be confused and think nothing has saved. However when you close and reopen the webpage the icon you typed be shown in the tree. You need to manually set the size too (dont forget the icon must be square), so specify the size of one of the dimensions.

It will 'work' if you dont have the dimensions right, however Chrome will show warnings in the console.

jimwatterson
Posts: 37
Joined: Thu Jul 09, 2020 8:31 am

Re: PWA

Post by jimwatterson » Tue Jun 22, 2021 1:42 pm

Dominik

When you say the icon I chose will be show in the tree. Should I see the actual icon or just its name?

At the moment my tree says
Icons(1)
icon(192 x192)
\images\NESA\NSWESA_icon_rgb.png \images\NESA\NSWESA_icon_rgb.png

(It has an attach icon next to it).

Should the icon appear in the browser (as a tab icon)?

BrendanB
Posts: 62
Joined: Tue Nov 24, 2015 10:29 am

Re: PWA

Post by BrendanB » Tue Jun 22, 2021 5:26 pm

Jim,

the icon will only appear when you 'add to desktop'.

the 'Icon' that shows in the browser tab is the standard one:

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) LayoutManager(#LayoutMain) Icon(#TabIcon)

Strangely, that icon is only used for the tab icon, and the other icon is used for the 'desktop icon'.

jimwatterson
Posts: 37
Joined: Thu Jul 09, 2020 8:31 am

Re: PWA

Post by jimwatterson » Wed Jun 23, 2021 10:14 am

I've added the icon but my issue now is that I'm not getting the install now icon. I had one checked in a the app again and now its gone.

Any idea where I should look to trouble shoot this?

jimwatterson
Posts: 37
Joined: Thu Jul 09, 2020 8:31 am

Re: PWA

Post by jimwatterson » Wed Jun 23, 2021 12:27 pm

Update on this. I found a console error about the manifest - turns out the slashes in the path need to be forward (/) not backward (\)!

Made some progress!

1. Created a new icon with paint 200x200
2. Added to app
3. Appears shows download link in browser
4. Icon appears in F12 Application details (Edge Chromium)
5. Install app on PC
6. PIN to tskbar.
7. Icon shows in taskbar as dark grep panel with a P on it (app is called PW2Test).
8. If uninstall is selected the icon shows up as expected.

Is there some thing I have to do to make this work?

jimwatterson
Posts: 37
Joined: Thu Jul 09, 2020 8:31 am

Re: PWA

Post by jimwatterson » Wed Jun 23, 2021 12:34 pm

Update

The icon appears on the start menu (windows 10) and on the desktop shortcut. Its only the Taskbar that shows a grey box with a P.

adale
Posts: 27
Joined: Wed Apr 08, 2020 9:18 pm
Location: Poplarville, MS

Re: PWA

Post by adale » Tue Aug 03, 2021 8:56 am

Jim,
I am trying to get icons to work with a PWA app.
In VL, I have entered the icon file identifier both with no folder, and also tried with a new folder specified in the path /icons/xxx.png but neither way will show me an icon other than the default Lansa icon.
What I find interesting is that in the actual manifest document for the app, the "icons" element doesn't have anything listed?

I was wondering if your manifest file had any more information on the icon images you are trying to use?

{
"short_name": "P1MMain",
"name": "P1MMain",
"start_url": "/%{lansa_webalias}%/%{lansa_partition}%/p1mmain",
"display": "standalone",
"scope": "/%{lansa_webalias}%/%{lansa_partition}%/p1mmain",
"background_color": "#FFFFFF",
"theme_color": "#FFFFFF",
"icons":
[
]
}

jimwatterson wrote:
Wed Jun 23, 2021 12:27 pm
Update on this. I found a console error about the manifest - turns out the slashes in the path need to be forward (/) not backward (\)!

Made some progress!

1. Created a new icon with paint 200x200
2. Added to app
3. Appears shows download link in browser
4. Icon appears in F12 Application details (Edge Chromium)
5. Install app on PC
6. PIN to tskbar.
7. Icon shows in taskbar as dark grep panel with a P on it (app is called PW2Test).
8. If uninstall is selected the icon shows up as expected.

Is there some thing I have to do to make this work?

adale
Posts: 27
Joined: Wed Apr 08, 2020 9:18 pm
Location: Poplarville, MS

Re: PWA

Post by adale » Fri Aug 06, 2021 1:57 am

Heads up.
I had applied EPC150040 per Lansa LPC instructions to get my PWA to load. All good there as the PWA would finally load, but support has replicated that EPC150040 "breaks" the pwa Icon function. It reverts back to using the standard Lansa icon no matter what is loaded in the icon parms.

adale wrote:
Tue Aug 03, 2021 8:56 am
Jim,
I am trying to get icons to work with a PWA app.
In VL, I have entered the icon file identifier both with no folder, and also tried with a new folder specified in the path /icons/xxx.png but neither way will show me an icon other than the default Lansa icon.
What I find interesting is that in the actual manifest document for the app, the "icons" element doesn't have anything listed?

I was wondering if your manifest file had any more information on the icon images you are trying to use?

{
"short_name": "P1MMain",
"name": "P1MMain",
"start_url": "/%{lansa_webalias}%/%{lansa_partition}%/p1mmain",
"display": "standalone",
"scope": "/%{lansa_webalias}%/%{lansa_partition}%/p1mmain",
"background_color": "#FFFFFF",
"theme_color": "#FFFFFF",
"icons":
[
]
}

jimwatterson wrote:
Wed Jun 23, 2021 12:27 pm
Update on this. I found a console error about the manifest - turns out the slashes in the path need to be forward (/) not backward (\)!

Made some progress!

1. Created a new icon with paint 200x200
2. Added to app
3. Appears shows download link in browser
4. Icon appears in F12 Application details (Edge Chromium)
5. Install app on PC
6. PIN to tskbar.
7. Icon shows in taskbar as dark grep panel with a P on it (app is called PW2Test).
8. If uninstall is selected the icon shows up as expected.

Is there some thing I have to do to make this work?

Post Reply