Some browsers does not asks the client if he want use the application cache, but simply just downloads the whole thing at first visist (e.g. the browser on android). That can cause troubles when the application cache is many MB's and the client is on a mobile network - that is expensive! And is it possible to stop the cache from being downloaded? Pressing the menu button on e.g. android will not close the browser, it will be running in the background.
Is it a good idea to only add the manifest based on a cookie set when the client pushes a "hey i want to offline cache this site" button? Will that cause any new challenges?
I've tested this, and it seems to work. Needs more testing though. Can provide a link to the site in about two weeks if anyone is interrested.
One possible solution, as a you hinted at yourself, would be to ask the user if he/she wants to cache the app offline, and if so, only then redirect to a page which has a link to the manifest file (which is subsequently downloaded by the browser). You cannot stop a download midway unless of course, your network disconnects mid way.
Related
I'm resurrecting an old project of mine as a way to learn some new stuff.
I'm doing this code lab from IO Add Your Web App to a User's Home Screen.
Is there any way, other than connecting a phone and waiting a lot, to test if users will be shown the prompt below?
I've tested it with Lighthouse and all tests come back green, but I've never seen the prompt. It feels very random at the moment.
The answer to This question puts the stuggle into perspective:
The user has visited your site twice over two separate days during the course of two weeks
Does that mean I need to wait 2 days between changes to see if it worked?
Enable chrome://flags/#bypass-app-banner-engagement-checks and you will see the banner as long as you have a manifest (configured correctly) and are on HTTPS and have a service worker.
Increasing Engagement with Web App Install Banners
anshulix has correctly answered the question, but I thought I'd put in a more verbose answer.
To remove the waiting and other requirements for the save to homescreen prompt, then you need to enable a flag.
Enable chrome://flags/#bypass-app-banner-engagement-checks and you will see the banner as long as you have a manifest (configured correctly) and are on HTTPS and have a service worker.
Which comes from Increasing Engagement with Web App Install Banners
It's important to remember that you are setting this flag on the mobile browser, not on your desktop browser. For some reason this didn't occur to be for a while!
You also need to restart mobile Chrome for the flag to take effect. If you've got your tabs mixed in with your other apps, this can be tricky because you need to hunt down all the tabs and close them. (Or find a better way to close Chrome.)
I found it much easier to do this debugging in Chrome Dev, rather than regular chrome because a) I know it's got the latest fixes in it, and b) because I only have 1 tab open, so it's easy to restart the browser.
If you are doing remote inspection, there is an issue about the messages that come up in the console. In Chrome 50 you get:
App banner not shown: could not determine the best icon to use
This doesn't seem to be true; in more recent builds—e.g. mobile Chrome 52—save to desktop works just fine. It's a disconcerting but useless error.
As a bonus helpful thing, realfavicongenerator does an excellent job of generating all the icons and the manifest file that you need.
I am trying to put together a small webpage for my daughter that uses speech input to test her knowledge of various words that she is supposed to know on sight.
The problem is every time she hits the answer button it asks for microphone permission. I hit allow and it saves as an exception in my chrome media settings as ask.
Everything I am reading online is telling me that for it to remember the settings and set to allow, it needs to be on an https server.
This site I use to test my webcam is not on an https but still saves as allow and doesn't ask again. http://testmycam.net
How do they do it without an ssl cert?
I am about to start, working on a offline web application using HTML5, indexed db.
I have been reading a lot about it. But I got little confused thinking if the user deletes the cache of the browser, my app cache would also got deleted. And then there would be no way to use the application offline, until we got connected to internet, and browser creates a fresh cache.
Is this assumption true..or Is there a way to protect the app cache from getting deleted accidentally.
No. There isn't.
This is a normal behaviour which is similar to mobile apps. If users've removed their native apps, they need to redownload them whenever they want to reuse those apps. Appcache is not a silver bullet for the case.
Whenever I send a GET-request to my webapp using chrome, according to my apache access log two identical requests (not always, but most of the times, I can't reproduce it - it's not for the favicon) get send to the sever, although only one is shown in the chrome dev tools. I deactivated all extensions and it's still happening.
Is this https://news.ycombinator.com/item?id=1872177 true and is it a chrome feature or should I dig deeper within my app to find the bug?
I think it's even worse than that. My experience here (developing with Google App Engine), is that Chrome is making all kinds of extra requests.
This is possibly due to the option that is in the Settings, checked by default:
Predict network actions to improve page load performance
Here is a really weird example: my website's page runs a notifications check every 15 seconds (done in javascript). Even after closing all tabs related to my website, I see requests coming from my IP, some random pages but also the notification check request. To me that means that Chrome has a page of my website running in the background and is even evaluating its javascript.
When I request a page, I pretty much always get another request for one of the links in that page. And it also requests resources of the extra pages (.css, .js, .png files). Lots of requests going on.
I have seen the same behavior with the development server that runs locally.
Happens also from another computer / network.
Doesn't happen with Firefox.
Also, see What to do with chrome sending extra requests?
I'm building a photography site, which ideally should work offline. Caching the css/js files required is pretty straightforward. The issue is, what to do with the actual photographs.
I'm currently loading them from flickr, both a thumbnail version and a full res one. This brings me to two questions:
Is it possible to cache files that are delivered from an external source, or does everything have to come from the same domain?
It is probably too much to cache all pictures in the app-cache, because it will cause a big download the first time a user hits the site. What are the recommendations here? Is it possible to have the user explicitly turn on the full version of the app cache?
If you're not serving anything over https, you can include resources from as many origins as you want in the CACHE section. But cross-origin appcaching with https only works in Chrome today. I doubt Flickr serves images over https, so you should be fine.
Some browsers will prompt the user the first time an appcache would be downloaded, but not all (I know Firefox does, but Chrome doesn't). For more control you would have to implement some logic in your application. Maybe let users make a choice within your application, store it as a per-user setting and then only serve your page with a manifest to users who opted in.