I am new in JQuery Mobile. I really like it but I have 2 basic questions:
1- Can I test the app OFFLINE in my iPhone?
I know how to see the app when I am with an Internet connection even how to create the icon. But I don't see how to see the app i I don't have an Internet connection.
2- I suppose I can sent the html and css made with jQuery Mobile to Apple as any app. And it will work offline. Is that right?
Is there anyone with experience who have done apps with JQuery Mobile and are working in the app store?
Yes, you can have a jQuery Mobile page completely offline. Download the necessary libraries to your device. For the example I used the following
jquery-1.8.0.min.js
jquery.mobile-1.2.0.min.js
Additionally you need the jQuery Mobile CSS structure file
jquery.mobile.structure-1.2.0.min.css
Then use the theme roller to create your own CSS (or without changes just use the default jQuery CSS) and download it including the icon sets to your device. For the example I used this CSS name
taifun.min.css
The icon sets are stored in the subdirectory /images.
example code
<!DOCTYPE html>
<html>
<head>
<title>Offline</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="taifun.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<h1>I'm a jQuery Mobile offline page</h1>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
</ul>
</div><!--/content -->
</body>
</html>
screenshot HTC Desire
#Brice Favre is right - testing 'offline' could be achieved by hosting your app on a LAN and accessing it using your iPhone through Wifi.
If you 'host' the app using e.g. PhoneGap, and include all the libaries (jQuery, jQuery Mobile) and CSS as part of your application, then your app will function just fine without an Internet connection - many apps work this way. See this PhoneGap tutorial.
Related
I have a simple Tizen webapp that works fine in emulator, but not on my Samsung signage TV (SSSP6).
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class='embed-container'>
<iframe width="100%" height="100%" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts allow-popups" src="https://ad-presenter-staging.herokuapp.com/betsonglobal"></iframe>
</div>
</body>
</html>
If I replace the <iframe> with an actual <video> with the same content as what's in src, then it works fine in both emulator and on the TV.
How do I go about debugging this?
It's very possible URL is blocked during access. try updating the config.xml => policy => allow-navigation or Access
with external URL domain you want to access.
If I replace the with an actual with the same content as what's in src, then it works fine in both emulator and on the TV.
=> Does it show any error when is used on TV? The info displayed in region should be helpful to debug.
How do I go about debugging this?
=> If you're able to connect the TV to your PC, you can try launching the webapp in debug mode. After launch, if you check console section in Web Inspector, it should be logging the URLs blocked and the reason for block which should aid in fixing
I want to use the Google Adsense Auto-Ads with my react application. The react application uses SSR and I have added the code that Google provided me to the head section of the template as shown below.
export default ({ markup, css }) => {
return `<!doctype html>
<html lang="en">
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9999999999999999" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
>
<title>Teach Learn Game</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
a{
text-decoration: none;
color: #bb4d00
}
</style>
</head>
<body style="margin:0">
<div id="root">${markup}</div>
<style id="jss-server-side">${css}</style>
<script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>`;
};
When at the site, I have checked the html code using Chrome tools. I can see the line in the code but unfortunately I have been declined by the Google Adsense review saying I need to Fix some things.
The message from Google specifying the issue is:
We couldn’t find the code on your site. This is because the code is either missing or incomplete, or because the URL of your site is incorrect. Learn more.
I have removed the requirement to login which was an earlier problem and I have a proper google account.
I did see another Stack Overflow issue where it was stated that window.adsbygoogle is to be used with React but it seemed that the problem was dealing more with specifying ad units and the implementation of the window.adsbygoogle was in a component class. As I am using Auto Ads I would not expect that would apply but maybe I am mistaken. If so, how would I change the code?
In any case, appreciate if anyone with experience with getting initial acceptance for Google Auto Ads can assist. If you provide code appreciate if you could use functional components as I am not very up on class components and the use of componentDidMount as most of the examples seem to be using.
Link to my site: https://tlgamer.herokuapp.com/
Adsense will look for Adcode in herokuapp.com instead of tlgamer.herokuapp.com that is why message from Google was "We couldn’t find the code on your site.", You can not monetize a subdomain if you do not own the main domain. Switch your SSR app to a top-level domain and re-apply for Adsense.
I have a react website and in my html template I put the google analytics tracking code snippet.
The tracking works on my local (so I can actually see my dev session in GA console) but it doesn't work after I deploy to cloud. Here how my template looks like and react just render the root div.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root" />
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="GA link..."></script>
<script>
GA tracking code...
</script>
</html>
My site is here. You can see from the source code the tracking code is there. However current session just doesn't show up in GA.
When I go to your site I see calls going out to Google Tag Manager and Google Analytics and Doubleclick.
Maybe you have a script blocker (uBlock Origin, Noscript, ...) disabled on localhost but active on the production site?
I resolved it eventually. Regenerate another project in GA and use the new project worked for me. Maybe it was something mess up with my old project setup.
Say that an app needs to be created using AngularJS with Cordova in Visual Studio, do I require anything else besides the Google CDN to use AngularJS?
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
</body>
</html>
I notice that npm is usually used to install AngularJS, though if just a simple app needs to be created, could this be sufficient.
Code from: https://docs.angularjs.org/misc/downloading
That's all you need. I find installing angular locally is great for development, since I use developer tools to disable caching and I don't want to ping the CDN everytime I update a view, but for quick projects the CDN is fine.
I have a single page webapp, which is about 300Kb big. It gets bundled with webpack and uses React/Redux.
How do I put a small loading spinner upfront until the page is loaded? I can image
putting the style and css into the static index.html
using an async loader like krux/postscribe
One way would be to insert the loading animation in the index.html
e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content">
<div id="loader" />
</div>
<script src="build/app.js"></script>
</body>
</html>
Then after the bundle.js is loaded it will render in the content and the loading animation will disappear.
EDIT:
Another method is to use a progressive webapp.
https://developers.google.com/web/updates/2015/10/splashscreen
However this feature might only be available in modern browsers, which is why the first approach should be used as a fallback method.
The benefit however is, that if your app is offline it will still play
the loading animation and can give specific error messages.
I also encountered with this question with one exception: I wanted to display a loading progress bar. I ended up writing a webpack plugin and a custom asset bootloader. Check out my demo project repository.
Here is the result: