Fullscreen android from homescreen

Hey @emasl

I noticed you appreciating the IOS fullscreen mode when opened from the homescreen icon and you were wondering about android. Yeah, me as well! Throw this in yer meta tags section and you’re GOLDEN!

meta name=“mobile-web-app-capable” content=“yes”
Of course, throw this in html tags…

LUV THIS>

MUST HAVE!!! @romanmg… I’m assuming you already know about this right?

8 Likes

Thanks

Cool right? I a basic must have!

Happy building!

Hello @ashley.benson.tait have you an example? I tried on html and header with no success.


Might as well add the iOS version too (I think the < > characters were stripped in @ashley.benson.tait’s original message)

For anyone else reading, this is best placed in the Settings tab under SEO & Metatags → Advanced settings:

2 Likes

@philip it suppose to full screen the app? not working with iphone or android in my side.


This currently only works if a user saves the app URL to their phone home screen as a quick link icon either via Safari or Chrome. I have a tutorial in my apps teaching people how to do this on signup. Keep in mind you must have fully functional navigation built in to your app since people will not be able to see the native browser nav.

1 Like

It work well. Good to know.

Hey @JohnMark

<meta name="mobile-web-app-capable" content="yes">
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#041E42">

That is what I’m using. Yes, people need to add the icon to their homescreen before it’ll work. But it’s so nice once it’s installed!

But you can ALSO (drum roll) add a popup to your site inviting users to add an icon to their homepage (it feels just like an app!) Bubble has this installed on their site (have you tried Bubble.is on mobile?) It pops up at some point while you’re on the site.

Here’s the instructions for that

Happy Building!

Sincerely,

Ashley

4 Likes

Perfect, can’t wait to try that. Thanks @ashley.benson.tait @philip

Awesome @JohnMark. It’s such a clean experience! Yay :smiley: let me know if there’s any more trouble with that!

Sincerely,

Ashley

1 Like

Great and very usefull, thx very much. Can I ask if you know a way to do this dynamically with bubble?. I am building a site that enables each user to customize their own mobile page(s). Ideally, each page or collection of page should have their own custom background color and “add to homescreen” - e.g. seperate service-worker.js, manifest etc etc. Or?

Brgds Carsten

@ashley.benson.tait, were you able to upload a service-worker and a manifest.json file to your root folder? I tried but had no joy. An image file works fine.

Edit: I was eventually able to upload the manifest.json file, once I put some actual text in it. I still l can’t upload a blank service-worker.js file as per the instructions, though. I suspect it’s because there’s already one uploaded.

I also get the impression that the manifest only works after deploying to live, which I haven’t done yet. So I’ll revisit this again after I deploy.

In case anyone else is interested, the instructions at this link didn’t work until I added the following to my service-worker.js file:

self.addEventListener('fetch', function(event) {

});

Also, I had trouble uploading the service-worker.js file until I closed all Bubble instances, logged out of Bubble and signed back in

All worth the effort though as I now have A2HS for my app.

4 Likes

Hi,
I really need to learn how can I upload blank service-worker.js. I tried everything. Can you explain how did you succeed please?
Thanks a lot

I had to log out of Bubble and close all instances. Only after doing this was I able to upload the file. You may also want to try emptying the browser’s cache and clearing cookies etc.

I tried everything but no success…:frowning:. I couldnt upload 0 KB file. If I put even a space in the file. It accepts. Is this the right place

Thanks a lot.

As it turned out for me, the service-worker file didn’t actually work without an event listener in it, so even though I eventually managed to upload a blank file, I ultimately had to edit it to add an empty event listener as below.

self.addEventListener('fetch', function(event) {

});

So I suggest adding the same to your file.

Yes I did and It is ok now. Thx a lot. By the way did you find a way to use it with IOS ?

Glad to hear it. No, I haven’t tried this with iOS. I know that users can add websites to the home screen on iOS but I don’t think you can prompt them to do so. According to this article, as of July 2017, Safari did not support service workers or web app manifests, though it states in an update that work on it had begun.