Develop Reference

PWA Service Worker - Failed to fetch - Issue with Facebook Pixel

I have the following PWA Service Worker (serviceWorker.js):
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
})
)
})
I don't want anything to load when offline, because it's a fully dynamic webpage, so offline it's unusable. So that's why I found that maybe this code is enough for the Service Worker, and I don't need any cached files. (Maybe that was a mistake?)
And actually it's working fine, at least when I open my webpage, Chrome pops up the message to install the application for my webpage - and it's also working fine.
But today I have realized that in the Console there are some errors regarding it:
The FetchEvent for "https://connect.facebook.net/en_US/fbevents.js"
resulted in a network error response: the promise was rejected.
Uncaught (in promise) TypeError: Failed to fetch at
serviceWorker.js:4:21
And marks this part in the serviceWorker.js: fetch(fetchEvent.request), and says: Failed to fetch.
GET https://connect.facebook.net/en_US/fbevents.js net::ERR_FAILED
Also when I wanted to make some changes in my Facebook Pixel, it said, it can't find the Pixel for my website. However it's there. And the only modification was to add the PWA-related codes.
And I also realized that since that day the visits of my webpage shown in Google Analytics started to drop down dramatically. Not 0 now, but I think in 1-2 days it will be 0.
What is the issue here with the Service Worker?
How can I fix it?
And what is the connection between this issue and my Facebook Pixel (and Google Analytics)?
Of course I tried to search for answers, but I could not find the solution for that particular issue.
Please help me fix this issue. Hopefully the root cause is the same, so one fix would solve all.
Thank you in advance.

I found the solution - I post it here, so maybe somebody will face this issue as well, and I want to help with the solution.
So it turned out, I have to provide an offline fallback page.
I found this article, I followed the steps, created the offline.html file, modified the serviceWorker.js file, and the issue is gone, Facebook Pixel is working fine again:
https://web.dev/offline-fallback-page/

Cypress.io: Server Error | 404 - File or director not found

I'm currently trying to automate the test for a pretty big webapplication (DMS) Document Management System. To explain the system a little bit: There is a loadbalancer which connect to one of two frontends. To be sure that will be no problems in my test I directly try to access frontend one. Now to my problem:
When trying to run all the tests (around 20 spec-Files) with the Test Runner and also when trying to run the tests via console with the following command: .\node_modules\.bin\cypress run --spec "cypress/integration/Basis/**/*" --browser chrome
Sometimes after a cy.visit() a Server Error comes up. That error also stops the tests on console from running and looks like it crashes cypress. The error is the following:
It's not possible that the resource is missing or somewhere else because most of the times the test works. Most of the time its a different test where the error comes up. The worst part is that I have no idea how to reproduce that error. And it looks like that problem is only appearing for me.
So please tell me if you have ever seen this message and maybe you can help me fix this problem. Thank you for your help.

This is caused by a bug in Cypress which causes usages of window.location.href and other Location methods to incorrectly use /__/ as the base URL.
You can try enabling the experimentalSourceRewriting config option to work around this, read here for more info: https://docs.cypress.io/guides/references/experiments.html#Configuration

SMART on FHIR client-js: Invalid Character Error on IE11

Note: The issue is also reported on GitHub. Please take a look at Git issue as well for current progress/investigation.
I'm using fhir-client v0.1.15 to develop a SMART on FHIR web application that would run in EHR launch scenario. For example in Epic Hyperspace simulator that uses IE to run the SMART application.
While testing my application locally(localhost) on IE11, I get a JavaScript error from within fhir-client.js.
SCRIPT1014: Invalid character
File: fhir-client.js, Line: 38113, Column: 3
Below are the two lines from code. 38112 & 38113 in order:
var ret = Adapter.get().defer();
var state = JSON.parse(sessionStorage[params.state]);
Any solution or workaround would be much appreciated.
Updated
Upon further investigation we found that sessionStorage is empty when line with JSON.parse executes. However, strange thing is why/how sessionStorage gets empty after redirection from authorization server. This only happens with IE11, everything works fine on Chrome though.
PS. Can someone please add a new tag SMART or SMARTonFHIR?

Though I couldn't find the exact root cause and solution but let me share the findings that helped me resolve this issue somehow.
The issue doesn't exist when I test my SMART application with redirect_uri(in FHIR.oauth2.authorize call) set to a staging server URL instead of localhost.
PS. I’m open to better, and more qualified answers for acceptance.

