Develop Reference

os.platform returns browser instead of actual OS - React & Electron

I am trying to retrieve the appdata folder location for the application, and since each os has a separate path for the appdata or application support folder, I tried retrieving the os type to specify which path to use. The issue is os.platform() returns 'browser'. I have tried running it on windows and mac, but they all return browser. If i run process.platform in electron.js it gives me the correct os, but in react I get browser. How can I get the proper OS?

In a browser you can use a combination of navigator.platform, navigator.userAgent, and navigator.userAgentData.platform to get the information you want, but it might take some testing and parsing.
AFAIK, navigator.userAgentData.platform is available only on Chrome/Chromium-based browsers, but gives the most straight-forward result when available.
Checking which platform you're using, rather than checking for specific features, is generally consider not to be a good idea -- but I've found it hard to avoid sometimes myself, especially when working around platform-specific quirks and bugs.

This is because you are running process.platform in the renderer process.
In order to get the correct value you need to run platform.process either on main process (usually the background.js file) or via #electron/remote, like this:
window.require('#electron/remote').process.platform
#electron/remote's usage depends on your electron version, I recommend you to check #electron/remote readme.

Have you tried using Electron's app.getPath(name) method?
This method will return the users application data directory.
Only once the app is "ready" can you retrieve this path.
// Electron module(s).
const electronApp = require('electron').app;
// Application is now ready to start.
electronApp.on('ready', () => {
// Get the users app data directory.
let appData = electronApp.getPath('appData');
// Get the users home directory.
let home = electronApp.getPath('home');
})

How to make a Walkthrough Introduction Slider in Ionic Vue Application?

I have seen most of the mobile application has an intro slider when we first time installs the app.
I searched on google but all of them are old version of Ionic with Angular.
I'm very confused about where to put the component and how should I manage the state.
I'm using Capacitor in my application and I think the capacitor has storage.
I also want to know what is the proper flow of doing this thing.
Thanks in advance.

To remember or track if the slider was shown before you have to store some kind of information to the device. You can use the localStorage or capacitor storage plugin. I will recommend using the plugin as localStorage data might get removed by the operating system or user after some time.
Here is the process to achieve this using the plugin.
Install and sync the plugin
If you are using the Capacitor version 2 or less, you don't have to install it.
npm install #capacitor/storage
npx cap sync
Use it like this
import { Storage } from '#capacitor/storage';
const { value } = Storage.get({
key: 'introShowed',
});
if (!value) {
// logic to show the intro goes here
// set the value to true so next time this code block will not be executed
Storage.set({
key: 'introShowed',
value: true,
});
}

When main layout is created you can store an value to Storage.
And after that you can check for it.

Reading pdf from url with node.js using PDF.js

I'm trying to extract the text of a pdf from the pdf's url. Following the example on the pdf.js website, i understand how to render a pdf on client-side, but I'm running into issues when I do this server-side.
I downloaded the package using npm i pdfjs-dist
I tried the code below as a simple example to load the pdf:
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
var pdfjsLib = require("pdfjs-dist")
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function (pdf) {
console.log(pdf);
}).catch(function (error){
console.log(error)
})
But when I run this, I get the following error:
message: 'The browser/environment lacks native support for critical functionality used by the PDF.js library (e.g. `ReadableStream` and/or `Promise.allSettled`); please use an ES5-compatible build instead.',
name: 'UnknownErrorException',
details: 'Error: The browser/environment lacks native support for critical functionality used by the PDF.js library (e.g. `ReadableStream` and/or `Promise.allSettled`); please use an ES5-compatible build instead.'
Any ideas on how to go about doing this? All I'm trying to do is extract the text of a pdf from it's URL. And I'm trying to do this server side using nodejs. Appreciate any input!

You need to import the es5 build of pdf.js. The code below should work:
var pdfjsLib = require("pdfjs-dist/es5/build/pdf.js");
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function (pdf) {
console.log(pdf);
}).catch(function (error){
console.log(error)
})
Also check out https://github.com/mozilla/pdf.js/blob/master/examples/node/getinfo.js for a working example with node.js

I had the same problem (The browser/environment lacks native support for critical functionality used by the PDF.js library (e.g. ReadableStream and/or Promise.allSettled); please use an ES5-compatible build instead.) but with Angular 8 so here I leave the solution in case someone needs it:
packaje.json configuration:
Angular versión: 8.2.14
pdfjs-dist: 2.4.456
component:
import * as pdfjs from 'pdfjs-dist/es5/build/pdf';
import { pdfjsworker } from 'pdfjs-dist/es5/build/pdf.worker.entry';
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsworker;

I've also faced the same issue in latest version of pdfjs-dist (2.8.335) while using it in a node js project and as mentioned in other answers that we need to change path to fix this.
But in my case path - pdfjs-dist/es5/build/pdf didn't work.
In latest version it got changed to pdfjs-dist/legacy/build/pdf.js

Quasar PWA Workbox route exclude

I'm pretty new to javascript programming, I managed to make a PWA type application, made with Quasar, and now I'm looking for a solution to exclude some routes. I'm trying to exclude for example "/registerWoE" from appearing the install button. My app is purposed to be a B2C app.
Case 1: If a Client wants to register on the app via path above, provided by an employee I don't want the Install button to appear.
Case 2: If an Employee access "/admin" path, the Install button can appear and the Employee can install his application in the phone / PC for easier access.
I found that I need to change to "/src-pwa/custom-service-worker.js", but I couldn't figure out how to exclude that path.

You can add this snippet to the pages you want to ignore.
See beforeinstallprompt on MDN
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e; // if you want to automate showing it later
});

Cordova App launching Google App

After using the below code. App is launching the native android map showing the app with passed lat and long value.but my problem is after clicking on the nav option the 'from' is blank but 'to' should be coming as my passed value. But it is coming as blank value.
window.location = 'geo:40.765819,-73.975866'

If you are willing to use Cordova plugins, then I would suggest taking a look at the Launch Navigator plugin.
It allows you to do exactly what you want, but also allows you to launch other supported apps and even allows you to prompt the user with a list of applications to choose from.
There is an example in the documentation, showing how you can open a specific application, like Google Maps. For your convenience, I have also posted it below.
launchnavigator.isAppAvailable(launchnavigator.APP.GOOGLE_MAPS, function(isAvailable) {
var app;
if(isAvailable) {
app = launchnavigator.APP.GOOGLE_MAPS;
} else {
console.log("Google Maps not available - falling back to user selection");
app = launchnavigator.APP.USER_SELECT;
}
launchnavigator.navigate([40.765819, -73.975866], {
app: app
});
});
In this piece of code, the user will still be given a choice to pick another app, if Google Maps is not available.
There is also an AngularJS wrapper available for this called ngCordova, installation instructions are here and documentation about the wrapper for the Launch Navigator plugin can be found here.