PWA

[jimwatterson]

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]

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]

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]

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]

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]

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]

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]

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]

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":
[
]
}

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]

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.

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":
[
]
}

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]

The saga continues.
V16 states that these PWA icon issues are addressed.
V16 now installed, VL web page application set for Offline Support as Web App Manifest / Service Worker. Compiled and checked in.
When I open the VL web page in the browser, it does not present the option to "install", no install icon or reference in the browser address bar?

Has anyone else PWA enabled a VL web page in the new V16?
Aside from just selecting Web App Manifest / Service Worker, what else was needed for it to be PWA enabled, and recognized to be installed?
How did you define the Web App Icon(s)? Where in your IFS did you place your icon(s) image files?

[adale]

PWA - Web app manifest icon - update working in V16.
Create a Bitmap resource for our icon image noting the Identifier of the bitmap object.
In Web page, Offline Support, Icons, Add "Web App Manifest Icon", use the Identifier of your bitmap object for the Identifier of the web app manifest icon. I used size = 192, position = 1.
Compile & check in.

Windows (11 Pro) - works fine, installs PWA icon on desktop with option to pin to task bar. But the transparent background/border of the icon image is not working. Need to research this further.

Android - installed via Chrome in 8.1.0. But the PWA would not load (kept crashing) in older 7.1.1 tablet.
iPad - installed via Safari.
Note, in both the Android and iPad installs, it took a second install for it to actually worked. The first install of the PWA would just show a loading image. Close it, remove home page icon. Go back to browser, and select again to install on home page, and this time it worked fine. Odd??