I am attempting to use a Web Worker to offload some CPU intensive calculations into a separate thread. For a little context, I am taking an audio stream from getUserMedia and saving it into a file to be uploaded to my service after it is complete. I am able to retrieve the stream from the user and play it back via the WebAudio API and through an HTML5 player, but now I need to take the next step of saving it into a file.
The problem:
My main service is running over an HTTPS connection, since it is restricted to signed in users only. I have a worker script that does what I need it to, and I am attempting to load the script in via a relative path into my worker. I am receiving the following error
Mixed Content: The page at 'https://someurl.com:1081/some/path' was loaded over HTTPS,
but requested an insecure Worker script
'http://someurl.com/some/path/lib/assets/javascripts/worker.js'.
This request has been blocked; the content must be served over HTTPS.
I figured it was because I was using a relative path in my code like so:
worker = new Worker('lib/assets/javascripts/worker.js');
I wanted to rule this out so I made the following change:
worker = new Worker('https://someurl.com:1081/some/path/lib/assets/javascripts/worker.js');
This did not solve my error. It appears that the Worker is loading my script via HTTP no matter what url location I attempt to use. I couldn't find any reference on how to use the Web Worker via HTTPS, so I am hoping someone can provide some insight.
Possible Solution
I do want you to know there is a possible solution, but it seems a bit hacky to me. I can load my worker script up as a Blob and pass that directly into the Worker. If this is the only solution, I can make it work. But I was hoping to find a way to make the script load via HTTPS.
Have you tried
//someurl.com:1081/some/path/lib/assets/javascripts/worker.js
instead of
https://someurl.com:1081/some/path/lib/assets/javascripts/worker.js
Just something I found here,
Deezer content is served over HTTP
I solved this. The error itself was misleading and caused me to go down a rabbit hole looking for the solution.
The issue here actually stems from the way I have this service configured. The service that starts the web worker is actually proxied behind another service, and all requests go through the parent service. This works great for most requests, but was causing an error in this case. Instead of forwarding the request on this port to my app, the web worker was attempting to download the worker script from the parent service itself. This means the error stemmed from the fact that the script wasn't found, not that the protocol was incorrect.
To solve this, I had to pass in a localized script location from Rails using its asset pipeline. This allowed the worker to grab the script and actually work.
Related
I'm setting up a micro-frontend solution which contains the main integration app which resides in the main window and a bunch of iframes with services (sub apps). This services are SPA's but not necessary and are served from another domains but I can control them. The main app needs to get some configuration from underlying services and it works the following way - the couple of embedded urls integrated into index.html and the main app knows what to load then it needs to wait for events through postMessage API, one per each iframe.
The problem here is that the main app doesn't know if something goes wrong inside an iframe during initialisation stage: the service is down due to different reasons and the app isn't loaded inside an iframe, or the app inside an iframe lost a connection to the server or JS syntax error. The only way to detect that is just using a timeout, but that's not the best UX. A user will wait for example for 30 seconds before seeing an error.
Are there any possible ways to gain an access to iframes from the main window? May be by using CORS? It's clear for XHR requests but I haven't found info regarding iframes and CORS.
Are there any possible ways to gain an access to iframes from the main window?
Only postMessage, which you are already using.
May be by using CORS? It's clear for XHR requests but I haven't found info regarding iframes and CORS.
You cannot use CORS to grant cross origin access via frames.
I am in a tricky situation. I have a service worker in my page where I can init my cache with a postmessage (so on a new version, without any change on my service worker file, I can add or remove the file from my cache).
But here my problem, I need to do the same thing on amp version on my page. I figured out how to call and register my service worker, but couldn't find a way to make my postmessage call.
Here my question: is there any solution to make a post message call from an AMP page ?
if somebody as the same problematic here how I solve it :
No more postMessage, as it's impossible to do in AMP be i store data in a json file in my server and Service worker ask the file (without any cache) to get my data
I have an AngularJS app, and it uses Parse as the backend. I've made it offline friendly by using service worker - it uses sw-precache for caching the static resources during build time, and also uses runtime caching for certain whitelisted URLs (such as the parse API backend), and some other URLs.
Even with this in place, the runtime caching does not take effect once the app goes offline - it still tries to reach the /config URL on my parse server. I've tried whitelisting the URL with this pattern, and it still does not cache the response.
My (Grunt generated) service worker snippet is
// Runtime cache configuration, using the sw-toolbox library.
toolbox
.router
.get(/^https:\/\/xxx\.xxx\.com/, toolbox.networkFirst,
{"networkTimeoutSeconds":10,
"cache":
{
"origin":"https://xxx.xxx.com",
"maxEntries":10,
"name":"main-cache",
"maxAgeSeconds":1800
}
});
According to the docs, this config will cache any request to the domain in the whitelisted URL. I've tried playing around with maxAgeSeconds and maxEntries, and still have not seen the client caching as many mentioned there.
The idea is to have a completely offline and working AngularJS + Parse.com application that works on page reloads (we already use a lot of IndexedDb, localstorage while offline). Now the application works as long as the page is not reloaded, but the minute that it is - it makes an API call to the /config URL and the page remains blank with a few console error messages.
Would appreciate any help on this.
My web app is like this:
I have an Apache server running on port 80, with virtual hosts for my domain and different subdomains, including port 443 for SSL.
I have a nodejs application running on port 5000.
All traffic to my main domain is redirected using proxypass from apache to nodejs.
NodeJs then loads Service Workers.
Problem:
ON first load of application in online mode it works properly.Shows Service worker registered over the complete domain message as expected. Even for some css,js and img it return response fromServiceWorker.
But now when I open same page on offline mode service worker dont play it part to open the web app.
Error:
1. Uncaught (in promise) TypeError: Failed to fetch(…).
An unknown error occurred when fetching the script for service-worker file.
Any help on this regard to implement this properly will be be helpful.
Your browser will attempt to refetch the JavaScript file corresponding to the current service worker for every navigation request. You can read more about that in this Stack Overflow answer.
What you're seeing logged reflects the fact that the JavaScript for your service worker can't be fetch (which makes sense, because you're offline). What happens in that case is that the previous JavaScript that your browser already knows about and has cached will be reused, and your service worker should function as expected. The noise in the DevTools console about the service worker's JavaScript failing to be fetched can be ignored.
If you're seeing any failures related to the actual function of the service worker itself (like, retrieving cached resources are failing), then that would point to an issue with your implementation. But it doesn't sound like that's what's being logged.
Make sure the html files are cached, and that the service worker script is in the top level.
How can I integrate chrome push notification (GCM) on my HTTP site. That would be great help if i could get any sample related to this? According to Google documents this is only for HTTPS sites, but is there any way to integrate push on HTTP site?.
Please help me, I am stuck here?
The Web API needs a service worker so the piece that receives the events needs to be https for sure.
I am not sure if you would be able to register via http through some iframe trickery but I would not count on it. Even if you manage to do it there are no guarantees that it will keep working since as you say the documentation says it is only for https sites.
It is possible only with https site. But the workaround is this you will have to maintain one https domain. For Http site, you will use an iframe or Modal for getting a subscription and redirect to your https service worker. This is the only way to do this.