I developed a simple application for FIrefox OS and I want to sumulate it on Firefox OS Simulator. When I load my application it, I get Validation: OK but my app is not installed in the simulator. I saw the same question here before, but the other guy's problem was that his manifest file had an incorrect name, but mine is named manifest.webapp. Here is my code:
manifest.webapp
{
"name": "Ejemplo Computo Movil",
"description": "Your new awesome Open Web App",
"launch_path": "/index.html",
"icons": {
"16": "/app-icons/icon-16.png",
"48": "/app-icons/icon-48.png",
"128": "/app-icons/icon-128.png"
},
"developer": {
"name": "Eugenio Kuri Sainz",
"url": "http://yourawesomeapp.com"
},
"permissions": {
"desktop-notification": {
"description": "Necesario para la creación de las notificaciones del sistema."
}
},
"locales": {
"es": {
"description": "Ejemplo de aplicación Open Web",
"developer": {
"url": "http://yourawesomeapp.com"
}
},
"it": {
"description": "Il vostro nuovo fantastico Open Web App",
"developer": {
"url": "http://yourawesomeapp.com"
}
}
},
"default_locale": "en"
}
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo de aplicación para IOS</title>
<!--[if le IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="scripts/respond.js"></script>
<![endif]-->
<!-- The following two elements pull in the styles for the default template functionality -->
<link href="styles/install-button.css" rel="stylesheet" type="text/css">
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<!-- Below is your custom application stylesheet -->
<link href="styles/app.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Esta es una aplicación para IOS</p>
<button id="install-btn">Install app</button>
<!-- The following element pulls in the script for the default template functionality -->
<script src="scripts/install.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
</body>
</html>
index and manifest are on the same folder.
Thank you very much for your help.
Your manifest.webapp is alright. Please try by re-installing the simulator. And Remember to download the latest Stable Simulator
Related
I need to test a api where :
API Url
http://api.mydomain.loc:20109/v1/
API Definition URL
http://api.mydomain.loc:20109/v1/swagger/swagger.json
The API definition is :
{
"openapi": "3.0.1",
"info": {
"title": "***",
"description": "***",
"version": "v1"
},
"servers": [
{
"url": "/v1/path1/path2"
}
],
"/ressource1": {
"get": {
"responses": {
"200": {
"description": "Success"
}
}
}
},
...
}
I follow this part unpkg in the documentation to start a local Swagger UI. I create the file "swagger-ui.html" with this content :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script>
window.onload = () => {
window.ui = SwaggerUIBundle({
url: 'http://api.mydomain.loc:20109/v1/swagger/swagger.json',
dom_id: '#swagger-ui',
});
};
</script>
</body>
</html>
When I open the page, the API definition is correctly loaded and Swagger UI displayed. But when I try out the endpoint "ressource1", Swagger UI call "http://api.mydomain.loc:20109/v1/path1/path2/ressource1". In my case, I want to call "http://api.mydomain.loc:20109/v1/ressource1".
How override the base path in Swagger UI with unpkg?
Here's another solution that uses a plugin with rootInjects. The main idea is the same as in #vernou's answer - update the OpenAPI definition dynamically.
<!-- index.html -->
<script>
const UrlMutatorPlugin = (system) => ({
rootInjects: {
setServer: (server) => {
const jsonSpec = system.getState().toJSON().spec.json;
const servers = [{url: server}];
const newJsonSpec = Object.assign({}, jsonSpec, { servers });
return system.specActions.updateJsonSpec(newJsonSpec);
}
}
});
window.onload = function() {
const ui = SwaggerUIBundle({
url: "http://api.mydomain.loc:20109/v1/swagger/swagger.json",
...
// Add UrlMutatorPlugin to the plugins list
plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
UrlMutatorPlugin
],
// This will set appropriate data when Swagger UI is ready
onComplete: () => {
window.ui.setServer("http://api.mydomain.loc:20109/v1")
}
});
window.ui = ui;
};
</script>
Swagger UI has the parameter spec :
spec : A JavaScript object describing the OpenAPI definition. When used, the url parameter will not be parsed. This is useful for testing manually-generated definitions without hosting them.
The solution is to load manually the api definition, edit the definition and pass the edited definition to Swagger UI.
Example for json OpenApi Specification :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script>
const swaggerUrl = "http://api.mydomain.loc:20109/v1/swagger/swagger.json"
const apiUrl = "http://api.mydomain.loc:20109/v1/"
window.onload = () => {
let swaggerJson = fetch(swaggerUrl).then(r => r.json().then(j => {
j.servers[0].url = apiUrl;
window.ui = SwaggerUIBundle({
spec: j,
dom_id: '#swagger-ui',
});
}));
};
</script>
</body>
</html>
Example for yaml OpenApi Specification :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist#4.15.5/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#4.15.5/swagger-ui-bundle.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js" crossorigin></script>
<script>
const swaggerUrl = "http://api.mydomain.loc:20109/v1/swagger/swagger.yaml"
const apiUrl = "http://api.mydomain.loc:20109/v1/"
window.onload = () => {
let swaggerJson = fetch(swaggerUrl).then(r => r.text().then(t => {
let j = jsyaml.load(t);
j.servers[0].url = apiUrl;
window.ui = SwaggerUIBundle({
spec: j,
dom_id: '#swagger-ui',
});
}));
};
</script>
</body>
</html>
You can copy this code and just edit the value in swaggerUrl and apiUrl.
In previous iOS (12 and before) or any Android phone, we are able to use the [Add to Home Screen] in Safari (or any browser in Android) and hide the toolbars of a PWA by using the following techniques:
in Index.html:
<head>
<meta name="viewport" content="viewport-fit=cover, width=device-width,initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<link rel="apple-touch-icon" href="/customicon.png"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="BGBG01">
<meta name="apple-mobile-web-app-title" content="BGBG01">
<meta name="msapplication-starturl" content="/">
<link rel="manifest" href="manifest.json">
</head>
Create a file manifest.json in the root directory, with the following content:
{
"name": "App Full Name",
"short_name": "AppName",
"lang": "zh-CN",
"start_url": "/",
"scope": "/",
"display": "standalone"
}
However, since iOS 13, the above method does not work anymore, the toolbars persist and we need to click the aA on the left hand side of the Address Bar, then choose [Hide Tool Bar] EVERY TIME, in order to hide the toolbars of the PWA.
So how can we hide the toolbars?
Edit
Just want to emphasize that the following js code does not work as well:
<script>
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
/* iOS hides Safari address bar */
window.addEventListener("load",function() {
setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);
});
}
</script>
or
<body>
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById("goFS");
goFS.addEventListener("click", function() {
document.body.requestFullscreen();
}, false);
</script>
</body>
And the solution provided by this link is also not working:
https://codepen.io/akikoo/pen/xdaic
Can be smart and efficiently for your case this method?
Using this minimal webmanifest the menu bar disappear for you too?
{
"name": "My Super App",
"short_name": "My App",
"display": "standalone",
"scope": "/my-app-path/",
"start_url": "/my-app-path/"
}
I'm porting extension from Chrome to Firefox.
Have an html with
<input type="file" id="protocol-file"/>
After pressing an extension button I see my input. Then start to select local file from disk - I see window with file list on my disk, but extension windows dissapeared (only in Firefox, in Chrome it still remains visible).
I tried to add
document.getElementById('protocol-file').onchange = function() {
alert('protocol-file changed');
};
but it doesn't work - I don't see alert after file selected.
It seems that extension finishes working on selecting files in Firefox. In Chrome everything is Ok.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<script src="main.js"></script>
<body>
<div id="container">
<div class="file-input-block">
<span class="file-label">Файл:</span>
<input type="file" id="protocol-file"/>
</div>
</div>
</body>
</html>
main.js
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('protocol-file').onchange = function() {
alert('protocol-file changed');
};
});
manifest.json
{
"name": "Example",
"version": "0.1",
"description": "Mozilla ext example",
"manifest_version": 2,
"permissions": [
"activeTab",
"tabs",
"notifications",
"http://*/",
"https://*/"
],
"browser_action": {
"default_title": "Example file select",
"default_popup": "index.html"
},
"browser_specific_settings": {
"gecko": {
"id": "my#examle.com",
"strict_min_version": "49.0"
}
}
}
I use this piece of code o=in my ASP.NET Core application:
<head>
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src='~/lib/bootstrap/dist/js/bootstrap.min.js'></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jstree/jstree.min.js"></script>
<link rel="stylesheet" href="~/lib/jstree/themes/default/style.min.css" type="text/css" />
</head>
<div id="container2">
<script>
$(function () {
$('#container2').jstree({
'core': {
'data': [
{
"text": "Root node", "children": [
{ "text": "Kind node 1" },
{ "text": "Kind node 2" },
{ "text": "Kind node 3" }
]
}
]
}
});
});
</script>
When I run the project in VS as IISExpress app it works.
But If I run it as an desktop app I receive the error
Uncaught TypeError: $(...).jstree is not a function
What is wrong in the code?
I'm using the Barcode Scanner plugin with Cordova, and the camera keep freezing when I navigate through my app.
It throws the following warning in XCode :
Warning: Attempt to present <CDVbcsViewController> on <MainViewController> while a presentation is in progress!
Do you have any ideas how I could solve this issue ?
edit:
Maybe it has something to do with Backbone as I'm browsing the app. The Barcode scan goes well when i'm on the homepage, but as soon as I change the page, it's freezing and I got the warning.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Project</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="js/main" src="js/lib/require.js"></script>
</body>
</html>
plugin_cordova.js
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/com.phonegap.plugins.barcodescanner/www/barcodescanner.js",
"id": "com.phonegap.plugins.barcodescanner.BarcodeScanner",
"clobbers": [
"cordova.plugins.barcodeScanner"
]
}
]
});
my backbone view
define(['jquery','underscore','backbone'], function($, _, Backbone){
var myView = Backbone.View.extend({
initialize: function(){
/* ... */
},
render: function(ev){
/* ... */
}
startScan: function(e){
e.preventDefault();
cordova.plugins.barcodeScanner.scan(this.scanSuccess,this.scanError);
},
scanSuccess: function(response){
alert("We got a barcode\n" +
"Result: " + response.text + "\n" +
"Format: " + response.format + "\n" +
"Cancelled: " + response.cancelled);
},
scanError: function(error){
alert('Error: '+error);
},
});
return myView;
});
Thanks!
I also faced the similar warning recently. After some investigation, triggering the barcode scanner more than once at the same time will have this problem. This could be due to multiple times binding of the button that trigger scanner.