I have a node js server on a docker container runing on digital ocean, that serve an angular 2 application bundeled and traspiled with webpack.
When I try to get the application from any computer it works, but if I try to get it from my android device or ipad it fails to load the js files.
The browsers shows this errors:
Failed to load resource: net::ERR_CONNECTION_REFUSED common.js
Failed to load resource: net::ERR_CONNECTION_REFUSED vendor.js
Failed to load resource: net::ERR_CONNECTION_REFUSED app.js
Again it works on desktop chrome/firefox/safari.
Did you check if you has AdBlock or something similar in your devices? Sometimes it can cause errors like this.
Check too if you are using a proxy in the devices connection.
I hope my answer will be helpfulp!
Related
I have built a laravel app which implements this qr scanner: https://github.com/maslick/koder
(I am using the Vanilla code version)
But when I visit the page where the qr scanner is enabled, camera starts but I can't see the video feed on the screen.
I don't get any console errors just these messages:
all.js:9 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
all.js:9 falling back to ArrayBuffer instantiation
DevTools failed to load source map: Could not load content for
chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map:
HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools
failed to load source map: Could not load content for
chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map:
HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools
failed to load source map: Could not load content for
http://localhost/my-qr/public/js/popper.js.map: HTTP error: status
code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Any suggestions why this is happening? I tried in chrome and in firefox but still tha same problem.
This is the blade code:
#extends('layouts.app')
#section('content')
<div class="canvas" style="width:100%;">
<canvas id="canvas"></canvas>
</div>
<div class="scanBtn">
<a id="btnStart" class="myHref">start scan</a>
<a id="btnStop" class="myHref">stop scan</a>
</div>
<div class="barcode" id="result" style="background:white"></div>
#endsection
I am the author of koder. Here is what you can try:
Test the vanilla-js version here. You could try different devices, laptop, mobile phone, tablet.
While testing/debugging your app, make sure you serve your app via https. You could use a self-signed certificate. It turns out in some web-browsers navigator.mediaDevices.getUserMedia is available only in secure contexts (HTTPS). See details here. As a result the browser does not start your camera.
To debug, checkout the repo and run:
$ yarn run vanilla-js-live
$ open http://localhost:8081
This will start a simple webserver and serve the vanilla-js example app on port 8081. The 2nd command will open your web-browser.
Although it works when served on localhost via http on a laptop (I am running Mac OSX 11.6, Chrome 96.0.4664.110), it may not be the same in your case. Especially if you start the webapp on your laptop (e.g. on 0.0.0.0:8081) and connect to it (e.g. http://LAPTOP_IP:8081) from your mobile phone, which is on the same Wifi network. Keep this in mind.
All above is meant for debugging the demo app. Your web-app is served by PHP, and you should account for that. Never the less, there's not much difference, whether it is served by PHP, nginx or AWS S3, if integrated correctly.
I am using Expo SDK Version: 36 to generate a PWA.
curl http://$LOCAL_IP:19006/expo-service-worker.js: OK 200
curl http://localhost:19006/expo-service-worker.js: FAIL => Instead of serving expo-service-worker.js it serve the static asset index.html.
It cause the following error in the console:
Failed to register service-worker DOMException: Failed to register a ServiceWorker for scope ('http://localhost:19006/') with script ('http://localhost:19006/expo-service-worker.js'): The script has an unsupported MIME type ('text/html').
The file expo-service-worker.js is not served and this is problematic when you must implement web push notification because only localhost can work without it when site is not served with HTTPS.
Related issues:
https://github.com/expo/expo-cli/issues/2063
https://github.com/expo/expo-cli/issues/2468
How can I fix it?
Is Mozilla Thimble explicitly doing something to prevent service-workers from loading?
I am preparing a tutorial for teenagers on how to create a web game and install it on their smartphone. I am getting them to use Mozilla Thimble so that they can see the results of their changes immediately.
In order to trigger the web app installation banner on Android, the game needs to register a service worker. However, I am getting the following error in Google Chrome.
ServiceWorker registration failed:
TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
The service-worker.js is registered inside a main.js script. I have checked that the URL provided in the main.js script is correct. I have loaded the service-worker.js script directly through the index.html page, to ensure that it loads. I have checked within the service-worker.js script that its URL is exactly the same as what main.js is asking for. Mozilla Thimble is delivered over the "https://" protocol.
In Firefox, the error is different:
ServiceWorker registration failed:
ServiceWorker script at https://mozillathimblelivepreview.net/...dd2e/service-worker.js
for scope https://mozillathimblelivepreview.net/...dd2e/ encountered an error during installation.
Empty String
When I upload the files to my own site, they run with no problem:
ServiceWorker registration successful with scope: https://dev.example.com/thimble/
Is there some way I can encourage Mozilla Thimble to get the service-worker script to load? If so, it will considerably simplify the production process for my students.
I have no idea why this problem happens. the site is written in angular2 typescript, and compiling with angular-cli.
when I upload the compiled app to the remote server and accessing the site through static IP or DNS without https all works fine. but when I try to access through the DNS and https which points to the same IP I get a screen with: "loading.." and in the console:
"Uncaught SyntaxError: Invalid or unexpected token" - authentication.service.ts:29 but the service is totally fine.
the app is live at:
https://etype-solutions.com/ or https://81.199.117.250/
versions:
os: ubuntu 16.04 LTS / Windows 10 x64
browser: chrome v55
angular-cli: 1.0.0-beta.26
node: 6.9.4
npm: 3.10.10
typescript: 2.0.10
angular2: 2.3.1
It is redirecting to HTTPS version and the error are saying that it is trying to load HTTP (non secure) resources and that is blocked by the browser due to security issues.
Use //mylink.com instead http://mylink.com or https://mylink.com so you will use the current protocol and avoid this kind of problem.
I'm trying to run a sample app by using cordovas camera plugin and I got an error, when trying to debug on chromes emulator
Failed to load resource: the server responded with a status of 404 (Not Found)
(http://localhost:8000/android/www/css/images/ajax-loader.gif)
The correct path is css/images/ajax-loader.gif
You are debuging your application in chrome emulator. But you are using the ajax-loader.gif placed in platforms/andoroid/www/css/images change the location of the loader to www folder in the root folder.
css/images/ajax-loader.gif.
In chrome emulator, the files in www folder in the root of project is taken.
Change the location of loader and check whether the problem is solved or not