I am trying to load a Twitter timeline embed script on a NET MAUI Blazor Hybrid page using the generated script from Twitter Publish. It appears to be working on Android emulator, but not working on local iOS device. When I try loading the app on my local iOS device the Twitter timeline embed loads in external Safari browser and app errors.
App Info:
NET MAUI Blazor Hybrid
NET 7
iPhone 11 Pro
iOS Version 16.0.3
Below is my code I am testing:
index.html - Added the twitter script reference here (right before closing body tag).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>MauiBlazorTwitterTest</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/app.css" rel="stylesheet" />
<link href="MauiBlazorTwitterTest.styles.css" rel="stylesheet" />
</head>
<body>
<div class="status-bar-safe-area"></div>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">š</a>
</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>
<!-- Twitter Widget -->
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
index.razor - Call to my TwitterComponent.
#page "/"
<h1>Hello, world!</h1>
<TwitterComponent DataTweetLimit="2"></TwitterComponent>
TwitterComponent.razor - Twitter component with JSInterop. Note: DataTweetLimit isn't really being used in this example but would eventually pass to the mark-up string to limit number of tweets.
#using Microsoft.JSInterop
#((MarkupString)"<a class=\"twitter-timeline\" href=\"https://twitter.com/dotnet?ref_src=twsrc%5Etfw\" data-tweet-limit=\"2\" data-chrome=\"noheader nofooter\">Tweets by TwitterDev</a>")
#code {
[Inject]
public IJSRuntime JSRuntime { get; set; }
[Parameter]
public string DataTweetLimit { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("twttr.widgets.load");
}
}
}
Android emulator - Appears to load without any issues:
iOS Local Device - Twitter timeline does not load in app on local iOS device. NOTE: The unhandled error only appears to occur first time the app is loaded. You can reload the app and do not get error notification, but every time you load the home page (index.razor) the embeded Twitter timeline open in a new Safari browser and does not load in the app.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- š Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am using Scene Viewer and triggering the explicit intent from HTML. It's running in ar_only. The goal is when you visit this website it launches AR automatically. I have a URL and I have a QR code that points to that URL.
When you scan the QR code it starts AR no problem. When you type in the URL it sends you to the fallback website. I know the phone is compatible because it works when you scan the QR code. I have also tried this on other phones and it gives me the same results.
I think Javascript is the issue. I'm using it to "click" or run this automatically. Any ideas on what could be going on?
the link is ar.marketscale.com/test/ar_avacado.html
here is a QR code that links to that URL:
QR CODE
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}, (err) => {
console.log(err);
});
}
Iām creating an app that needs to access get current location of the user but i got the position error in the chrome console and i have tried below link for resolve this issue :
https://forum.ionicframework.com/t/geolocation-not-possible-due-to-only-secure-origins-are-allowed-see-https-goo-gl-y0zknv/58678
but its not working for me as well as i tried other solution but not working for me and I have also generated the google map API key from the console and i have used below command:
sudo ionic cordova run android --livereload
Since I get the same error in the emulator and when debugging on the phone, I am not sure how to resolve this error when dealing with Ionic. I use Ionic 3.9
Any help or hints are greatly appreciated, thanks!
below our index.html and home.ts file
If you are still having this issue, and you are running on ionic4 just run
ionic cordova run android -livereload --ssl
in some cases, you'll be required to add an address, if that's the case use your public ip where your device is connecting
https://forum.ionicframework.com/t/ionic-geolocation-only-secure-origins-are-allowed-error/61333/30
Also, this link has some insights about the issue:
https://github.com/ionic-team/ng-cordova/issues/1413
To clarify, this is not an ionic issue, it's due to some changes on the google policies.
In my case the location was working perfectly when running on the device, only failing when running with livereload option
It is possible to display an react/angular web application on WebView component ?
I build angular(angular cli) and react application in prod mode.
Next, prepared files I put inside ./assets folder.
After changes inside webpack.config.js and run
tns run android --bundle than nothing is shown beside of static texts.
home.component.tns.html
<GridLayout>
<WebView src="~/assets/seatmap/index.html"></WebView>
</GridLayout>
home.component.tns.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.x.css"></head>
<body>
<img src="favicon.ico"> // not displayed
<img src="./favicon.ico"> // displayed
<app-root></app-root> // nothing is displayed
<b>This text is displayed</b>
<script type="text/javascript" src="runtime.x.js"></script>
<script type="text/javascript" src="polyfills.x.js"></script>
<script type="text/javascript" src="main.x.js"></script>
</body>
</html>
Javascript files are loaded. There is no problem with path.
When I change src to any external web site (src="http://facebook.com") everything is ok.
Duplicate of NativeScript WebView loading local resources in src document
It's known issue with iOS, please refer my answer there which includes possible workarounds.
In My Worklight hybrid sample application I want google map in I phone (IOS) environment.I am using worklight 7.1, Jquery Mobile 1.4.5
I've done it in android environment but i am not able to seeing map in iphone.
My JS code:
var x=document.getElementById("demo");
function getLocation()
{
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLGeoLocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/HTMLGeoLocation.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<!--application UI goes here-->
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script src="js/initOptions.js"></script>
<script src="js/HTMLGeoLocation.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
There are many examples online demonstrating integration of Google Maps in Web apps, including those that use the Worklight client framework.
It is unclear what is your Worklight version, so here are some links you can explore. These also provide sample projects for you to review their implementation and run them locally.
How to display a Google Map on Worklight App
https://www.dropbox.com/s/vozn1hcbs2fb70g/GoogleMapsInWorklight.zip
I have created demo app using Ionic with Worklight and it worked on Android but got error on IOS, when i used mobile browser simulator and debugged on IOS environment, i got the folowing error message:
Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('platform-ios - iphone') contains HTML space characters, which are not valid in tokens.
I just add Ionic files in index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="ionic/css/ionic.css">
<script src="ionic/js/ionic.bundle.js"></script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I also tested on mobile device on both Android and IOS and only got error on IOS device.
I don't know how to fix this. Can anyone help? Thanks.
update May 28th: here is a blog post about Worklight and Ionic with a full sample project: http://mobileroly.blogspot.co.il/2014/04/using-angular-js-and-ionic-on-ibm.html
Well, this seems like some incompatibility between the ionic framework and Worklight.
Worklight does not officially support ionic.
The MBS sends "ios - iphone".
ionic in turn does not like that because there are spaces...
I don't quite know what ionic expects to have there, but you can overcome the error by finding this code in the ionic.bundle.js file:
for(var i = 0; i < ionic.Platform.platforms.length; i++) {
document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
}
And replacing it with the following.
The error will be gone.
for(var i = 0; i < ionic.Platform.platforms.length; i++) {
if (ionic.Platform.platforms[i] = "ios - iphone") {
document.body.classList.add('platform-ios');
// or maybe 'platform-ready', I don't know...
} else {
document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
}
}
This, however, does not help in displaying the app in the MBS...
But at least you can then run in Xcode's iOS Simulator to see the app.
It seems that ionic and Worklight's iPhone/iPad environments don't play well together.
index.html:
<head>
...
...
<link href="ionic/ionic.css" rel="stylesheet">
<script src="ionic/ionic.bundle.js"></script>
</head>
<body ng-app="ionicApp">
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
<div style="margin-top:38px">
<p>test test test</p>
</div>
...
...
</body>
main.js:
angular.module('ionicApp', ['ionic']);