I'm trying to have a webview that displays a website using an HybridWebView taken from here https://github.com/xamarin/xamarin-forms-samples/tree/master/CustomRenderers/HybridWebView
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PortaleDocumenti.Xamarin"
x:Class="PortaleDocumenti.Xamarin.MainPage">
<ContentPage.Content>
<local:HybridWebView x:Name="hybridWebView" Uri="https://ej2.syncfusion.com/demos/grid/grid-overview/index.html" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</ContentPage.Content>
</ContentPage>
When the page is displayed the width and heigth are not the whole viewport of the phone display and is not displayed correctly (it seems that is working as the desktop version), if I open it in browser is working fine.
The url is for example the following: https://ej2.syncfusion.com/demos/grid/grid-overview/index.html
Currenlty I'm testing it on Samsung S10.
I'm migrating if from a Cordova app that worked fine with:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Demo</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
and InAppBrowser set up in this way in onDeviceReady:
var myRef = cordova.InAppBrowser.open('https://ej2.syncfusion.com/demos/grid/grid-overview/index.html', '_blank', 'location=no,toolbar=no,zoom=no');
It sounds like you probably have to change the settings for the native Android web view to use a wide view port. On the Android HybridWebViewRenderer.OnElementChange() method, update the WebView Settings to include this:
if (Control == null)
{
var webView = new Android.Webkit.WebView(_context);
webView.Settings.JavaScriptEnabled = true;
webView.Settings.UseWideViewPort = true;
webView.Settings.MinimumFontSize = 1;
webView.Settings.MinimumLogicalFontSize = 1;
webView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
SetNativeControl(webView);
}
Setting webView.Settings.UseWideViewPort = true; should help, but it doesn't, then add the minimum font sizes as noted above.
Hope this helps!
I don't have my PC with me,so can't check.But this should do the trick:
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<local:HybridWebView x:Name="hybridWebView" Uri="https://ej2.syncfusion.com/demos/grid/grid-overview/index.html" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>
</ContentPage.Content>
If that doesn't work,give HybridWebView HeightRequest and WidthRequest of random large digits like 2000
The issue is that when the HybridWebView starts its height and width are incorrect relative to its parent, the issue is not present in the normal webview.
To set is working correctly, I have to change the code in OnElementChanged is the following:
webView.Settings.UseWideViewPort = true;
webView.Settings.LoadWithOverviewMode = true;
webView.LayoutParameters = new global::Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
Related
I create a component SeoHeader to handle meta tag creation on NextJs project
import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/dist/client/router';
const SeoHeader = ({ title, description, image }) => {
const router = useRouter();
return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<meta name="description" content={description} key="description" />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} key="og:title" />
<meta property="og:description" content={description} key="og:description" />
<meta property="og:image" content={image} key="og:image" />
<meta property="og:url" content={`https://www.energici.fr${router?.asPath}`} key="og:url" />
<meta name="twitter:card" content={description} key="twitter:card" />
<meta property="og:site_name" content="Energici, l'info bien être" key="og:site_name" />
<meta
property="twitter:url"
content={`https://www.energici.fr${router?.asPath}`}
key="twitter:url"
/>
<meta
name="twitter:image:alt"
content="Energici la plateforme du bien être"
key="twitter:image:alt"
/>
<meta property="twitter:domain" content="energici.fr" />
<title>{title}</title>
</Head>
);
};
export default SeoHeader;
If I import this component on _app.js everything is going well. I can see the meta tags in html dom and if I share the link preview card is ok.
But if I share another page for example this one : https://www.energici.fr/decouvrons-la-kinesiologie
I can see the correct meta tag in html dom but if I share the link in facebook for example or if I test it here https://metatags.io/ I cannot se anything, it's like there is no meta tag.
Any idea ?
Neither the crawler for Facebook, nor the crawler for metatags.io can execute JavaScript. Any HTML tags that are inserted by client side JavaScript won't be available to them.
Googlebot can execute JavaScript, so your meta data may work for Google. The caveat is that Googlebot has to render your pages, so crawling and indexing can take weeks longer than it would otherwise.
You can solve these problems by prerendering your site. After implementing that, crawlers will see HTML with your tags and not have to run JavaScript.
Can you set a default value for the Head component in NextJS that other pages will extend from?
In my case I need to load a font on every page:
<Head>
<link
href="path-to-font"
rel="stylesheet"
/>
</Head>
I could do this with a custom document file, but a default value for Head seems simpler.
https://nextjs.org/docs/advanced-features/custom-document
If the Head doesn't require change often, you can take the custom document approach. However if you want things to be dynamic like different title for different pages I would suggest keeping the static layout in custome-document and the dynamic layout separate in another component like
in _document.js
// this will define the default layout for the page
render() {
return (
<Html lang="en">
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
// links for static assets
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
If you want things to be dynamic like the title, create a new Layout component that wraps all the components is a specific page.
const Layout = ({children, title="default title", description="default-description"}) => {
return (
<>
<Head>
<meta name="description" content={description} />
<title>{title}</title>
</Head>
// you can header component here
<main>
{children}
</main>
// you can add your footer component here
</>
);
}
Now you just need to wrap you page with the Layout for things to be dynamic.
const MyPage = (props) => {
return (
<Layout title="the-dynamic-title" description="the-dynamic-description">
// all other components for your page goes here
</Layout>
)
}
I'm using HtmlAgilityPack v1.11.21 and since upgrading to .NET Core 3.1, I started to receive the following error while trying to load up a web page via URL: 'UTF-8, text/html' is not a supported encoding name. For information on defining a custom encoding, see the documentation for the Encoding.RegisterProvider method. (Parameter 'name')
I found this post 'UTF8' is not a supported encoding name, but I'm not sure where or how I'm supposed to implement:
System.Text.EncodingProvider provider = System.Text.CodePagesEncodingProvider.Instance;
Encoding.RegisterProvider(provider);
I tried placing it before calling
var web = new HtmlWeb();
var doc = web.Load(urlToSearch);
But that didn't solve the issue.
This was working fine before upgrading to .NET Core 3.1, so I'm not sure where exactly I need to implement a fix.
Any ideas would be appreciated!
Thanks!
For those asking for the url, I'd rather not share that, but here's the heading:
<!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">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://www.somesite.com/graphics/cdn/bootstrap-3.3.4-base-and-theme-min.2.css">
<!-- Optional theme -->
<link rel='stylesheet' type="text/css" media="screen" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
<link rel="stylesheet" href="http://www.somesite.com/graphics/cdn/somesite-responsive.css">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" " />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png" />
<meta property="og:url" content="http://www.somesite.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="site title">
<meta property="og:image" content="http://www.somesite.com/graphics/somesite_square_logo.png">
<meta property="og:description" content="description">
<title>site title</title>
</head>
<body>
</body>
</html>
There doesn't look like there's anything special there. Was hoping it was a .NET Core 3.1 thing...
As another measure, I've tried implementing the below but the response.Content.ReadAsStringAsync() comes back as empty.
using var httpClient = new HttpClient();
{
var response = await httpClient.GetAsync(urlToSearch);
if (response.IsSuccessStatusCode)
{
var html = await response.Content.ReadAsStringAsync();
var doc = new HtmlDocument();
doc.LoadHtml(html);
var photoUrl = doc.QuerySelector("div #headshot").ChildNodes[0].Attributes["src"].Value;
return new OkObjectResult(photoUrl);
}
}
It looks like it's not the issue with .NET Core 3.1, but with the URL you are trying to load.
.NET Core 3.1 has UTF-8 among defaults
.NET Core, on the other hand, supports only the following encodings:
[...]
UTF-8 (code page 65001), which is returned by the Encoding.UTF8 property.
[...]
I don't recall any place in HTTP Headers or in HTML where a string similar to
UTF-8, text/html
is expected.
In headers it looks like:
Content-Type: text/html;charset=utf-8
In HTML, like:
<meta charset="utf-8"/>
or
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
The page itself could show no sings of a problem in browsers, because they are quite forgiving. And your code before upgrade also could ignore the , text/html part for a ton of reasons. And the issue started to appear after upgrade... for another ton of reasons.
If you do not control the server, then you probably should load the page manually, then remove this error (", text/html") from the string and feed the result to HtmlAgilityPack
Update
Considering your update:
HTTP headers are also important. Even more. They take precedence over <meta>. Try
curl -v yourURL
Not sure about ReadAsStringAsync returning an empty string: maybe it's the same issue - wrong headers, or it may be an error in your code (as far as I know, ReadAsStringAsync doesn't really returns a string). You can try passing the HTML as static string
html = "<!DOCTYPE html>...";
doc.LoadHtml(html);
To isolate the initial issue.
As for ReadAsStringAsync you should check first if it succeeds reading other sites. I looked on the Internet... there are a lot of possibilities. Don't know what will work for you.
If the issue is with the headers. Then you can try this Is it possible to make HttpClient ignore invalid ETag header in response? or this https://stackoverflow.com/a/29426046/12610347 or this How to make HttpClient ignore Content-Length header or something else to your liking.
Polymer PWA app works perfectly fine in MacBook Chrome, Windows Chrome, Android Chrome browser but shows blank screen in MacBook Safari, iPhone Safari and iPhone Chrome.
Zero Errors or Zero warnings shown in web inspector.
HTML page - index.html
<!doctype html>
<!-- declare file type -->
<html lang="en">
<head>
<meta content-type="text/javascript" charset="utf-8">
<meta name="generator" content="App">
<meta name="viewport" content="width=device-width, minimum-scale=1,
initial-scale=1, user-scalable=yes">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>MyApp</title>
<meta name="description" content="My App description">
<base href="/">
<link rel="shortcut icon" sizes="24x24" href="/images/6e156046-3456-
614b-4981-e136dfbf7d18.webPlatform.png">
<link rel="manifest" href="manifest.json">
<!-- Add to homescreen for Chrome on Android. Fallback for
manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-
translucent">
<meta name="apple-mobile-web-app-title" content="App">
<!-- Homescreen icons -->
<link rel='icon' sizes='192x192' href='/images/27ab6cb7-8da3-a597-
b536-2edff24c3ac6.webPlatform.png'>
<link rel="apple-touch-icon" href="/images/c9d9ff33-7849-0621-0359-
e5e70df7cbf8.webPlatform.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/31b30d4f-
08f3-4faa-1fc2-15642e70b367.webPlatform.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/32f6784e-
c13e-81a0-1721-594d5908c4ed.webPlatform.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/ece2893b-
2863-9dfc-afe6-9c2a2961e540.webPlatform.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/27ab6cb7-
8da3-a597-b536-2edff24c3ac6.webPlatform.png">
<!-- Tile icon for Windows 8 (144x144 tile color) -->
<meta name="msapplication-TileImage" content="/images/ece2893b-2863-
9dfc-afe6-9c2a2961e540.webPlatform.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-square70x70logo"
content="/images/31b30d4f-08f3-4faa-1fc2-
15642e70b367.webPlatform.png">
<meta name="msapplication-square152x152logo"
content="/images/7ec23c59-18dd-0218-3cad-
09183db6b7a2.webPlatform.png">
<script>
window.Polymer = {rootPath: '/'};
// Load and register pre-caching Service Worker
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(function(registration) {
console.log('Service Worker Registered - ' +
registration.scope);
});
navigator.serviceWorker.ready.then(function(registration) {
console.log('Service Worker Ready');
});
}
</script>
<script>
if (!window.HTMLImports) {
HTMLImports={};
}
</script>
<link rel="import" href="bower_components/polymer/polymer-
element.html">
<link rel="import" href="bower_components/paper-toast/paper-
toast.html">
<link rel="import" href="bower_components/platinum-sw/platinum-sw-
cache.html">
<link rel="import" href="bower_components/platinum-sw/platinum-sw-
register.html">
<link rel="import" href="ice.html">
<!-- Load your application shell -->
<link rel="import" href="my-app.html">
<!-- Add any global styles for body, document, etc. -->
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.0;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<paper-toast id="toast" text="Hi, welcome to BizRec!"></paper-
toast>
<my-app></my-app>
Bower.json -->
"dependencies": {
"app-layout": "PolymerElements/app-layout#^2.0.0",
"app-route": "PolymerElements/app-route#^2.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.1",
"polymer": "Polymer/polymer#^2.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
"polymerfire": "firebase/polymerfire#^2.2.0",
"paper-button": "PolymerElements/paper-button#^2.0.0",
"paper-input": "PolymerElements/paper-input#^2.0.2",
"iron-icons": "PolymerElements/iron-icons#^2.0.1",
"iron-ajax": "PolymerElements/iron-ajax#^2.0.5",
"paper-card": "PolymerElements/paper-card#^2.0.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.1",
"iron-localstorage": "PolymerElements/iron-localstorage#^2.0.0",
"paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
"paper-item": "PolymerElements/paper-item#^2.0.0",
"paper-toast": "PolymerElements/paper-toast#^2.0.0",
"paper-fab-speed-dial": "Collaborne/paper-fab-speed-dial#^2.3.1",
"paper-avatar": "NeilujD/paper-avatar#^2.0.1",
"app-toast": "jifalops/app-toast#^0.3.1",
"paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
"paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
"paper-tooltip": "PolymerElements/paper-tooltip#^2.0.1",
"neon-animation": "PolymerElements/neon-animation#^2.0.1",
"paper-toolbar": "PolymerElements/paper-toolbar#^2.0.0",
"iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.1.0",
"vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.4",
"d3-progress-meter": "Collaborne/d3-progress-meter#^1.1.1",
"paper-pulsating-progress": "Collaborne/paper-pulsating-progress#^2.0.2",
"paper-spinner": "PolymerElements/paper-spinner#^2.0.0",
"paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
"iron-collapse": "PolymerElements/iron-collapse#^2.0.0",
"platinum-sw": "PolymerElements/platinum-sw#^2.0.0"}
There seems to be some issue in html imports or rel link that I am not able to check. Has anyone had similar issues? any fix recommended.
I am using Firebase deploy command to host the PWA on firebase.
Thanks,
V
Google Chrome is currently the only browser that has a native support for web components features (templates, HTML imports, custom elements and shadow DOM). For the other browsers you need to include a polyfill (webcomponentsjs) before importing any web component.
<script src="webcomponents-lite.js"></script>
<link rel="import" src="my-element.html">
You can see browsers support for Polymer 1.0 here.
And for 2.0 here.
My view can't find layout. But everything looks fine. My structure is shown below:
And my view is shown below:
#model xxx.Web.Model.Home.IndexModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/_MainLayout.cshtml";
}
And my layout is shown below:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Bootstrappage:Free Bootstrap Template (bootstrap 2.3.1 version)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--
<link rel="stylesheet" href="themes/style/bootstrap.min.css" />
<link rel="stylesheet" href="themes/style/bootstrap-responsive.min.css" />
-->
<link rel="stylesheet/less" type="text/css" href="../../themes/less/bootstrap.less">
<script src="../../themes/js/less/less.js" type="text/javascript"></script>
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script type="text/javascript">
$(function () {
#RenderSection("DocumentReady", false)
});
</script>
</head>
<body data-offset="40">
#{Html.RenderAction("Header", "Partial");}
#{Html.RenderAction("Navbar", "Partial");}
#RenderBody()
#{Html.RenderAction("Footer", "Partial");}
<script src="themes/js/lib/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Also my controller is shown below:
public ActionResult Index()
{
IndexModel model = new IndexModel();
HomeModelFactory modelFactory = new HomeModelFactory();
model.Files = modelFactory.CreateIndexModel();
return View(model);
}
And exception:
Why I am getting this exception? It was working well.
And the full contents of the View / Controller as well please?
Some possible scenarios without looking at the View / Controller are;
- Some sections are missing (e.g. "DocumentReady")
- The view is trying to resolve model properties which are not set (i.e null)
You might check your properties setting on your _MainLayout.cshtml file. I had this same problem (the Layout page could not be found in the search path) until I set the VisualStudio properties BuildAction to Content. I had copied the file and renamed it, and the property had been set to 'none'.
This is your problem: Layout = "~/Views/_MainLayout.cshtml";
The _Layout reference should be Layout = "~/Views/Shared/_MainLayout.cshtml";
Dont make these type of mistakes again!