I’m a web developer and new to apps so excuse my ignorance and apologies if this is a stupid question.
I’ve setup a blank capacitorjs project, got all my emulators working (Android and iOS/Xcode) etc and now I cannot get the core plugins to work inside index.html.
Also when I include a locally hosted jQuery file in index.html I get localhost:// errors. Basically, not found.. for everything! When I link to the CDN it works.
My objective is to get my project to a blank slate where the index.html can make capacitor api calls eg alert(device info) etc. Any ideas where I am going wrong?
Index.html:
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="capacitor.js"></script>
<head></head>
<body>
<button id="button" style="width:500px; height:500px; background-color:gold;">TEST</button>
</body>
<script>
$("#button").on("click", (event) => {
// execute your functions
const info = await Device.getInfo();
console.log(info);
})
</script>capacitor.config.json
import { Camera } from '@capacitor/camera';
import { CameraResultType } from '@capacitor/camera';
import { Device } from '@capacitor/device';
const config: CapacitorConfig = {
"appId": "com.zenithapp.app",
"appName": "Zenith Mobile App",
"webDir": "www",
"bundledWebRuntime": true
};
export default config;Result in XCODE console when compile and run my Capacitorjs app:
⚡️ ------ STARTUP JS ERROR ------
⚡️ SyntaxError: Unexpected identifier 'Device'. Expected ';' after variable declaration.
⚡️ URL: capacitor://localhost
⚡️ localhost:27:0
⚡️ See above for help with debugging blank-screen issues
⚡️ [error] - {"line":27,"sourceURL":"capacitor://localhost"}
⚡️ WebView loaded