0

I was trying to build an apk from pwa using bubblewrap. My pwa is hosted in Chemistry for CSE When I initiated bubblewrap with my manifest which was in the root of the above mentioned webpage using the bubblewrap init

bubblewrap init --manifest https://rahman24.github.io/chemistryforcse/manifest.json

and after that I build the apk using bubblewrap build . While building, this generates a app-release-signed.apk file and after building, when it goes to lighthouse check, score is 88 but the lighthouse pwa check says no and there checks failed but the apk files are in the same location. This is the first problem...it is not passing the lighthouse pwa check even though it passes this in chrome tools

and the second problem is, with the apk generated without passing the lighthouse checks, I can install it. But the url bar is showing in the app like in this screenshot at the top. But im pwa, it's all fine Please let me know the things I can do for these two to rectify it Thanks in advance

Rahman24
  • 11
  • 1

1 Answers1

0

Lighthouse only shows a full pass for PWA if you meet all of their criteria. At the moment you are missing a couple that are required (and probably why you cannot create the apk correctly)

Your PWA for the web appears to work fine but you should do the following:-

Theme Colour Bar

Add the <meta name="theme-color" content="#4d084d"/> to your document <head> so it matches your manifest, some older versions of Chrome need both to work which is why it asks you to add it.

iOS icon

To be correctly installed with a custom icon on iOS you need to add the following to your <head> with a link to the relevant icon: <link rel="apple-touch-icon" href="/example.png">

You should have this anyway as anyone who saves the page to their home screen would otherwise just get a screenshot of the page.

The icon must be either 180px or 192px square to work consistently.

Android icon

Finally within your manifest you need to add an icon that is maskable:

{ 
    "src": "path/to/maskable_icon.png",      
    "sizes": "196x196",     
    "type": "image/png",      
    "purpose": "any maskable"    
}

Otherwise on newer Android devices your icon will default to a white background.

My guess is fixing the above will fix your other issues.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64