Блог

Главная - Вопросы по программированию - Как предоставить плагины Cordova для приложения Svelte?

Как предоставить плагины Cordova для приложения Svelte?

#cordova #svelte

#кордова #svelte

Вопрос:

У меня есть приложение cordova со svelte внутри, но у меня проблема с предоставлением cordova.plugins из cordova в svelte

Вот что я пробовал index.js

 const app = {


// Application Constructor
  initialize: function () {
    this.bindEvents();
  },
  bindEvents: function () {
    document.addEventListener("deviceready", this.onDeviceReady, false);
    document.addEventListener("offline", this.onDeviceOffline, false);
  },
  onDeviceOffline: function () {
    app.receivedEvent("No Internet");
    PHONEGAP.isOffline = true;
  },
  onDeviceReady: function () {
    app.receivedEvent("deviceready");
    console.log(cordova.plugins); // this return object plugins
    if (cordova amp;amp; cordova.plugins) {
      PHONEGAP.plugins = cordova.plugins;
      PHONEGAP.platform = cordova.platformId;
    }
},
  cordovaObject: function () {
    return cordova;
  },
  // Update DOM on a Received Event
  receivedEvent: function (id) {
    console.log("Received Event: "   id);
  },
};

index.html

 <script type="text/javascript" src="cordova.js"></script>
<script>
  let _showSplash = localStorage.getItem('init');
  let _lNotif = localStorage.getItem("notification");
  let _lUnreadMessage = localStorage.getItem("messages_unread");

  if(_showSplash){
    if(parseInt(_showSplash) == 0){
      localStorage.removeItem('init');
    }
  }else{
    localStorage.setItem('init', 1);
  }
</script>

<script>
var PHONEGAP = {
        plugins: false,
        platform: false,
        isOffline: false,
        messaging: false,
        notification: _lNotif ? JSON.parse(localStorage.getItem("notification")) : []
};
</script>
<script type="text/javascript" src="js/index.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js"></script>
<script type="text/javascript">
    
    app.initialize();
    console.log(cordova.plugins); //this return **undefined**


  
</script>

<script src="js/main.bundle.js"></script>

я новичок в cordova здесь, поэтому я не понимаю, почему я не могу вызвать cordova.plugins внутри моего приложения svelte (main.bundle.js ).

Также я попробовал вызвать объект cordova внутри приложения svelte, позвонив console.log(cordova) , и это сработало! я проверил консоль, и внутри нее есть объект plugins, но когда я вызываю console.log(cordova.plugins) , он возвращает undefined.

 cordova version 6.0.0
platformVesion 6.0.0
platformId browser (it has same error too with android platform)
phonegap cli version 9.0.0

результат phonegap plugins 

 cordova-plugin-androidx 2.0.0 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.1 "cordova-plugin-androidx-adapter"
cordova-plugin-battery-status 1.2.5 "Battery"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-dialogs 1.3.4 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-firebase-analytics 4.3.1 "FirebaseAnalyticsPlugin"
cordova-plugin-firebase-messaging 4.4.2 "FirebaseMessagingPlugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-inappbrowser 1.7.2 "InAppBrowser"
cordova-plugin-media-capture 1.4.3 "Capture"
cordova-plugin-network-information 1.3.4 "Network Information"
cordova-plugin-vibration 2.1.6 "Vibration"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-support-android-plugin 1.0.2 "cordova-support-android-plugin"
cordova-support-google-services 1.4.1 "cordova-support-google-services"