iOS: Javascript code in WKWebView got “query cancelled” error after selecting photo from photo library and before uploading to the server

I use Xcode 9.1(9B55), iOS 11.1 both simulator and real iPhone/iPad.
The website(HTML5+Javascript) I used in mobile safari acts perfectly. But in my iOS app(Objective-C), which uses WKWebView to access the same web page, and set all the "privacy - Photo Library Usage" and others, always got the error below after selecting photo from photo library and before uploading to the server:
[discovery] errors encountered while discovering extensions: Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled}
But something strange was that I had a successful run for just one time.
I've several threads about this issue, but have no clear solution. Someone said it's a bug of iOS 11.x, but I've tried it on iOS 9.x, the error was same.

I had the same issue on iOS 12.1. I spent a lot of time trying to figure out why I'm getting this error. I thought because of that error I can't upload an image to the server. But turned out on each try, the request fails with 401 status code because of permissions or additional http headers/cookies. In my case, this debug error meant nothing I thought(Maybe that's why additional argument OS_ACTIVITY_MODE = disabled in project scheme worked for other guys, because it just removed debug log from console). So, make sure you have a correct HTTP request with all permissions/headers as well. Maybe it will help you as It helped me. Good luck.

Failure installing the debug extension of your Crossrider Extension - Firefox

FF25.0, Fedora 18.
This just keeps going round in circles. The staging extension installs, and parts of it are active as the extension modifies a bit of the dom (I think even the background script is running too as the local storage is initialized). Not all of the extension works, such as the sidebar and other dom injection that should run on page load. But the debug mode page in crossrider fails to recognise the running extension.
I suspect this is due to a bug in my code but there appears to be no way to debug it. When I commented out the sidebar, it still showed briefly after another install, which makes me suspect a proxy/cache is getting in the way but adding an extra GET argument on the extension URL didn't help. I've tried adding debugger to extension.js. The console is empty. No errors are reported by firebug. The extension works fine in chrome, and I really don't want to go back to a blank extension and try adding bit by bit till it fails. There must be a simpler way such as making firefox just say, "here's your problem, right on line number X". Any ideas?
[EDIT]
After turning on some debug options, I've got errors in the console, but clicking on the offending file/line number just opens the "Source of:..." window. In google chrome I get the file in the debugger, can hit break points, refresh and catch the error as it happens. Better yet, how about a "break-on-exceptions" option that both works but also actually works.
[EDIT]
I finally got the Browser Debugger working. The first error is a NS_ERROR_XPC_BAD_OP_ON_WN_PROTO.

Well, to start actually getting messages you need to set some flags in "about:config" listed here: Setting_up_extension_development_environment
I'll copy a few...
javascript.options.showInConsole = true (this was already on for me)
browser.dom.window.dump.enabled = true
javascript.options.strict = true (there's also a debug version I turned on too)
devtools.chrome.enabled = true (nothing to do with google chrome)
devtools.debugger.remote-enabled = true (the important one, allowing Firefox->Web Developer->Browser Debugger, make sure to allow the remote debugger otherwise it undoes the config change)
devtools.errorconsole.enabled = true
extensions.logging.enabled = true
It looks like quite a few options have been removed too. This has at least got me started.
[EDIT]
This answer also mentions the "Web Developer->Browser Debugger" (which is currently blank - "no sources" - I have no idea) and "Web Developer->Browser Console" windows (just seems to have the same output as the in-window console).

Throw a giant try/catch around ALL your extension code. At least this allows the crossrider "staging" extension to install and be recognised.
Print the exception (I assume all the stupid about:config stuff has to be set for this to work)
appAPI.ready(function($) {
try {
...rest of extension code
}
catch (e)
{
console.log("#################", e);
}
}
Locate the error in the console, and click on the [object exception]. Note the line number (it won't be correct as other code is injected). Also note we've managed to print an exception and firefox failed to break on it. FFFFFFFFFFFFFFFFFFFF
Add some newlines approximately in the middle of the code.
Reload. Note the line number. If it's changed the error is after the newlines. If not the error is before.
Repeat from step 4 until the error is found.
Take a moment to reflect on the stupidity of this process. (this isn't exactly a comment directed at crossrider, more at the severe lack of simple web development tools and APIs currently available)