I have a web app situated at www.xclo.mobi
I notice that when looking at other IOS web apps, they have an image that points to the browser menu telling people to install there web app to their device that appears as soon as the user views that page.
The image generally says: "Install this web app on your device: Tap on the arrow and then 'Add to Home Screen'"
can someone please advise me on how to add this? what codes will I need to add to my IOS home pages in order to get this?
thanks a lot for your help.
I've just got a proposed edit to the answer telling me it doesn't work anymore.
Fist of all, the proposed edits are used to edit the answer, if it doesn't work and you know how to fix it, send the fix on the update, if you don't know how to fix it, post a comment instead and provide more info, not just "it doesn't work".
There is a new add2home version
http://cubiq.org/add-to-homescreen-goes-3
Source code is here:
https://github.com/cubiq/add-to-homescreen
The basic usage for the new version
<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>
use this script Cubiq add to home screen
Usage, copy the files add2home.js and add2home.css to the folder where you have your ipad.html and edit your <head> to include this:
<head>
<link rel="stylesheet" href="add2home.css">
<script type="application/javascript" src="add2home.js"></script>
</head>
Related
I can’t figure out what the problem is .__.
Liveserver extension does not react on html/css changes
This line in html is present `
<meta charset="UTF-8">
Here is my settings (cant post image):
{
"files.autoSave": "afterDelay",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"liveServer.settings.useWebExt": true,
"liveServer.settings.fullReload": true,
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.wait": 3,
"liveServer.settings.CustomBrowser": "chrome",
}
here is markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
test
</body>
</html>
Updated question shows complete HTML example that should work with default preferences. Presumably the problem lies in the
"liveServer.settings.useWebExt": true,
preference: if the browser you are starting does not have installed required Live Server - Web Extension and if your preferences do not adhere to Setup Documentation, then reloads will not be triggered according docs.
Frankly, I was not able to set it up to work with web extension so I've either missed some detail there or it is a bug probably.
Plus, Preferences documentation tells that Web Extension approach should even work with head- and body-less documents.
liveServer.settings.useWebExt: : If it is true, Live Reload will be fully controled by the Live Server Web Extension. And also, it does not matter if your HTML have <body> tag or not, Live Reload will work for every file. :smile:
Default is false
Original question included just first the HTML example (and I've missed aforementioned documentation part) so it seemed that problem might be that uch empty file does not work with the Live Server (ritwickdey.LiveServer) extension's "Live Reload" feature, and it even warns you about that in a notification bubble:
Live Reload is not possible without a head or body tag.
I understand, don't show again
So use more complete HTML skeleton with those optional <head> and <body> tags if you want to see it live-reloaded upon save with this extension.
I have applied for Google AdSense for my website gulzari.in. I added the AdSense code between the <head> and </head> tags of .ejs file. After two weeks, I am getting the error "Connect your site to AdSense" even though I added the AdSense code between <head> and </head> tags of .ejs file.
I created the website using node js, express, MongoDB, .ejs, CSS and javascript.
Please help me! Where I am going wrong? Can I add Google Adsense code between the <head> and </head> in the .ejs file (https://ejs.co/) file? If not, what should I do to connect AdSense to my website created using nodejs, express, MongoDB, EJS, CSS and Javascript?
I've noticed while I deploy my flutter web project with nginx, after doing a "flutter build web" that if I don't delete the cache the old files are still in my chrome browser. Is there a way to force a refresh for users automatically if I deploy updates?
Every browser does caching and is completely normal when you don't immediately see the changes on the client browser. It does take some time for the browser to realize the code has been changed on the server and needs to update its local cache. And is completely depends on the client browser settings and client's connection speed.
But if your situations demand the client to have an updated version of the website in no time, there is a workaround.
The main.dart.js file is something like this below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
In order to force browsers to reload the app each time we want that, add a unique parameter to the main.dart.js script-src (for example a version, though it can be anything, even just a random number after ?). The new index.html will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js?version=1" type="application/javascript"></script>
</body>
</html>
Cons:
You have to manually add the incremented version number every time you want to deploy. Maybe you can write a script for doing that.
It does still take time if the client has slow internet connection. The problem arises when browsers like Chrome show Lite(cached) version of the website untill internet connection is fast enough.
Previous versions still persist to live on the client's browser till timeout
I've had a problem with Facebook.com for a few days now. Every time I load the website # https://www.facebook.com it will just take a few seconds and then display a white page. The source of the page is this:
<!DOCTYPE html>
<html lang="en" id="facebook" class="no_js">
<head><meta charset="utf-8" /><script>function envFlush(a){function b(c){for(var d in a)c[d]=a[d];}if(window.requireLazy){window.requireLazy(['Env'],b);}else{window.Env=window.Env||{};b(window.Env);}}envFlush({"ajaxpipe_token":"AXgRWhMTFIL_juHq","lhsh":"KAQF0BXye","khsh":"0`sj`e`rm`s-0fdu^gshdoer-0gc^eurf-3gc^eurf;1;enbtldou;fduDmdldourCxO`ld-2YLMIuuqSdptdru;qsnunuxqd;rdoe-0unjdojnx0"});</script><script>CavalryLogger=false;</script><noscript><meta http-equiv="refresh" content="0; URL=/?_fb_noscript=1" /></noscript><meta name="referrer" content="origin-when-crossorigin" id="meta_referrer" /><link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/yf/r/rTRM3thxxyG.css" data-bootloader-hash="nVu0I" data-permanent="1" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/yX/r/h3ydpK_uuri.css" data-bootloader-hash="zp4CG" data-permanent="1" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/ym/r/T7fKvPc0GuV.css" data-bootloader-hash="2S8io" data-permanent="1" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://static.xx.fbcdn.net/rsrc.php/v2/yu/r/Ld1C_Jcgl5j.css" data-bootloader-hash="/JEly" data-permanent="1" crossorigin="anonymous" />
<script src="https://static.xx.fbcdn.net/rsrc.php/v2/yW/r/m6m6Y7RpsEs.js" data-bootloader-hash="5WJdo" crossorigin="anonymous"></script>
<script>require("TimeSlice").guard(function() {(require("ServerJSDefine")).handleDefines([["CSSLoaderConfig",[],{"timeout":5000,"loadEventSupported":true},619]]);new (require("ServerJS"))().handle({"require":[["Bootloader","loadEarlyResources",[],[{"RmDcU":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/yL\/r\/uKsBDyzJwJh.js","crossOrigin":1},"5zC\/8":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/y0\/r\/64jGxSfxJ36.js","crossOrigin":1},"pFHnJ":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/yp\/r\/K6ojr4ngQRr.js","crossOrigin":1},"P0eje":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/y2\/r\/Wn1AFwUyuPt.js","crossOrigin":1},"q\/AOh":{"type":"js","src":"https:\/\/static.xx.fbcdn.net\/rsrc.php\/v2\/yn\/r\/r40PYeaPQsy.js","crossOrigin":1}}]]]});}, "ServerJS define", {"root":true})();</script>
I tried deleting all cookies, history, empty cache etc. and that allowed me to get to the login screen. When I login using my account it gives me the white screen, however I created a dummy account for this problem and logged in using a new account, completely fresh and it worked fine...
Not too sure what's going on here since it seems to be account specific, and it's not like I've misused the site... Anyone have any insight into this?
Or just answer the question with a fix and be a little more human and compassionate. The fix by the way is simple - create a business FB profile at business.facebook.com, using the same email address as the affected FB account. Once in on that, change views to your personal profile and your account should be back working normally.
You will need to submit the code to Facebook as its an issue accessing their server. That's a timeout, try logging in with a VPN set from a different area. Sometimes going from Instagram to Facebook cross-platform will cause a similar issue is an authentication token isn't given in a timely manner.
If that doesn't work report the code to Facebook so they can fix the timeout error.
I have previously been told to use something along the lines of:
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">
I'd like to use a separate stylesheet AND html doc for mobile visitors. Is that normal? I have so many elements I want cut from the mobile version it seemed less complicated to just have a site within a site for mobile - it's own html and CSS.
How do I use the media query above for a mobile specific stylesheet and for an html? What code would I use and where would I put it?
<link href="the/directory/containing/your/mobile.css type="text/css" media="handheld" rel="stylesheet" />
Next line could be:
<link href="the/directory/containing/your/desktop.css" type="text/css" media="screen" rel="stylesheet" />
Use this method and avoid two documents. Instead you're styling one document according to the device being used to view that document.
As far as I'm concerned, you have to detect the browser server side, and serve up a different page.
PHP pseudocode example
if(browser == mobile && !isset($_COOKIES["prefer_desktop_view"])) //Pseudo code you do the checking here
{
$_COOKIES["is_mobile"] = true; //more pseudo code
header("location: mobile.example.com") //redirect solution - if
}
Media queries are CSS specific. There's no way to do this on the client side, and even if there was, the client still has to download and parse the "desktop" HTML.