B4J Question ABMaterial - can not get "add to home screen" to work with my icon

[JackKirk]

On your Android or iPhone, if you launch Chrome or Safari then search for "www.b4x.com" then find "Add to Home Screen" and follow the breadcrumbs you end up with the websites bookmark as a nice little icon on the home screen with the B4X logo in it. Tap it and you are immediately at the website.

I want to do this for an ABMaterial webapp.

I have tried the following:

Step 1

Installed ABMMini on my D: drive - see:

https://www.b4x.com/android/forum/t...-absolute-beginners-update-2022-09-08.117237/

I ended up with a folder [D:\ABMMini] containing:

Library folder
Template folder
LICENSE.TXT
README.txt

and these additions to my B4J [Additional Libraries] folder:

ABMaterial.jar
...
thumbnailator-0.4.8.jar

Step 2

I used 7-Zip to open [...\Additional Libraries\ABMServer.b4xlib] then copied the contents (excluding manifest.txt) to [D:\ABMMini\Template]

I launched the B4J project [D:\ABMMini\Template\Template.b4j] then:

unchecked the Library ABMServer.
via [Project] > [Add Existing Modules] I added the modules I unzipped from ABMServer.b4xlib

Step 3

I modified ABMApplication module as follows:

Public Sub Initialize()

    Pages.Initialize

    PageNeedsUpload.Initialize

    ABM.AppVersion = Main.server.AppVersion

    ABM.AppPublishedStartURL = Main.server.AppPublishedStartURL

    Dim DonatorKey As String = Main.Server.DonatorKey

    InitialPage = Main.Server.StartPage

           

    ' add your icons

    ' ABM.AddAppleTouchIcon("", "")

    ABM.AddAppleTouchIcon("icon128x128.png", "128x128") '<<<<<<< my addition

    ' ABM.AddMSTileIcon("", "")

    ' ABM.AddFavorityIcon("", "")

 

    #If RELEASE

        'ABM.ActivateUseCDN(DonatorKey, "https://cdn.jsdelivr.net/gh/RealAlwaysbusy/[email protected]/")

        'ABM.PreloadAllJavascriptAndCSSFiles=True    ' NEW

        ABM.ActivateGZip(DonatorKey, 1000) ' NEW

 

        Dim folders As List ' NEW

        folders.Initialize

        folders.Add(File.DirApp & "/www/" & Main.server.AppName & "/images")

        ABM.ActivatePNGOptimize(DonatorKey, folders, False , 9, False, True )

    #End If

 

    ' build the local structure IMPORTANT!

    BuildPage

End Sub

Step 4

I create a file [icon128x128.png] and save it in [D:\ABMMini\Template\Objects\www\template\images]

Step 5

I then run the Template project in Debug mode.

In either mobile browser, when I use URL [http://192.168.???.???:51042/Template] then find "Add to Home Screen" and follow the breadcrumbs the [icon128x128.png] is not shown in the resulting home screen icon.

Can anyone tell me what I am doing wrong?

 

[alwaysbusy]

I never tried to do this on an iPhone. I know it works on Android with these settings:

    ABM.AddAppleTouchIcon("apple-touch-icon-180x180.png", "180x180")
    ABM.AddMSTileIcon("mstile-150x150.png", "144x144")
    ABM.AddFavorityIcon("favicon-32x32.png", "32x32")
    ABM.AddFavorityIcon("favicon-16x16.png", "16x16")
    ABM.AddFavorityIcon("favicon-96x96.png", "96x96")
    ABM.AddFavorityIcon("favicon-128x128.png", "128x128")
    ABM.AddFavorityIcon("favicon-194x194.png", "194x194")
    
    ABM.AppVersion = ABMShared.AppVersion
    ABM.AppPublishedStartURL = ABMShared.AppPublishedStartURL
    ABM.MaskIcon = "safari-pinned-tab.svg"
    ABM.MaskIconColor = ABM.COLOR_AMBER
    ABM.MaskIconColorIntensity = ABM.INTENSITY_DARKEN3
    ABM.MSTileColor = ABM.COLOR_AMBER
    ABM.MSTileColorIntensity = ABM.INTENSITY_DARKEN3
    ABM.AndroidChromeThemeColor = ABM.COLOR_AMBER
    ABM.AndroidChromeThemeColorIntensity = ABM.INTENSITY_DARKEN3
    ABM.Manifest = "site.webmanifest"

 

[JackKirk]

I know it works on Android with these settings:

Alain,

I've been banging this around for several days without success.

If I view your website:

http://prd.one-two.com:51042/demo/AboutPage/abmaterial-about.html

on Android Chrome and go thru the "add to home screen" steps it correctly generates the home screen icon.

When I view the HTML page source of your site and that generated by my ABMaterial app they appear pretty much identical - except maybe for the manifest file.

Is there something I should be putting in here?

Thanks....

 

[alwaysbusy]

is your website reachable from outside? Maybe I can take a look.

 

[JackKirk]

is your website reachable from outside? Maybe I can take a look.

I will set it up tomorrow morning and respond with access info - thanks in advance

 

[JackKirk]

I will set it up tomorrow morning and respond with access info - thanks in advance

In the process of setting this up I played around with the contents of site.manifest and seem to have got it working.

After I sort out a few other things that are nagging me I will write it up.

 

[JackKirk]

After I sort out a few other things that are nagging me I will write it up.

See:
https://www.b4x.com/android/forum/t...oid-chrome-and-ios-safari.160794/#post-986864