When I want to send something to the main I call this from component window.myAPI.addUser(formData)
//electron.preload.js
contextBridge.exposeInMainWorld('myAPI',{
addUser: (formData) => {
ipcRenderer.invoke('add-user', formData)
},
})
And
//electron-main.js
ipcMain.handle('myAPI:add-user', (formData) => {
knex('users').insert(formData).then((result)=> {
console.log(result)
}).catch((err)=>{
console.error(err);
})
})
How can I listen any events from ipcMain inside my component?
I could not find any documentation about this in Quasar website
this.$q.electron.ipcRenderer.invoke( 'blablabla' )
this.$q.electron.ipcMain.invoke( 'blablabla' )
Related
I hava a pwa with this sw.js:
const info = "versione: 1.0.0 data: 07-01-2020 12:46";
const CACHE = "pwa-offline";
const pages = [
// some files
];
self.addEventListener("install", function (event) {
//console.log("Install Event processing");
self.skipWaiting();
event.waitUntil(
caches.open(CACHE).then(function (cache) {
//console.log("Cached offline page during install");
return cache.addAll(pages);
})
);
});
self.addEventListener("activate", (event) => {
});
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET") return;
event.respondWith(
fetch(event.request)
.then(function (response) {
return fromCache(event.request);
})
.catch(function (error) {
//console.log("Network request Failed. Serving content from cache: " + error);
return fromCache(event.request);
})
);
});
async function fromCache(request) {
// Check to see if you have it in the cache
// Return response
// If not in the cache, then return error page
const cache = await caches.open(CACHE);
const matching = await cache.match(request);
if (!matching || matching.status === 404) {
return Promise.reject("no-match");
}
return matching;
}
async function updateCache(request, response) {
const cache = await caches.open(CACHE);
return cache.put(request, response);
}
and index.html with this code inside:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./sw.js")//, {updateViaCache: 'none'})
.then(reg => {
//console.log("Registration successful", reg);
})
.catch(e =>
console.error("Error during service worker registration:", e)
);
} else {
console.warn("Service Worker is not supported");
}
</script>
I upload the pwa in a firebase site. When I change the sw.js (e.g. changing the date of versionDate, in this site https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle I read: "Your service worker is considered updated if it's byte-different to the one the browser already has. (We're extending this to include imported scripts/modules too.)") and I upload, I see the new service worker is changed. But when I make a second change in sw.js and upload, the sw.js is not changed, so I can do only an update on sw.js and so to the whole site (because the sw.js caches all files of the site during the install process).
How can I update my site any time I want?
UPDATE: I watched that the problem is in android phone in desktop is ok.
UPDATE: Now also it works on android but the update is not immadiate. I see the update after some hours.
Your service worker caches all static files on your website. Consequently, you will need to edit your sw.js file whenever you are updating your website. One common way to do this is to attach a version number to your static cache name, for example pwa-offline-v1, then bump up the version number in the sw.js file whenever you are pushing an update to the site. This creates a new cache and stores the updated static files to it. You can then add an activate event listener on the service worker to delete the former cache using a function like this.
const info = "versione: 1.0.0 data: 07-01-2020 12:46";
const CACHE = "pwa-offline-v1";
const pages = [
// some files
];
self.addEventListener("install", function (event) {
//console.log("Install Event processing");
self.skipWaiting();
event.waitUntil(
caches.open(CACHE).then(function (cache) {
//console.log("Cached offline page during install");
return cache.addAll(pages);
})
);
});
self.addEventListener("activate", (event) => {
event.waitUntil(
Promise.all(
caches.keys().then((cacheNames) => {
cacheNames
.filter(cacheName => cacheName.startsWith('pwa-offline-') && cacheName !== CACHE)
.map(cacheName => caches.delete(cacheName))
})
)
);
});
I would like to open a new browser window from inside a service worker, depending on the information in the http request that the service worker has intercepted, for example:
// inside service worker:
self.addEventListener('fetch', function (event) {
if (event.request.url.indexOf('trigger=') > -1) {
// OPEN A NEW BROWSER WINDOW...
event.respondWith(
new Response(JSON.stringify({ triggered: event.request.url }), {
headers: { 'Content-Type': 'application/json' },
}),
)
} else {
event.respondWith(
fetch(event.request).then(function (response) {
return response
}),
)
}
})
From what I have read, it seems that the only way to do this, is to click on a notification that is displayed as a result of having received a push message. That is to, you register a "notification click event" listener, which will allow you to pop open a new window? see here for more info.
Does anyone know if there is a way to do this without the need for any sort of push notification?
I figured it out, it's fairly simple actually:
// inside service worker:
self.addEventListener('notificationclick', e => {
e.notification.close()
clients.openWindow('http://localhost/')
})
self.addEventListener('fetch', function (event) {
if (event.request.url.indexOf('trigger=') > -1) {
self.registration.showNotification('Click here to open the app')
event.respondWith(
new Response(JSON.stringify({ triggered: event.request.url }), {
headers: { 'Content-Type': 'application/json' },
}),
)
} else {
event.respondWith(
fetch(event.request).then(function (response) {
return response
}),
)
}
})
You need to request permission to display notifications when registering the service worker of course, but otherwise it works.
Everything seems to be right and the files are being cached but it just doesn't work offline. Am I missing something obvious?
the cache.addAll did not want to work with my const FILES_TO_CACHE but do work when I put them in directly. Thus the repeated code.
Here is my service worker file:
const FILES_TO_CACHE = [
"/",
"/index.html",
"/style.css",
"/db.js",
"/index.js",
"/manifest.webmanifest"
];
const CACHE_NAME = "static-cache-v2";
const DATA_CACHE_NAME = "data-cache-v1";
// install
self.addEventListener("install", function(evt) {
evt.waitUntil(
caches.open(CACHE_NAME).then(cache => {
console.log("Your files were pre-cached successfully!");
return cache.addAll([
"/",
"/index.html",
"/style.css",
"/db.js",
"/index.js",
"/manifest.webmanifest"
]);
})
);
self.skipWaiting();
});
// activate
self.addEventListener("activate", function(evt) {
console.log("activated");
evt.waitUntil(
caches.keys().then(keyList => {
return Promise.all(
keyList.map(key => {
if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {
console.log("Removing old cache data", key);
return caches.delete(key);
}
})
).catch(err => console.log(err));
})
);
self.clients.claim();
});
// fetch
self.addEventListener("fetch", function(evt) {
console.log("fetched", evt.request.url);
if (evt.request.url.includes("/api/")) {
evt.respondWith(
caches
.open(FILES_TO_CACHE)
.then(cache => {
return fetch(evt.request)
.then(response => {
// If the response was good, clone it and store it in the cache.
if (response.status === 200) {
cache.put(evt.request.url, response.clone());
}
return response;
})
.catch(err => {
// Network request failed, try to get it from the cache.
return cache.match(evt.request);
});
})
.catch(err => console.log(err))
);
return;
}
});
link in html:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js").then(function() {
console.log("Service Worker Registered");
});
}
</script>
I also have my manifest linked in the HTML file.
Thank you in advance for any help you can provide!
If you look at the last line of code here:
// fetch
self.addEventListener("fetch", function(evt) {
console.log("fetched", evt.request.url);
if (evt.request.url.includes("/api/")) {
you see that there's a very simple mistake – your Service Worker is ONLY responding to requests that start with "/api/". If they don't, the SW doesn't touch them. Thus only "/api/" calls work offline (which doesn't make any sense :-), apis being mostly dynamic, right?).
(It is possible that there's another bug in the code of course, but this is a good point to start making changes.)
I am trying to get aServiceWorker to work from a subdirectory in webroot named appdashboard ... the serviceworker installs, runs and is visible from chrome://serviceworker-internals/, but its Navigator.serviceWorker.controller is null so I cannot communicate with it. If I don't restrict the scope (and move my serviceworker file to webroot) it works fine.
const serviceWorker = navigator
.serviceWorker
.register('appdashboard/dashboard_serviceworker.js', { scope: 'http://localhost/appdashboard/' })
.then((swReg) => {
console.log('[Service Worker (Dashboard)] service worker is registered', swReg);
swRegistration = swReg;
if (navigator.serviceWorker.controller != null) {
console.log("controller is working")
}
if (navigator.serviceWorker.controller == null) {
console.log("controller is NULL!") // <<<< its null :(
}
})
I simplified my serviceworker as much as possible to diagnose the issue, and controller is null even with this bare bones worker
self.addEventListener('message', function (event) {
console.log('got message')
});
self.addEventListener('activate', function (event) {
console.log('serviceworker activate')
event.waitUntil(self.clients.claim()); // Become available to all pages
});
self.addEventListener('install', function (event) {
console.log('install')
});
self.addEventListener('fetch', function (event) {
console.log('fetch')
});
self.addEventListener('push', (event) => {
console.log('received push')
});
self.addEventListener('notificationclick', function (event) {
console.log('registered notification click!')
});
I was using MVC routing so that my URL path was localhost/dashboard but my file structure was /appdashboard/, now I serve up an index.html from /appdashboard/ webroot and controller initializes.
This is the line that set me on the right path.
Remember the scope, when included, uses the page's location as its
base. Alternatively, if this code were included in a page at
example.com/product/description.html, the scope of './' would mean
that the service worker only applies to resources under
example.com/product.
I am trying to do a simple ipc.send and ipc.on but for some reason I am getting undefined on this electron require.
libs/custom-menu.js:
'use-strict';
const BrowserWindow = require('electron').BrowserWindow;
const ipcRenderer = require('electron').ipcRenderer;
exports.getTemplate = function () {
const template = [
{
label: 'Roll20',
submenu: [
{
label: 'Player Handbook',
click() {
console.log('test');
},
},
],
},
{
label: 'View',
submenu: [
{
label: 'Toggle Fullscreen',
accelerator: 'F11',
click(item, focusedWindow) {
if (focusedWindow) {
focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
}
},
},
{
label: 'Toggle Developer Tools',
accelerator: (function () {
if (process.platform === 'darwin') {
return 'Alt+Command+I';
}
return 'Ctrl+Shift+I';
}()),
click(item, focusedWindow) {
if (focusedWindow) {
focusedWindow.toggleDevTools();
}
},
},
{
label: 'Reload',
accelerator: 'F5',
click() {
BrowserWindow.getFocusedWindow().reloadIgnoringCache();
},
},
],
},
{
label: 'Random Generators',
submenu: [
{
label: 'World Generator',
click() {
ipcRenderer.send('show-world');
},
},
],
},
];
return template;
};
The error is
cannot read property 'send' of undefined.
The BrowserWindow module is only available in the main process, the ipcRenderer module is only available in the renderer process, so regardless of which process you run this code in it ain't gonna work. I'm guessing since ipcRenderer is not available you're attempting to run this code in the main process.
I know this answer might have been too late for you but for other
If you're trying access any of main process modules from renderer process you will need to go through remote module,
const {BrowserWindow} = require('electron').remote
see documentation remote
Just for those who can't get this to work in react app ipcRenderer or in any environment that requires preload file.
preload setup
These lines worked for me:
app.commandLine.appendSwitch('ignore-certificate-errors', 'true')
app.commandLine.appendSwitch('allow-insecure-localhost', 'true')
In the renderer process, the script tags that have the "require" statement needs to be:
<script type="javascript"></script>
Placing your call to require in a script tag without the type set doesn't work.