I have a website up and running (and i need to support IE8).
Server: Nginx, framework Symfony2/PHP/MySQL
The issue is simple: IE8 (8.0.6) shows an HTTP 406Content not acceptable on all HTML pages.
Headers (Nginx)
Cache-Control:no-cache
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Mon, 25 Apr 2016 15:23:46 GMT
Server:nginx/1.6.2
Transfer-Encoding:chunked
X-Debug-Token:d7e68f
HTML (2 versions, not working)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Htm 2</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
... hi
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Htm</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
... hi
</body>
</html>
I have read tons of stuff on that matter but could not find any clue. The previous website version worked on IE8 and ran on Apache 2.
This bug was not related to Nginx but to Symfony 2 and FOSRESTBundle which relies on Client headers to negociate the response content via format listener.
Solution:
I changed my configuration to disable FOSRest to disable format listener for HTML pages.
fos_rest:
format_listener:
rules:
- { path: '^/rest', priorities: [ 'json' ], fallback_format: json, prefer_extension: false }
#- { path: ^/, priorities: [ 'text/html', '*/*' ], fallback_format: html, prefer_extension: true }
- { path: '^/', stop: true }
Related
So I'm using the dompdf on my Laravel -v 8.29.0 but the styles are ignored when generating the file. Here's how I use it.
Controller:
$pdf = PDF::loadView('view.blade', ['data' => $data])->output();
return response()->streamDownload(
fn () => print($pdf),
"file_name.pdf"
);
Blade:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css" media="all">
.class {
...styles;
}
</style>
</head>
...
But none of the styles are being applied. I was first using TailwindCSS which links the external file but many of the classes are also not working.
How can I solve this?
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.
I use the google analytics in my hybird applicaction using onsen ui and angularjs, but In the google analytics Audience has data，real-time report has not data.Anybody knows the reason？
My code as follows：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("PhoneGap is ready");
}
</script>
</head>
<body>
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxx-x');
ga('send', 'pageview');
</script>
<h1>HelloWorld!</h1>
</body>
</html>
I'm using phpunit with the extension of selenium 2 (Selenium2TestCase), for checking an interface of my website.
So my test page contains this :
testDisplay()
{
...
file_put_contents('/home/toto/www/screenshots/before.html', $this->source());
sleep(5);
file_put_contents(/home/toto/www/screenshots/after.html', $this->source());
$this->assertContains('toto42', $this->source());
...
}
Then when I execute :
$> phpunit testSelenium.php
I have 2 html files of my page, before the sleep(5) and after :
before.html :
<META charset="utf-8"/>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<TITLE>Test</TITLE>
<LINK href="/css/style.css" rel="stylesheet"/>
<LINK href="/css/bootstrap.css" rel="stylesheet"/>
<SCRIPT src="/js/jquery-1.7.1.min.js" type="text/javascript"/>
</HEAD></HTML>
after.html :
<META charset="utf-8"/>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<TITLE>Test</TITLE>
<LINK href="/css/style.css" rel="stylesheet"/>
<LINK href="/css/bootstrap.css" rel="stylesheet"/>
<SCRIPT src="/js/jquery-1.7.1.min.js" type="text/javascript"/>
</HEAD>
<BODY>
...
toto42
...
</BODY>
I don't understand why I have to put a sleep(5) to entirely load my page, did someone have an idea ?
And an other question what is the equivalent of clickAtAndWait (of PHPUnit_Extensions_SeleniumTestCase) for the Selenium2TestCase ?
Thanks in advance
I found an answer.
I'm looking for an HTML element in my page with a timeout and if it does not appear I wait with the function implicitWait();
testDisplay()
{
...
//I use 25000 for the timeout but anything else works too it depends on your loading page
$this->timeouts()->implicitWait(25000);
$this->assertContains('toto42', $this->source());
...
}