XF 2.2 Can't install PWA on Chrome (desktop)

[Mr Lucky]

What am I missing?

• I have the short title
• I have the two icons, 192 and 512
• I have SSL/https.

With xenforo I see a + icon on Chrome to install an app, but not on my dev forum.

Could it be because it is IP protected?

 

[Anatoliy]

Page not found.

ok, so your question why you can't install pwa found the answer.
but it brings another one - where the heck is your webmanifest. and I have no idea about this one.

​

 

[Mr Lucky]

The instructions don’t say anything about webmanifest.php, just the three things needed:

short title
Icons
SSL

 

[Anatoliy]

I guess I cracked this one )
CafeSaxophone - 13 characters. has to be no more than 12. Change it to CafeSax and check.

 

[Mr Lucky]

It is there now

{
    "name": "CafeSaxophone Forum",
    "short_name": "CafeSaxophone",
    "description": "Saxophones, music, general chat",
    "icons": [
        {
            "src": "https:\/\/cafesaxophone.com\/styles\/petecafe\/cafe-app192.png",
            "sizes": "192x192"
        },
        {
            "src": "https:\/\/cafesaxophone.com\/styles\/petecafe\/cafe-app512.png",
            "sizes": "512x512"
        }
    ],
    "lang": "en-US",
    "dir": "LTR",
    "display": "minimal-ui",
    "scope": "\/",
    "start_url": "\/?_pwa=1",
    "background_color": "#ececec"
}

 

[Mr Lucky]

I guess I cracked this one )
CafeSaxophone - 13 characters. has to be no more than 12. Change it to CafeSax and check.

Aha, didn't see that. I'll change to 12 characters

 

[Mr Lucky]

Still nothing, but i'll now give it some time.

 

[Anatoliy]

Still nothing

what do you mean 'nothing'? how this now looks like?

 

[Mr Lucky]

It now looks like this:





webmanifest.php

is this

{
    "name": "CafeSaxophone Forum",
    "short_name": "CafeSax",
    "description": "Saxophones, music, general chat",
    "icons": [
        {
            "src": "https:\/\/cafesaxophone.com\/styles\/petecafe\/cafe-app192.png",
            "sizes": "192x192"
        },
        {
            "src": "https:\/\/cafesaxophone.com\/styles\/petecafe\/cafe-app512.png",
            "sizes": "512x512"
        }
    ],
    "lang": "en-US",
    "dir": "LTR",
    "display": "minimal-ui",
    "scope": "\/",
    "start_url": "\/?_pwa=1",
    "background_color": "#ececec"
}

(NB: Not sure if it matters, but path to icons is/was in live site, but makes no difference now I have moved to dev site anyway)

 

[Anatoliy]

browser still doesn't see your manifest.php. do this:

Press F12, go to tab Application, on the left pane click on Clear storage afterwards click button Clear site data.

 

[Anatoliy]

or open your site in a different browser

 

[Mr Lucky]

browser still doesn't see your manifest.php. do this:

It seems to be seeing https://xf2.cafesaxophone.com/site.webmanifest.php

 

[Anatoliy]

It seems to be seeing https://xf2.cafesaxophone.com/site.webmanifest.php

It seems to be seeing
https://xf2.cafesaxophone.com/site.webmanifest
not
https://xf2.cafesaxophone.com/webmanifest.php

 

[Mike]

It's worth mentioning that your live site has this in it:

 <link rel="manifest" href="/site.webmanifest">

This is something that has presumably been added by your style, but it's conflicting with 2.2 adding its own manifest.

 

[Mr Lucky]

It's worth mentioning that your live site has this in it:

 <link rel="manifest" href="/site.webmanifest">

This is something that has presumably been added by your style, but it's conflicting with 2.2 adding its own manifest.

Yes I'm about to look into why it is seeing that, but just restopred and re-upgraded the test site.

 

[doublespaces]

The issue I encountered was not using a PNG, SVG or WebP image. I was using a JPG, developers tools manifest section will state the image type is insufficient or something to that effect.

 

[Mr Lucky]

It's worth mentioning that your live site has this in it:

 <link rel="manifest" href="/site.webmanifest">

This is something that has presumably been added by your style, but it's conflicting with 2.2 adding its own manifest.

Found it. It was in a custom template edit (needed?) for Android favicons

<link rel="manifest" href="/site.webmanifest">

contents:

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

I'm not sure that's very important so I'll just ditch it, or is there a way to get the links to those icons added to the default webmanifest?

 

[Chris D]

We already add the needed icons in the default webmanifest, and you can make sure you have populated them in the Style properties > Basic options style property group. It looks like you have already done this.

It's worth noting that many specs have evolved in many different ways over the years as many devices with different OS versions and capabilities have changed.

The ones we ask for under Basic options should be sufficient for all use cases as far as I am aware.

 

[Kirby]

The ones we ask for under Basic options should be sufficient for all use cases as far as I am aware.

Almost

The manifest is missing maskable icons and Lighthouse complains about this (as does Google play when submitting an APK for such a manifest)

 

[WxP]

How it is possible i can use the app on my laptop... But where i try to use it on my phone was not show install app :S

 

[Mr Lucky]

It looks like you have already done this.

Almost

The manifest is missing maskable icons and Lighthouse complains about this (as does Google play when submitting an APK for such a manifest)

All interesting info. I generated favicons form here:

Favicon Generator for perfect icons on all browsers

The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.

realfavicongenerator.net

And from that I have uploaded:



with this in head (which was causing the issue here.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

It will be good to ditch all (or nearly all) that.