Hi guys,
My name is Reid and I am new to capacitor.
I have a PDA app I have integrated with Capacitor but with a number of challenges.
I need help to convert the following Capacitor codes to JS versions:
-
THE Back Key
addListener(‘backButton’, …)
How do I implement this please?
-
$(’#divname’).load(filename);
What is wrong with this code. It works fine but loads blank when Capacitor was implemented.
-
localStorage.getItem(key))
I want the capacitor version for this please.
-
localStorage.setItem(key, data);
I want the capacitor version for this.
-
Set orientation of device to Portrait
-
Hook the BackKey(false); //hook the back key
-
Popup Message
I need code for this please.
-
openUrl(…)
How do I implement this?
-
mkdir(…)
How do I implement this?
-
rmdir(…)
How do I implement this?
-
readdir(…)
How do I implement this?
-
vibrate(…)
How do I implement this?
-
Toast
I need code for this please.
Thank you in advance.
-Reid
Thanks Thomasvidas for your response.
Note: Source of codes: capacitor-site/index.md at 585ff272c6cf18649364717f3eb18ff9d8936c90 · ionic-team/capacitor-site · GitHub
My replies as follows:
-
Not possible in a PWA, only possible with the @capacitor/app plugin on Android.
ANSWER:
Please give me some codes to try.
-
Impossible to tell without your code.
ANSWER:
Please look inside the data.js file.
Its inside the function showebook(filename, svolume, fromlocalstorage).
On line 1786.
-
You can use LocalStorage with Capacitor.
ANSWER:
I wrote the follow code but they generate error:
async function retrieveValue(skey) {
//const checkName = async () => {
var sdata = await Storage.get({ key: skey });
return sdata;
//};
};
I call the function this way:
alert(retrieveValue(“k1”));
-
You can use LocalStorage with Capacitor.
ANSWER:
I wrote the follow code but they generate error:
async function storeValue(skey, sdata) {
//const setName = async () => {
await Storage.set({ key:skey, value:sdata });
//};
};
I call the function this way:
storeValue(“k1”, “Some Data”);
-
You can’t lock rotation in a PWA, but you can kind of fake it:
ANSWER:
I tried the following code but no good results. Please open the data.js file.
Its inside the Onstart() function in data.js. Line 2133
screen.orientation.lock(“portrait”);
-
Same as 1, Not possible in a PWA
-
You can use a , or any other custom UI on your web app. This is unrelated to Capacitor.
ANSWER:
I have decided to use a snakbar/toast instead. See the capacitorcodes.js file. Plase how do I implement the ff code?
async function showPopup() {
const showHelloToast = async () => {
await Toast.show({
text: ‘Hello!’,
});
};
}
-
The @capacitor/app-launcher plugin: Capacitor - build cross platform apps with the web.
ANSWER:
I have the following code but generates error:
async function openURL(){
try {
ret = await App.openUrl({
//url: ‘com.getcapacitor.myapp://page?id=ionicframework’,
url: ‘www.google.com’,
});
alert('Open url response: '+ ret);
} catch(e) {
alert('Open url error: '+ e);
}
}
-
The @capacitor/filesystem plugin: Capacitor - build cross platform apps with the web.
ANSWER:
I have written the following code in capacitorcodes.js. When called as mkdir() from
windows.onload it tells me that the directory already exist but I cant find it on my PC.
Please look inside the capacitorcodes.js file
async function mkdir(){
try {
let ret = await Filesystem.mkdir({
path: ‘secrets’,
directory: Directory.Documents,
recursive: false // like mkdir -p
});
} catch(e) {
//alert(Directory.Documents);
alert(‘Unable to make directory’+ e);
}
}
-
The @capacitor/filesystem plugin: Capacitor - build cross platform apps with the web.
ANSWER:
I have written the following code in capacitorcodes.js. When called as mkdir() from
windows.onload it tells me that the directory already exist but I cant find it on my PC.
Please look inside the capacitorcodes.js file
async function rmdir() {
try {
let ret = await Filesystem.rmdir({
path: ‘secrets’,
directory: Directory.Documents,
recursive: false,
});
} catch(e) {
console.error(‘Unable to remove directory’, e);
}
}
-
The @capacitor/filesystem plugin: Capacitor - build cross platform apps with the web.
ANSWER:
I have written the following code in capacitorcodes.js. When called as mkdir() from
windows.onload it tells me that the directory already exist but I cant find it on my PC.
Please look inside the capacitorcodes.js file
async function readdir() {
try {
let ret = await Filesystem.readdir({
path: ‘secrets’,
directory: Directory.Documents
});
} catch(e) {
console.error(‘Unable to read dir’, e);
}
}
-
The @capacitor/haptics plugin: Capacitor - build cross platform apps with the web
ANSWER:
I have the following codes. Please look in data.js line 3832:
function vibrateDevice(vibratetype){
if (window.navigator && window.navigator.vibrate) {
if(vibratetype.toUpperCase()==“SHORT”){
navigator.vibrate(1000);
}else if (vibratetype.toUpperCase()==“LONG”){
navigator.vibrate([1000, 500, 1000, 500, 2000]);
}
} //else {}
}
I call as follows:
vibrateDevice(“long”);
-
The @capacitor/toast plugin: Capacitor - build cross platform apps with the web
ANSWER:
I have the following codes in my capacitorcodes.js file.
async function showPopup() {
const showHelloToast = async () => {
await Toast.show({
text: ‘Hello!’,
});
};
}
My folder structure
testapp
package-lock.json
package.json
capacitor.config.json
webpack.config.js
.gitignore
README.md
ios
android
node_modules
src
index.js
www
index.html
manifest.json
css
font-awesome
Img
js
data.js
capacitorcodes.js
main.js
I have attached my project for perusal. Kindly take a look
Here is a link to the project please:
