jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps
https://xel-toolkit.org
Other
682 stars 59 forks source link

electron Fetch API #23

Closed malublu closed 6 years ago

malublu commented 7 years ago

Fetch API cannot load file:///C:/Users/.../node_modules/xel/images/ring-throbber.svg. URL scheme "file" is not supported.

simple polyfill: https://github.com/github/fetch

or change to another solution, what think you about it?

jarek-foksa commented 7 years ago

I'm unable to reproduce this error, are you using Xel inside Electron app window or webview? How do you create that window/webview?

Also note that you must import Xel using <link rel="import" href="node_modules/xel/xel.html">, any other relative URL will not work until the project is migrated to ES6 modules.

malublu commented 7 years ago

simple:

  mainWindow = new BrowserWindow({width: 800, height: 600, icon: path.join(__dirname, 'icon.ico')})
  mainWindow.webContents.session.setProxy({pacScript:'file://' + __dirname + '/proxy.pac'}, function () {
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
    mainWindow.webContents.openDevTools()
    mainWindow.webContents.on('did-finish-load', function() {
      authProxyTested = false
    })
  })

and in the index html i load with:

<link rel="import" href="node_modules/xel/xel.min.html">

i also tried directly in the developer console:

fetch('node_modules/xel/images/ring-throbber.svg').then(function(response) {console.log(response);});

Fetch API cannot load file:///C:/Users/.../node_modules/xel/images/ring-throbber.svg. URL scheme "file" is not supported.
(anonymous) @ VM410:1
Promise__proto__: Promise[[PromiseStatus]]: "rejected"[[PromiseValue]]: TypeError: Failed to fetch
    at <anonymous>:1:1
VM410:1 Uncaught (in promise) TypeError: Failed to fetch
    at <anonymous>:1:1

electron not supports file fetch:

https://github.com/electron/electron/issues/3922

only with:


<script>
      const webFrame = require('electron').webFrame;
      webFrame.registerURLSchemeAsPrivileged('file', { bypassCSP: true });
 </script>

  <link rel="import" href="node_modules/xel/xel.min.html">
jarek-foksa commented 7 years ago

Does the error occur when you remove the mainWindow.webContents.session.setProxy part? Fetch API seems to be working correctly for me in windows created as follows:

let appWindow = new BrowserWindow()
appWindow.name = "app";
appWindow.loadURL(`file://${__dirname}/electron-app.html`);

Also, which version of Electron are you using?

jarek-foksa commented 7 years ago

Please reopen this bug if you can still reproduce it with current Xel version.

adrichm commented 6 years ago

Having this issue myself (Electron 1.6.11, 1.7.2 and 1.7.5 tried , current Xel). Any ideas of workarounds? I'd love to actually use xel, but not with registerURLSchemeAsPrivileged.

jarek-foksa commented 6 years ago

This issue was fixed in https://github.com/jarek-foksa/xel/commit/f8775220aa0681daaf4d7b0d7be2ba6ce7ec3329 (Xel 0.0.88).

However, it might break again in Electron 2.x: https://github.com/electron/electron/issues/9474

gopanc commented 6 years ago

If you are using electron you have to change the path in line 6580 at /nodemodules/xel/xel.min.js

From: return "node_modules/xel/images/icons.svg"; To: return "../node_modules/xel/images/icons.svg";