EDIT:
I've removed a bunch of the explanation that I had here, because I realized that the issue was intermittent and my previous thoughts were misled.
The issue is that the iPhone loads both a screenshot and your web app's icon when downloading your PWA. Whatever loads last gets used as the icon (race condition bug). My solution was to make the icon file size huge, which causes it to always be loaded last.
Here's how I tried setting the icon using Apple's own documentation.
I added this to index.html;
<link rel="apple-touch-icon" sizes="180x180" href="ream4.png">
Also tried without sizes, because why not;
<link rel="apple-touch-icon" href="ream4.png">
If anyone wants to compare, this is my manifest.
{
"name": "Ream",
"short_name": "Ream",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"icons": [
{
"src": "assets/ream6.png",
"sizes": "64x64 180x180",
"type": "image/png"
}
],
"background_color": "#f8f7fa",
"categories": ["books", "stories", "memberships"],
"homepage_url": "https://reamstories.com"
}
When I download the app from whatever location, it does download as a PWA and I can use it fine, but the icon is not downloaded unless I create it from the home page of the app. I want the icon to always be used regardless of where the user is and stop using screenshots as icons.
EDIT:
More details. The issue appears to be intermittent. Sometimes it uses a screenshot, sometimes it uses the icons. I have no idea why. I tested this by closing the tab and reopening it several times, each time I would try to download the PWA again. Sometimes it downloads the icon, sometimes it uses a screenshot. iPhone is just garbage code?
EDIT (I think I understand what is happening): It is in fact intermittent. When the cache is cleared, the icon takes longer to load which causes it display because it loads after the screenshot is generated. I think my fix is to make the icon really fng big. So it will always load after the screenshot.
This is a bug in Apple's pigsty code. The only solution is to use a larger image so that the image loads after the screenshot gets taken.
I solved this by increasing the size of the logo image from 180px to 980px. Now it works every time.
I guess this is to be expected from a startup company.
Related
I've got a manifest.json with
"display": "fullscreen",
"orientation": "landscape"
but when launched from the "install to home screen" icon, the very top bar with the clock and notification icons is still showing. Any way to have a true-fullscreen option?
The chrome docs say I can also use "standalone" - but even with that, it still shows the top bar.
Hard to make an immersive game!
As abraham said in the comments, using "display": "fullscreen", is the correct way to do it.
If you change the display property after the PWA is installed, it could take up a day for Chrome to update and change the display mode. See How Chrome handles updates to the web app manifest for details on how manifest changes are handled.
During development, the best way to check how changes to the manifest are handled is by doing an uninstall/reinstall.
so im in the process of developing my own website and understanding bootstrap. just recently uploaded the files to the free server and i see that everything that ive worked on its there and it looks just like i see it on my laptop, except of course for a few things that i cannot make work yet like : the position of logo on the navbar and links not being active when pressed. anyway when i checked on my phone to see how it looked like i couldnt see the links on the navbar, all i could see was a square with lines inside but when i touched it nothing appeared. so what should i do? am i missing a something?
Bootstrap has a mobile navigation built into it but it requires javascript. Ensure you have JS enabled and have included the collapse.js file:
http://getbootstrap.com/javascript/#collapse
I have been racking my brain trying to figure this out and I have searched all over this site and others and have found numerous solutions, none of which have any effect. I have tried the viewport meta tag in numerous configurations, I have tried removing the fb-root div, making sure there is no height=100%, and so on... nothing seems to make this page open at full width and size.
Figured out the issue... I literally went file by file and just noticed this little tid bit of code in one of the Highslide files (mobile.js)... simply removed and now all works like I wanted it to.
// Add a meta tag to have the iPhone render the page 1:1
hs.createElement('meta', {
name: 'viewport',
content: 'width=device-width; initial-scale=1.0; maximum-scale=1.0;'
}, null, document.getElementsByTagName('head')[0]);
It's easy to detect how a full-screen WebApp (i.e., WebApps that include <meta name="apple-mobile-web-app-capable" content="yes">) was launched – just check window.navigator.standalone
Is it possible to do the same for a non-full screen WebApp?
I want to show the user a "bookmark this web page" bubble (like on http://youtube.com), but I don't want to show it if the web page was launched from the home screen.
I'm pretty sure this is possible since YouTube is a non-full screen WebApp and it doesn't show the "bookmark me!" bubble when its launched from the home screen
I might be missing something in your question, but: window.navigator.standalone is telling if the app is currently in full screen mode or not (if the browser supports this property at all).
That means: if the property is there and it is false, you might want to offer your bookmark button. If it is there and true, don't show it (app is already bein run from home screen). If the property is missing, don't show the bookmark button because the user agent does not support it.
Try to visit www.luscarpa.com for instance. Use Safari and then bookmark it to your home screen and notice the difference.
It also has info about the fullscreen mode (that's where I have learned about it): http://www.luscarpa.com/development/make-your-website-an-iphone-web-application/
Horace, you can study Google's commented javascript source code, which appears they may have used in their YouTube bubble detection scheme, at
http://code.google.com/p/mobile-bookmark-bubble
if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
document.write('<link rel="stylesheet" href="add2home.css">');
document.write('<script type="application/javascript" src="add2home.js"><\/s' + 'cript>');
}
that's a little script that came from cubiq.org/add-to-home-screen seems to get the job done
of course, if you're not using the add2home script then you should change the filenames.
look at the youtube website url opened in the Safari, in the last part of the url, there has a home/?bmb=1, i think that bmb=1 is actually making the difference, when you bookmark this page, the url will include this bmb variable, then when you press the home web button, on the server side you can detect this and know it is from home web button.
On the iPhone I'm using a UIWebView to display some content that is stored on the device so my content can be viewed on the device when there is no internet connection. I'm using the jQuery and mobile stuff in an attempt to create web apps and mobile apps that use one code base.
When I include:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
everything works fine, the sprites that make up the back button, home icon etc. all work fine. When I include the above as a local resource such as:
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
The sprites do not display, I just get a dark circle where the sprite should appear. All the other attributes defined in the css work fine, just not the sprites. If I misname the local resource, everything is messed up, so I know the css as a local resource is being included, but it is being handled differently as a local resource vs a remote resource. It even works if I hit the local dev box running apache... so it must have something to do with how the web server is serving the page vs. including it as a file......
I played around with loading the same page twice with separate UIWebViews in an attempt to see if there is some timing issue... since a local resource would load much quicker than a remote resource. The second instance of the UIWebView loaded it correctly. Is there a $.mobile command I can call to refresh the page, or for the library to do it's magic?
any ideas?
thanks for any help
Question was answered in the jQuery forum. Funny, the answer was related to my comments above, and I still didn't think to look at the image files! palm2forehead
had to go in the jquery mobile css file and remove the references to the "images" directory. IOS doesn't handle directories like normal systems so once I did that all was ok.
It did not solve my issue chaning the path.
I had to look up in the mobile.css, i found that the icon were first set with an image, an then moved with classes, i had to set the the full background property on the classes that moved the background image.
Like so:
.ui-icon-plus {
background:#9c9c9c url(icons-18-white.png) no-repeat 0 50%; }
Old way were:
.ui-icon-plus {
background-position:-0 50%;}
Put everything (js,css) to www folder along with index.html file, and include file like this <script src="jquery-mobile-min.js">`, it has solved my problem.