результат console.log(cordova) 

  {version: "6.0.0", platformVersion: "6.0.0", platformId: "browser", define: ƒ, require: ƒ, …}
    InAppBrowser: {open: ƒ}
    addConstructor: ƒ (func)
    addDocumentEventHandler: ƒ (event)
    addStickyDocumentEventHandler: ƒ (event)
    addWindowEventHandler: ƒ (event)
    callbackError: ƒ (callbackId, args)
    callbackFromNative: ƒ (callbackId, isSuccess, status, args, keepCallback)
    callbackId: 1855496235
    callbackStatus: {NO_RESULT: 0, OK: 1, CLASS_NOT_FOUND_EXCEPTION: 2, ILLEGAL_ACCESS_EXCEPTION: 3, INSTANTIATION_EXCEPTION: 4, …}
    callbackSuccess: ƒ (callbackId, args)
    callbacks: {}
    commandProxy: {add: ƒ, remove: ƒ, get: ƒ}
    define: ƒ (id, factory)
    exec: ƒ (success, fail, service, action, args)
    file: {applicationDirectory: "http://localhost:3000/", applicationStorageDirectory: null, dataDirectory: "filesystem:file:///persistent/", cacheDirectory: "filesystem:file:///temporary/", externalApplicationStorageDirectory: null, …}
    fireDocumentEvent: ƒ (type, data, bNoDetach)
    fireWindowEvent: ƒ (type, data)
    getOriginalHandlers: ƒ ()
    platformId: "browser"
    platformVersion: "6.0.0"
    plugins: {firebase: {…}}
    removeDocumentEventHandler: ƒ (event)
    removeWindowEventHandler: ƒ (event)
    require: ƒ (id)
    version: "6.0.0"
    __proto__: Object

редактировать
проблема здесь в том, что при вызове console.log(cordova) результирующего объекта внутри него находится объект plugins, но при вызове console.log(cordova.plugins) он возвращает undefined (все вызывается внутри main index.html файл).

Комментарии:

1. куда вы вызываете console.log(cordova.plugins) в index.html ? Я этого не вижу..

2. Извините, я редактирую свой код, консоль. вход в систему index.html а также index.js (onDeviceReady), в index.html cordova.plugins возвращает неопределенный , но в index.js (onDeviceReady) он возвращает все плагины object ( {firebase: (…)} вот так)

3. Хорошо, значит, все так, как я и думал, вероятно, потому, что на данный момент событие app.initialize() привязано deviceready , но оно еще не запущено. Ваши плагины будут доступны только после запуска события. Вам нужно убедиться, что deviceready это отправная точка выполнения вашего кода

4. Да, именно так я и думал, но я уже упоминал, что я новичок в cordova / phonegap, я не совсем понимаю, как дождаться готовности плагинов cordova (а затем инициализировать приложение svelte после этого), моя последняя попытка — переместить код инициализации svelte в функцию onDeviceReady, но приложение svelte не инициализируется, хотя вызывается device ready. onDeviceReady: function(){const svelteApp = new SvelteApp({...});}

5. К вашему сведению, я уже создаю новый проект cordova с настройками по умолчанию ( cordova create <project_name> добавьте браузер платформы и Android, а затем добавьте какой-нибудь плагин (cordova-plugin-firebase-messaging), но ошибка все та же, cordova.plugins возвращает undefined при вызове index.html (после app.initialize() ), но когда я вызвал в index.js (внутри onDeviceReady) он возвращает объект с плагинами внутри него.

Ответ №1:

Чтобы заставить svelte работать с cordova (cordova.plugins), я должен обернуть код инициализации svelte внутрь onDeviceReady (события deviceready)

main.js (внутри svelte src)

 import "./main.pcss";
import App from './App.svelte';

function onDeviceReady(){
    new App({
        target: document.body,
        hydrate: true
    });
}
document.addEventListener('deviceready', onDeviceReady, false);

В результате я, наконец, могу получить доступ к плагинам cordova в моем приложении svelte

App.svelte

 import { cordovaObject } from "./store.js";
.....
console.log(cordova.plugins); //just for testing, finally it works!
cordovaObject.set(cordova); //save cordova object inside store
.....

после этого я могу сохранить cordova объект внутри store, после чего я могу использовать все плагины, которые я хочу.
Конечно, я не думал, что это хорошее или плохое решение, но, по крайней мере, пока оно работает.