I want my URL visitors to be prompted with a “Add this page to your home screen” option; so that they have a quick access point via their smartphone app(s) screen.
So you could add that as the custom html that you can put in your page (until we add this as a plugin). You can double click on the page area and see a text box where you can copy paste html. Make sure you paste the right code though, this can break your page quite easily
The HTML looks like it is searching for the source of a css and a JavaScript file… but I don’t know where to put the actual sources so that the HTML works.
Also my custom images and custom styles (using images) are not showing up on my app right now but they are still viewable at there amazon-ws URL…?
Is Bubble updating or something right now, or did I horribly destroy my app with the wrong html hahah…
Sorry, I removed the html for now; I didn’t want it to mess anything up.
Basically this is to be placed in the header:
link rel=“stylesheet” type=“text/css” href="…/…/style/addtohomescreen.css" script src="…/…/src/addtohomescreen.js">/script script addToHomescreen(); /script
addtohomescreen.css and addtohomescreen.js - Can be downloaded from the link above, in this thread.
But I don’t know where to put the content of these two files^ so that the html can actually execute.
If you think there is something fairly simple I can do, let me know.
Otherwise, I’m holding off on it for a bit, rather than me carelessly pasting code all over the place haha
So your issue here, given the HTML you pasted is that the path to the actual file is relative. When you see something like …/path/file.js, it’s looking for the file on the same server as the current page. The page being hosted by Bubble, and since we don’t have the file on our servers, that won’t work.
What you should try to do is to find a location for the file (usually, such plugins have a location on a CDN you can use for free), and use this absolute path. It should look like https://differentpath/file.js.
Once you have that, pasting this in the section ‘Header’ of the property editor should do it.
I would very much like this to be a plugin that I could add to my app. I tried using @jordanfaucet 's HTML, but, as a total newbie, I couldn’t get it to display my custom app icon, and it disabled the “hide Safari menus” option. Any chance we could get this as a downloadable plugin?
No - I ended up abandoning this all together. Although I don’t disagree that it could be a good plugin for mobile sites.
A) I decided I didn’t want to go through the hassle of figuring out how to host the script on some other server - and I didn’t really like the default design.
B) I figured a custom designed imitation could be built natively in bubble (with some limitations of course - such as determining whether the app has been added to the users home screen yet or not).
I think if you design a group, with text that says “Download this to your home screen etc + the little icon” - then you can associate some conditions to the group and a yes/no data field on the user. So that it shows to a user once - and then once they interact with it in some way - then it gets hidden.
^ with that though - you would have to take into account that, the process of adding a mobile site to a users home screen - may be different on iOS/Safari then it is with Android.