I'm creating an app visually similar to Alfred to manage and search for my bookmarks. Its working well, but when I do a search and open a bookmark, I immediately hide the app and when I invoke it again, it return to the default mode doing a visual flash. The reset to default is triggered right before hiding the app.
I hide the application like this : remote.app.hide() and I added a listener on win.hide in my components to reset the vue.
It works, but the reset is processed after the application show up again.
I don't know how to do it when the application is hide or to show up it right after the vue is reloaded.
If you have any clue, it would be great.
I created a sample project on Github you can clone and test this issue.
Github Project
I'm working on macOS at the moment.
Thank you.
I found an easy way, you cannot rely on the window.on('hide') event.
So in your shortcut registration, I made your app emit a custom event that your Vue.js will listen to reset your input before hiding the app:
main.js
const retShow = globalShortcut.register('CmdOrCtrl+Alt+V', () => {
if (!win.isVisible()) {
win.show()
} else {
app.emit('hide-window'); // Let the window hide the app
}
})
In your Vue.js app, in the created hook:
app.js
app.on('hide-window', function () {
vm.reset();
setTimeout(app.hide, 10);
});
Here my pull request: https://github.com/Cronos87/electron-vue-flash-issue/pull/1/files
Related
I am making a React Native app which talks to Spotify via this module: https://github.com/cjam/react-native-spotify-remote
The module has an event listener which allows us to listen to Spotify player state changes, for example:
import { remote as SpotifyRemote } from "react-native-spotify-remote";
// and in a React component:
SpotifyRemote.addListener("playerStateChanged", (state) => {
console.log(state);
});
The above works as long as our RN app is in focus. However, when the app is in the background (i.e. we are on a different app or the phone is locked), the event listner no longer gets triggered.
I am expecting the event listener to get triggered even when the app is running in the background but it isn't doing that.
Is there anyway to make this work even the app is not in focus? Thank you!
I am writing custom plugin and need to create CSS custom properties from inside of it. In SPA mode everything is fine, but SSR mode is where the troubles coming. What I need is just to put my method inside of a mounted() hook. Is it possible?
export default {
install(app, options) {
createCSSVariables()
function createCSSVariables(options) {
const root = document.documentElement // this can't be working on server side :(
root.style.setProperty('--font-family', options.font_family)
root.style.setProperty('---accent', options.colors.accent)
}
}
}
I am using nuxt and could just use 'client' flag in plugin, but since it is for UI library, this will not help much - in this scenario all the elements would flicker right after mount
I have an electron app that will just wrap a remote page while adding some extra features. With the following code the page loads and works. When the remote page fires some notifications using the notification API those notifications show up when the electron app is minimized. My problem is that when clicking on those notifications the app does not get put to front like it does when opening the remote page on any other browser directly. I could test this only for Ubuntu 19.10 Linux (Gnome 3).
Any idea if I need to configure something for that or if this is a bug with Electron/Ubuntu/Gnome?
const {app, shell, BrowserWindow} = require('electron');
let mainWindow;
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1024,
height: 786,
});
mainWindow.setMenu(null);
mainWindow.setTitle('My app – Connecting…');
mainWindow.loadURL('https://some.url.somwhere');
// Emitted when the window is closed.
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow);
First of it is NOT a good idea to wrap a remote page unless you really know what you are doing as if you were redirected to a malicious page the page would have access to run code in the operating system. I would suggest giving this a read to make sure you're being safe.
Secondly the notification HTML5 API (runs in renderer) and notification module (runs in main) both do not have default behaviour to bring the page to the front when the notification is clicked you must add this behaviour yourself.
Because your loading a remote page you're probably using the notification module therefore it would be accomplished like follows:
notification = new Notification({title: "Message from: "+result[i].messageFrom,body: messagebody,icon: path.join(__dirname, 'assets','images','icon.png')})
notification.show()
notification.on('click', (event, arg)=>{
mainWindow.moveTop()
mainWindow.focus()
})
I have problem in building electron application, which is made using electron.js and vue.js.
The development is almost done, so I need to build it and make production.
Basically, my project has license system, so when the program starts, users should activate it by entering license key. I wrote this part inside activate.html. So, inside public folder, there are two html files, one is default index.html, and the other is activate.html
Inside activate.html, when activation is success, startMain() javascript function is called. Inside this function, the program is navigated to main program, especially to index.html. This html file is Vue application, and then main program is started.
All this process is working fine in the development mode. But when it
comes to production, this is not working anymore. I probably know why this
happens, this is just because index.html is not available in
production mode when all these are built up.
Alternatively, I tried to load localhost:8080 inside
startMain(). But also this works fine in development mode, but unluckily, we don't have localhost server on production mode, so this
doesn't solve the problem.
This is startMain() inside activate.html
function startMain() {
window.__static = "index.html";
// Alternatively, we can use location.href on development mode.
// window.location.href = "http://localhost:8080/";
}
This is background.js ( electron main engine)
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1400,
height: 900,
titleBarStyle: "hiddenInset"
});
win.setMenuBarVisibility(false);
if (isDevelopment) {
// Load the url of the dev server if in development mode
// win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
win.loadURL(`file://${process.cwd()}/public/activate.html`);
// if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol("app");
// Load the index.html when not in development
win.loadFile("activate.html");
}
win.on("closed", () => {
win = null;
});
}
What I want is to make it run correctly in production mode.
Specifically, when the user finishes activation flow ( activate.html),
it should start main program ( index.html )
Please help me with this issue. I welcome any comments.
I built this application using vue-cli-plugin-electron-builder package
In Vue usually you use vue-router to switch between views. You set the BrowserWindow.location the first time, in background.js, but after that you are in the Vue app and you make router calls like this:
router.replace({ name: "index" }).catch(() => { });
It's hard to guess what to do in your case, without seeing the rest of your activate.html. You need to define router in your App and probably want to convert your activate.html into an activate.vue component and make it the proper first page of your App.
I think the cli-plugin boilerplate will call main.js where you will define your app and bootstraps it. You add router there:
import router from "./router";
window.$app = new Vue({
router,
In your bootstrap function you can also call something like router.replace({ name: "activate"}) to start your app with your activate vue component.
componentDidMount() {
Linking.addEventListener('url', event =>
this.handleOpenURL(event.url));
Linking.getInitialURL().then(url => {
console.log('url===',url);
if(url)
this.handleOpenURL(url);
});
}
handleOpenUrl is never called if the app is already open and I try to change the deep link Url. If the app is already not open then it opens the app and gets the URL.
Actually it was the issue with FBSDK overriding the method.
This solution worked for me.
https://github.com/react-navigation/react-navigation/issues/798#issuecomment-290363058
I was having this issue working on a detached Expo project because I had added the suggested code from https://facebook.github.io/react-native/docs/linking.html to the *AppDelegate.m but Expo already provides slightly different functions for handling URL events. Removing the code from the React Native docs made it work for me.