Lighthouse log:
PROTOCOL_TIMEOUT
Channel: DevTools
Initial URL: https://dev.workscope.com/
Chrome Version: 99.0.4844.74
Stack Trace: LHError: PROTOCOL_TIMEOUT
at devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:146:58
at new Promise (<anonymous>)
at Driver$1.sendCommandToSession (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:146:10)
at Driver$1.sendCommand (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:146:257)
at Object.clearBrowserCaches (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:164:899)
at resetStorageForNavigation (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:166:447)
at async Object.prepareTargetForIndividualNavigation (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:168:161)
at async Function.runPass (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:214:918)
at async Function.run (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:214:129)
at async Function._gatherArtifactsFromBrowser (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:363:456)
Pagespeed insights
https://pagespeed.web.dev/report?url=https%3A%2F%2Fdev.workscope.com%2F
I tried to find information about, but dont find exactly answers, maybe you know?
When testing a basic canvas element demo from MDN , Lighthouse said:
Something went wrong with recording the trace over your page load.
Please run Lighthouse again. (NO_LCP)
According to this github post the cause was a result of there not being any other content within the html body element, other than the canvas itself.
An h1 before the canvas element and a paragraph after it, returned standard performance results in Lighthouse.
Nothing in body other than canvas element:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Canvas API - basic_example - code sample</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {padding: 0; margin: 0;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Lighthouse said:
Please run Lighthouse again. (NO_LCP)
After adding other html content:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Canvas API - basic_example - code sample</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {padding: 0; margin: 0;}
</style>
</head>
<body>
<h1>Some text in H1</h1>
<canvas id="canvas"></canvas>
<p>Lorem ipsum dolor sit amet, consectetur..</p>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Lighthouse said:
100 Performance
Related
I am trying to load HTML content to WKWebView, It does not load properly the same as screen height/width, same code is working fine with UIWebView, See the following code
webView.loadHTMLString(htmlString!, baseURL: nil)
HTML string content <style type="text/css"> #container { width: 667px; height: 375px; margin: 0 auto } </style> 667px is screen height and 375px is screen width.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
#container {
width: 667px;
height: 375px;
margin: 0 auto
}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.chart('container', {
//Chart code.
});
</script>
</body>
</html>
What can I do to solve this issue?
Add headerString before your html code and try it Like below
let description = "<p> HTML content <p>"
var headerString = "<header><meta name='viewport' content='width=device-width,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>"
headerString.append(description)
self.webView.loadHTMLString("\(headerString)", baseURL: nil)
I'm trying to create an web page with F# Fable and p5.js. I have the setup and draw functions correctly declared, and p5.js is referenced in the HTML. However nothing seem to work: The setup function is never called and thus canvas is never created. No error message is displayed.
The following is the code I'm using.
<!doctype html>
<html>
<head>
<style>
body {
padding: 20px;
margin: 0 auto;
}
canvas {
vertical-align: top;
}
div {
margin-bottom: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<title>Simple Fable App</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fable.ico" />
</head>
<body>
</body>
</html>
open Fable.Core
open Fable.Core.JsInterop
open Fable.Import
[<Emit("fill($0)")>]
let fill (_: int): unit = jsNative
[<Emit("rect($0, $1, $2, $3)")>]
let rect (_: int) (_: int) (_: int) (_: int): unit = jsNative
[<Emit("frameRate($0)")>]
let frameRate (_: int): unit = jsNative
[<Emit("createCanvas($0, $1)")>]
let createCanvas (_: int) (_: int): unit = jsNative
let setup () =
createCanvas 500 500
frameRate 15
let draw () =
fill 255
rect 10 10 100 101
If I use the very same HTML above with the equivalent JS it will work as expected, so I assume Fable is messing up my somewhere.
<!doctype html>
<html>
<head>
<style>
body {
padding: 20px;
margin: 0 auto;
}
canvas {
vertical-align: top;
}
div {
margin-bottom: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<title>Simple Fable App</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fable.ico" />
</head>
<body>
</body>
<script>
function setup () {
createCanvas(500, 500)
frameRate(15)
}
function draw () {
fill(255)
rect(10, 10, 100, 101)
}
</script>
</html>
Following the hint given by #FyodorSoikin, I searched the documentation and found out how to add properties to JS objects.
So I added the two relevant functions to the Browser.window object (i.e. made them global):
Browser.window?setup <- setup
Browser.window?draw <- draw
And now everything works.
I can't seem to get the canvas+ webview engine within Cocoon to use a PIXI.WebGLRenderer no matter what I try. Here is a simple example:
<!DOCTYPE html>
<html>
<head>
<meta 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, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="http://pixijs.download/release/pixi.js"></script>
<title>Simple Test</title>
</head>
<body style="background-color: #99ff99; margin: 0; padding: 0;" onload="runTest()">
<script>
function runTest() {
var renderer = PIXI.autoDetectRenderer( 500, 200 );
document.body.appendChild( renderer.view );
var stageContainer = new PIXI.Container();
var text = new PIXI.Text( 'renderer.type='+renderer.type, { fontFamily: "Arial", fontSize: '12px', fill: "white" } );
text.x = text.y = 50;
stageContainer.addChild( text );
renderer.render( stageContainer );
}
</script>
</body>
</html>
With the Cocoon Launcher app I've tested this on:
iPhone5 (iOS 10.2)
iPad2 (iOS 9.3.5)
HP 10 Plus (android 4.4.2)
With webview+, all display "renderer=1" (which means PIXI.WebGLRenderer)
But with canvas+, all display "renderer=2" (which means PIXI.CanvasRenderer)
Is it possible to get canvas+ mode to work with WebGL in Pixi.js?
I have also tried forcing the renderer to be WebGL by replacing the autoDetectRenderer line with:
var renderer = new PIXI.WebGLRenderer( 500, 200 );
In this case my Cocoon Launcher on iphone and ipad crashes!
On the android, it just shows a black screen.
I have also tried with Pixi.js v3.0.1 with the same results.
So, is it possible to use WebGL with Cocoon's Canvas+ mode with Pixi.js?
Any help much appreciated, thanks
I managed to get it working, but not with the latest Pixi.js (v4.2.3), only with an old version - v3.0.10.
The key was to add cordova.js and use the document.addEventListener( "deviceready", runTest, false );
Here is some updated code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="cordova.js"></script>
<script src="js/pixi-3.0.10.js"></script>
<title>Simple Test</title>
</head>
<body style="background-color: #99ff99; margin: 0; padding: 0;">
<script>
function runTest() {
var renderer = new PIXI.WebGLRenderer( 300, 100 );
document.body.appendChild( renderer.view );
var stageContainer = new PIXI.Container();
var text = new PIXI.Text( 'rrr.type='+renderer.type, { fontFamily: "Arial", fontSize: '12px', fill: "white" } );
text.x = text.y = 50;
stageContainer.addChild( text );
renderer.render( stageContainer );
}
document.addEventListener( "deviceready", runTest, false );
</script>
</body>
</html>
This is only a partial answer because it only works with an outdated version of Pixi.js
As for me, I'm abandoning canvas+ for now because what I got working showed poor and erratic results compared with the webview+ mode. Also, as an aside, according to various performance tests I've made, it seems that the old Pixi.js v3.0.10 is dramatically out performing v4.2.3 as well.. so looks like I'll be sticking with that also.
I use Phaser to create a game but I found an problem for using it in for example facebook. When an redirect is done within an iframe the canvas is not responding after a click.
Example:
I have a IFrame and within the iframe I redirect to the game.html. When I click in the game.html everything freezes.
Everything works fine when using a computer (any browser), windows phone or android, but with an iphone or ipad it won't work.
Below are the example files to replay the problem...
index.html:
<html>
<body>
<iframe src="click.html" height="900" width="800"/>
</body>
</html>
click.html
<!DOCTYPE html>
<html>
<body>
CLICK HERE
</body>
</html>
Game.html
<!DOCTYPE html>
<html>
<head>
<style>
body{overflow:hidden;}
#game_div {
width: 760px;
height: 1100px;
margin: auto;
}
</style>
<script type="text/javascript" src="./Game/phaser.min.js"></script>
<script type="text/javascript" src="./Game/main.js"></script>
</head>
<body>
<div id="game_div"> </div>
</body>
</html>
main.js
var game = new Phaser.Game(760, 1100, Phaser.AUTO, 'game_div');
var overlay, countdownText;
var counter = 0;
var main_state = {
preload: function() {
},
create: function () {
//game overlay
overlay = game.add.graphics(0, 0);
overlay.beginFill(0x00A54F, 0.8);
overlay.drawRect(0, 0, game.width, game.height);
countdownText = game.add.text((game.width / 2), (game.height / 2), counter, { font: "65px Arial", fill: "#ffffff", align: "center" });
countdownText.anchor.set(0.5,0.5);
},
update: function() {
countdownText.setText(counter++);
}
}
game.state.add('main', main_state);
game.state.start('main');
TNX
Found the solution, with thanks to Rich Davey.
When I add the following code it works:
game.stage.disableVisibilityChange = true;
I have a problem that the text inside the content-div is scrollable. Happens on iOS 6 with iPhone 4 and only if native title is set.
Video: http://www.youtube.com/watch?v=8ARaDQzBqOM
Demo:
<!DOCTYPE html>
<html>
<head>
<script>
forge.topbar.setTitle('Test App', function() {
forge.logging.log("Topbar image set");
}, function(e) {
forge.logging.log("Topbar image error: " + e);
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>this text is scrollable</p>
</div>
</div>
</body>
</html>
You might want to try to reset all the margins, paddings and border for all elements using CSS. Add this right before the closing </head>:
<style type="text/css">
* { /* reset */
margin: 0;
padding: 0;
border: 0;
}
</style>