6 Replies Latest reply on Mar 20, 2017 11:31 PM by giapn66254205

    phonegap serve not work well with materialize

    giapn66254205

      Hi, i use materialize(http://materializecss.com/) with phonegap and it work well after i built but i cant test them by phonegap app. It not show the UI after phonegap serve.

      Browser work well but not work in phonegap app to test.

      Can anyone give me some advise to solve it?

        • 1. Re: phonegap serve not work well with materialize
          surajpindoria Adobe Employee

          How are you including the CSS in your project? The serve command should zip up all your projects assets in the www directory and send that down to the device.

          • 2. Re: phonegap serve not work well with materialize
            giapn66254205 Level 1

            I included them in css folder (www/css/cssname.css)

            like Normal:

             

            <link href="css/material-icon.css" rel="stylesheet">
            <link rel="stylesheet" href="css/materialize.min.css">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="css/materialize-custom-vbi.css">
            <link rel="stylesheet" type="text/css" href="css/index.css"/>

            • 3. Re: phonegap serve not work well with materialize
              surajpindoria Adobe Employee

              I just tried including Materialize CSS in a project and served to the PhoneGap Developer App. I followed their docs and was able to load the CSS fine, Getting Started - Materialize. Are you seeing any errors?

              • 4. Re: phonegap serve not work well with materialize
                giapn66254205 Level 1

                This is the log when i use phonegap app to serve:

                [phonegap] starting app server...

                [phonegap] listening on 10.0.2.157:3000

                [phonegap]

                [phonegap] ctrl-c to stop the server

                [phonegap]

                [phonegap] [console.warn] Content Security Policy has been modified to be: <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.

                gstatic.com * ws:;style-src 'self' 'unsafe-inline' data: blob:;media-src *;img-src 'self' data: content:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">

                [phonegap] [console.warn] Content Security Policy has been added: <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;img-src 'self' data:

                content:;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">

                [phonegap] [console.warn] Content Security Policy has been added: <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;img-src 'self' data:

                content:;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">

                [phonegap] 200 /__api__/appzip

                [phonegap] 200 /socket.io/socket.io.js

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCt-c9

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCt-gT&sid=Z3BGg8YxJat3uItJAAAA

                [phonegap] [console.log] Received Event: deviceready

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCt-k5&sid=Z3BGg8YxJat3uItJAAAA

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCt-jc&sid=Z3BGg8YxJat3uItJAAAA

                 

                 

                This is the result: and Materialize not work. (only run to socket.io and done)

                Screenshot_2017-03-02-09-36-16-435_com.adobe.phonegap.app[1].png

                 

                This is what happen when i use browser:(run all correct)

                 

                [phonegap] starting app server...

                [phonegap] listening on 10.0.2.157:3000

                [phonegap]

                [phonegap] ctrl-c to stop the server

                [phonegap]

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCwtWa

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCwtqP&sid=QFCvUtu7X1nFMlLcAAAA

                [phonegap] 200 /

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCwtqc&sid=QFCvUtu7X1nFMlLcAAAA

                [phonegap] 200 /css/material-icon.css

                [phonegap] 200 /css/style.css

                [phonegap] 200 /css/materialize-custom-vbi.css

                [phonegap] 200 /css/materialize.css

                [phonegap] 200 /css/index.css

                [phonegap] 304 /socket.io/socket.io.js

                [phonegap] 200 /js/init.js

                [phonegap] 200 /cordova.js

                [phonegap] 200 /js/jquery-3.1.1.min.js

                [phonegap] 200 /js/index.js

                [phonegap] 200 /js/materialize.min.js

                [phonegap] 200 /img/logo%20vbi.png

                [phonegap] 200 /fonts/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

                [phonegap] 200 /fonts/roboto/Roboto-Regular.woff2

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCwtwa

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCwtx7&sid=ONQTbCzTH5JrGFROAAAB

                [phonegap] 200 /cordova_plugins.js

                [phonegap] 200 /plugins/cordova-plugin-battery-status/www/battery.js

                [phonegap] 200 /plugins/cordova-plugin-battery-status/src/browser/BatteryProxy.js

                [phonegap] 200 /plugins/cordova-plugin-camera/www/CameraConstants.js

                [phonegap] 200 /plugins/cordova-plugin-camera/www/CameraPopoverOptions.js

                [phonegap] 200 /plugins/cordova-plugin-camera/www/Camera.js

                [phonegap] 200 /plugins/cordova-plugin-camera/src/browser/CameraProxy.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/contacts.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/ContactAddress.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/ContactError.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/Contact.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/ContactField.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/ContactFindOptions.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/ContactName.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/ContactOrganization.js

                [phonegap] 200 /plugins/cordova-plugin-contacts/www/ContactFieldType.js

                [phonegap] 200 /plugins/cordova-plugin-device/www/device.js

                [phonegap] 200 /plugins/cordova-plugin-device/src/browser/DeviceProxy.js

                [phonegap] 200 /socket.io/?EIO=3&transport=polling&t=LgCwtyu&sid=ONQTbCzTH5JrGFROAAAB

                [phonegap] 200 /plugins/cordova-plugin-device-motion/www/Acceleration.js

                [phonegap] 200 /plugins/cordova-plugin-device-motion/www/accelerometer.js

                [phonegap] 200 /plugins/cordova-plugin-device-motion/src/browser/AccelerometerProxy.js

                [phonegap] 200 /plugins/cordova-plugin-device-orientation/www/CompassError.js

                [phonegap] 200 /plugins/cordova-plugin-device-orientation/www/CompassHeading.js

                [phonegap] 200 /plugins/cordova-plugin-device-orientation/www/compass.js

                [phonegap] 200 /plugins/cordova-plugin-device-orientation/src/browser/CompassProxy.js

                [phonegap] 200 /plugins/cordova-plugin-dialogs/www/notification.js

                [phonegap] 200 /plugins/cordova-plugin-dialogs/www/browser/notification.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/DirectoryEntry.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/DirectoryReader.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/Entry.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/FileEntry.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/File.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/FileError.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/FileReader.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/FileSystem.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/FileUploadOptions.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/FileUploadResult.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/FileWriter.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/Flags.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/LocalFileSystem.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/Metadata.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/fileSystems.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/ProgressEvent.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/requestFileSystem.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/resolveLocalFileSystemURI.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/browser/isChrome.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/browser/Preparing.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/fileSystemPaths.js

                [phonegap] 200 /plugins/cordova-plugin-file-transfer/www/FileTransferError.js

                [phonegap] 200 /plugins/cordova-plugin-file/www/browser/FileSystem.js

                [phonegap] 200 /plugins/cordova-plugin-file-transfer/www/FileTransfer.js

                [phonegap] 200 /plugins/cordova-plugin-file-transfer/www/browser/FileTransfer.js

                [phonegap] 200 /plugins/cordova-plugin-file/src/browser/FileProxy.js

                [phonegap] 200 /plugins/cordova-plugin-globalization/www/GlobalizationError.js

                [phonegap] 200 /plugins/cordova-plugin-globalization/src/browser/GlobalizationProxy.js

                [phonegap] 200 /plugins/cordova-plugin-inappbrowser/www/inappbrowser.js

                [phonegap] 200 /plugins/cordova-plugin-inappbrowser/src/browser/InAppBrowserProxy.js

                [phonegap] 200 /plugins/cordova-plugin-globalization/www/globalization.js

                [phonegap] 200 /plugins/cordova-plugin-media/www/MediaError.js

                [phonegap] 200 /plugins/cordova-plugin-media/www/Media.js

                [phonegap] 200 /plugins/cordova-plugin-media/www/browser/Media.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/www/CaptureAudioOptions.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/www/CaptureImageOptions.js

                [phonegap] 200 /plugins/cordova-plugin-globalization/www/browser/moment.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/www/CaptureVideoOptions.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/www/CaptureError.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/www/MediaFileData.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/www/capture.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/www/MediaFile.js

                [phonegap] 200 /plugins/cordova-plugin-media-capture/src/browser/CaptureProxy.js

                [phonegap] 200 /plugins/cordova-plugin-network-information/www/network.js

                [phonegap] 200 /plugins/cordova-plugin-network-information/www/Connection.js

                [phonegap] 200 /plugins/cordova-plugin-network-information/src/browser/network.js

                [phonegap] 200 /plugins/cordova-plugin-splashscreen/www/splashscreen.js

                [phonegap] 200 /plugins/cordova-plugin-splashscreen/src/browser/SplashScreenProxy.js

                [phonegap] 200 /plugins/cordova-plugin-statusbar/www/statusbar.js

                [phonegap] 200 /plugins/cordova-plugin-statusbar/src/browser/statusbar.js

                [phonegap] 200 /plugins/cordova-plugin-vibration/www/vibration.js

                [phonegap] 200 /plugins/cordova-plugin-vibration/src/browser/Vibration.js

                [phonegap] [console.log] adding proxy for Battery

                [phonegap] [console.log] adding proxy for Camera

                [phonegap] [console.log] adding proxy for Device

                [phonegap] 200 /config.xml

                [phonegap] [console.log] adding proxy for Accelerometer

                [phonegap] [console.log] adding proxy for Compass

                [phonegap] [console.log] adding proxy for File

                [phonegap] [console.log] adding proxy for Globalization

                [phonegap] [console.log] adding proxy for InAppBrowser

                [phonegap] [console.log] adding proxy for Capture

                [phonegap] 200 /img/logo.png

                [phonegap] [console.log] adding proxy for NetworkStatus

                [phonegap] [console.log] adding proxy for SplashScreen

                [phonegap] [console.log] Persistent fs quota granted

                [phonegap] [console.log] Error: exec proxy not found for :: StatusBar :: _ready

                [phonegap] [console.log] Received Event: deviceready

                 

                Capture.PNG

                 

                I really not findout why its not run all like log in browser.

                 

                This is what i inculde:

                 

                <head>
                  <meta charset="utf-8"/>
                  <meta name="format-detection" content="telephone=no"/>
                  <meta name="msapplication-tap-highlight" content="no"/>
                  <meta name="viewport"
                   content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
                   <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
                   <meta http-equiv="Content-Security-Policy"
                   content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *"/>
                   <!-- Good default declaration:
                  * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
                  * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
                  * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                  * Enable inline JS: add 'unsafe-inline' to default-src
                  * Enable eval(): add 'unsafe-eval' to default-src
                  * Create your own at http://cspisawesome.com
                  -->
                  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

                   <title>Login</title>
                  <link rel="icon" href="icon.png"/>
                  <link href="css/material-icon.css" rel="stylesheet">
                  <link rel="stylesheet" href="css/materialize.css">
                  <link rel="stylesheet" href="css/style.css">
                  <link rel="stylesheet" href="css/materialize-custom-vbi.css">
                  <link rel="stylesheet" type="text/css" href="css/index.css"/>
                </head>

                 

                <body>

                <!--Content here and js include at the bottom-->

                 

                <script type="text/javascript" src="cordova.js"></script>
                <script src="js/jquery-3.1.1.min.js"></script>
                <script src="js/materialize.min.js"></script>
                <script src="js/init.js"></script>
                <script type="text/javascript" src="js/index.js"></script>
                <script type="text/javascript">
                   $(document).ready(function () {

                   $('#btnLogin').click(function () {

                   location.href = "xe-oto.html";
                   });
                   });
                </script>
                </body>

                </html>

                • 5. Re: phonegap serve not work well with materialize
                  kerrishotts Adobe Community Professional

                  Please use Weinre and see if you get any error messages that might indicate why the app fails in the PG Dev App. See Weinre | PhoneGap Docs for more information.

                  • 6. Re: phonegap serve not work well with materialize
                    giapn66254205 Level 1

                    Hi,

                    Weinre only work for me after i bult it with debug mode. But it work ok if i built.

                    I just want to debug it first and i dont want to build many times to test it.

                     

                    The local way to import script tag to use weinre not work because i dont know how to find wernre domain and unique key???.

                    <script type="text/javascript" src="http://my.server.ip/target/target-script-min.js#some_unique_key"></script>

                     

                    By the way, I found the reason why Materialize not work in index.html but work in other page.

                     

                    This is the reason:

                     

                    <head>

                    <title>Login</title>

                       <!--<link type="text/css" rel="stylesheet" href="css/index.css"/>-->
                       <link rel="icon" href="icon.png"/>
                      <link rel="stylesheet" href="css/material-icon.css">
                      <link rel="stylesheet" href="css/materialize.css">
                      <link rel="stylesheet" href="css/style.css">
                      <link rel="stylesheet" href="css/materialize-custom-vbi.css">
                    </head>

                    If i set the index.css at first and comment it in header then include other css file ----> Its work perfectly.

                     

                     

                     

                    <head>

                    <title>Login</title>

                      <link type="text/css" rel="stylesheet" href="css/index.css"/>

                      <link rel="icon" href="icon.png"/>
                      <link rel="stylesheet" href="css/material-icon.css">
                      <link rel="stylesheet" href="css/materialize.css">
                      <link rel="stylesheet" href="css/style.css">
                      <link rel="stylesheet" href="css/materialize-custom-vbi.css">
                    </head>

                    If i uncomment it and inside index.css I didn't write any code ---> It failed

                     

                     

                    <head>

                    <title>Login</title>

                       <link rel="icon" href="icon.png"/>
                      <link rel="stylesheet" href="css/material-icon.css">
                      <link rel="stylesheet" href="css/materialize.css">
                      <link rel="stylesheet" href="css/style.css">
                      <link rel="stylesheet" href="css/materialize-custom-vbi.css">
                       <!--<link type="text/css" rel="stylesheet" href="css/index.css"/>-->
                    </head>

                    It also failed if I include index.css file at the last POSITION after i included other css file first (both comment and uncomment it)

                     

                     

                    By the way, thank you all for reply and help me to solve this problem

                    It suck a freak! ...zzz...