PWA Application and Manifest.json problem

Czech_Tomasz · July 12, 2024, 8:47am

Hi,
In the last WEB Core version manifest.json file is not filled e.g. in the Release mode. After Release I see only placeholders like this.
{
"short_name":"$(ShortName)",
"name":"$(Name)",
"description":"$(Description)",
"start_url":"$(StartURL)",
"display":"fullscreen",
"theme_color":"$(ThemeColor)",
"background_color":"$(BackgroundColor)",
"icons":
[
{
"src": "$(LowResFileName)",
"type": "image/png",
"sizes": "64x64"
},
{
"src": "$(MidResFileName)",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "$(HighResFileName)",
"type": "image/png",
"sizes": "512x512"
}
]
}

brunofierens · July 12, 2024, 9:01am

Internally already fixed and this fix is also already in the v2.6.0.0 beta

Czech_Tomasz · July 12, 2024, 11:17am

ok ... when the release 2.6.0.0 is planned?

brunofierens · July 12, 2024, 11:59am

No fixed date set yet. We want sufficient time for the new web form designer feedback.
You can use v2.6.0.0 now as for use with classic form designer, all is stable.

Olaf_Monien · April 22, 2025, 5:45pm

Using 2.8.2.0
$(MidResFileName) is resolved for Manifest.json, but apparently not for index.html

The produced file has the variable names in it - is that by intention or am I doing something wrong?

    <link rel="icon" sizes="192x192" href="$(MidResFileName)">
    <link rel="apple-touch-icon" href="$(MidResFileName)">

(This is an PWA app - thus the icons in the index.html)

brunofierens · April 23, 2025, 10:08am

I retested this here by creating a new PWA project, but I could not see variables being left in the index.html or the manifest.json file.

The generated files content for a default project is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="theme-color" content="#FFFFFF"/>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link href="IconResMid.png" rel="icon" sizes="192x192"/>
    <link href="IconResMid.png" rel="apple-touch-icon"/>
    <script src="serviceworker.js" type="text/javascript"></script>
    <link rel=manifest href="Manifest.json"/>
    
    <title>TMS Web Project</title>
    <script src="Project3.js" type="text/javascript"></script>
    <style>
    </style>
  <link href="Project3.css" rel="stylesheet"/></head>
  <body>
    <script type="text/javascript">
      if ("serviceWorker" in navigator)
      {
         navigator.serviceWorker.register("serviceworker.js").then(
           function(ARegistration)
           {}).catch(
             function(AErr)
             {
               console.log("TMS WEB Core service worker registration failed", AErr);
             });
      }
    </script>
  </body>
  <script type="text/javascript">rtl.run();</script>
</html>

and

{
   "short_name":"Project3",
   "name":"Project3",
   "description":"",
   "start_url":"Project3.html",
   "display":"fullscreen",
   "theme_color":"#FFFFFF",
   "background_color":"#FFFFFF",
   "related_applications": [{
     "platform": "webapp",
     "url": "Project3.html/manifest.json"
    }],
   "icons":
   [
    {
      "src": "IconResLow.png",
      "type": "image/png",
      "sizes": "64x64",
      "purpose": "any maskable"
    },
    {
      "src": "IconResMid.png",
      "type": "image/png",
      "sizes": "256x256",
      "purpose": "any maskable"
    },
    {
      "src": "IconResHigh.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
   ]
}

Do you use the latest version v2.8.2.0 of TMS WEB Core?

Olaf_Monien · April 26, 2025, 9:01am

Sorry, Bruno, I missed your response.

I am on the latest version, I suppose:
Pas2JS Compiler version 3.1.1 [2024/11/23] for Win32 i386 / TMS WEB Core version v2.8.2.0

I created a new, blank PWA app, and the only change I applied is that I changed the hard coded icon name in the project HTML to use the variable instead:

I changed this from
<link href="IconResMid.png" rel="apple-touch-icon"/>
to
<link href="$(MidResFileName)" rel="apple-touch-icon"/>

After compiling, I still have that in the produced HTML file (under web/debug/ that is):
<link href="$(MidResFileName)" rel="apple-touch-icon"/>

In manifest.json it gets correctly resolved, so I guess these icon variables are not resolved in the project's HTML file. All other variables ($(ProjectName), $(Manifest) ...) seem to get resolved correctly.

Extended Question
The PWA template creates this in the project's HTML:
<link $(FavIcon)/>
How is $(FavIcon) resolved? Does it just look for a favicon.ico in the project or is there a setting that I am missing?

brunofierens · April 27, 2025, 8:05am

It was not clear you first manually changed the project HTML file.
We'll check the compiler that it also handles the $(MidResFileName) variable in the HTML file.
Wrt ($favicon), it now expects this favicon.ico file to be in the project (or output folder).

We'll look to enhance both functionalities.

Olaf_Monien · April 27, 2025, 11:10am

Thanks!

Czech_Tomasz · May 2, 2025, 10:18am

@brunofierens remaks to the PWA Manifest.json

The purpose for the icons should be a table

Is:
{
"src": "$(LowResFileName)",
"type": "image/png",
"sizes": "64x64",
"purpose": "any maskable"
},

Should be:

{
  "src": "$(LowResFileName)",
  "type": "image/png",
  "sizes": "64x64",
  "purpose": ["any", "maskable"]
},

Czech_Tomasz · May 2, 2025, 10:32am

Hmmmmmmm strange ... btw should be string ... as is was added to your template

{
"src": "$(LowResFileName)",
"type": "image/png",
"sizes": "64x64",
"purpose": "any maskable"
},

but I have a problem when the purpose is filled like "purpose": "any maskable" my icon on the main android screen is cut off ... when I delete purpose

{
"src": "$(LowResFileName)",
"type": "image/png",
"sizes": "64x64"
},

the icon is ok ... strange because if icon is marked as maskable it should be ok.

brunofierens · May 5, 2025, 10:28am

In a PWA manifest file, the purpose field in the icons array defines how the browser should interpret and display the icon.

Possible Values for `purpose`

You can set one or more of these values (comma-separated if multiple):

Value	Description
`any`	Default. Icon can be used in any context (splash screen, launcher, etc).
`maskable`	Ensures the icon works well with cropping into shapes (e.g., circles).
`monochrome`	Used for contexts needing single-color icons (e.g., in OS taskbars or badges). (Support is limited)

When and How to Use `maskable`

Use Case:

Use maskable when you want your icon to fill the entire icon space without getting awkwardly cropped (e.g., on Android's adaptive icons or in some install UI).

If your icon has transparent padding, it might get cropped oddly by the OS or browser. maskable icons are designed to adapt to different shapes like circles, squircles, etc.

How to Use:

In your manifest.json:

json

CopyEdit

{
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icon-192x192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

This provides both:

A standard icon (any)
A maskable icon for platforms that support adaptive icons (e.g., Android)

Topic		Replies	Views
Questions about implementing PWA offline startup TMS WEB Core	31	687	May 19, 2023
Problem with apple-touch-icon TMS WEB Core	7	237	December 31, 2020
Google Material Icons TMS WEB Core	8	303	February 11, 2021
Pwa offline don't work TMS WEB Core	14	269	July 9, 2023
PWA incon on update 2.2 beta TMS WEB Core	4	142	July 16, 2023

PWA Application and Manifest.json problem

Possible Values for purpose

When and How to Use maskable

Use Case:

How to Use:

Related topics

Possible Values for `purpose`

When and How to Use `maskable`