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.
Related
I'm using Cypress to run end-to-end tests on an our application. All test were good but we have a feature and with this feature user integrate their bank account via then they're landing our page and we're showing some extra stuff and it continues. Until bank integration, everything is fine. When it comes to integration I'm sending user via link to external provider, then I've got an error.
cypress -v 5.6.0
Refused to frame 'https://login.truelayer.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://somelink.github.io".
on config file "chromeWebSecurity": false
What I tried?
On csp.js file, I updated 'frame-ancestors': ['https://somelink.github.io, 'https://*.amazon.com',] and it didn't work.
Is there any way that I can tackle this?
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?
From React's documentation to make my application full PWA what I've done,
in src/index.js
serviceWorker.register();
in package.json, I've added homepage
"homepage": "https://react-test.devsenv.com/"
Assume that it is a fresh copy of create-react-app.
Since, Service worker is not registered and the error saying -
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js' failed to load.
at https://react-test.devsenv.com/service-worker.js:14:1
I've searched lot in the internet. But not get the exact solution. One more issue if I'm ok, is the file is not readable - https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js of google's api ? It is not responding, if I hit the url from browser.
Any one can give me a tips, what I've to setup in my cpanel or whatever..
I have been struggling to make push notifications work.
I am recieving the following error
; FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration).
I have already tried to google and applied https://stackoverflow.com/a/42264578/5192105
But still it works locally but not on the server.
The js file firebase-messaging-sw.js exists in the path:https://mobile-app.golocall.com/api/src/public/firebase-messaging-sw.js
I have used slim-php as backend framework.
Please help me out in resolving the error.
It tries to find the service worker file on the root of the application; hence the application tries to load
https://mobile-app.golocall.com/firebase-messaging-sw.js
while the actual file is located at
https://mobile-app.golocall.com/api/src/public/firebase-messaging-sw.js
EDIT:
You may be able to import the service worker like this:
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
If this doesn't work, you may need to declare your own service worker.
Here is a link to more information on the topic:
https://firebase.google.com/docs/cloud-messaging/js/receive