Framework7 v4 + Android 5.1/6.0 (emulator) + Cordova: undefined is not a function

#1

I cant get running this on Android 5.1 emulator. :frowning:

When I’m trying to open app there is an error in console:

webpack:///./node_modules/framework7/utils/utils.js?:299
Uncaught TypeError: undefined is not a function

Could anyone help please and say what I’m doing wrong?

Browser (default webview) is Chrome 39 (Android Browser 4). Maybe the problem is in the browser and on a real device system webview will be updated?

Thank you in advance.

My babel.config.js

 module.exports = {
       presets: [
           [
                '@babel/preset-env',
                {
                     modules: false,
                     targets: {
                          browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
                     }
                }
           ]
      ],
      plugins: [
           'transform-vue-jsx',
           '@babel/plugin-syntax-dynamic-import',
           '@babel/plugin-transform-runtime'
      ]
 };

And webpack.config.js rule

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules(\/|\\)(?!(framework7|framework7-vue|template7|dom7)(\/|\\)).*/
}
#2

I’ve just fixed that by adding just one line to babel.config.js: useBuiltIns: 'usage'

presets: [
       [
            '@babel/preset-env',
            {
                 modules: false,
                 useBuiltIns: 'usage',
                 targets: {
                      browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
                 }
            }
       ]
  ]

BUT

I found that css variables do not work… :frowning: Standard browser in Android 5.1 and Android 6.0 emulator is Chrome 39/44, but css variables works after 49 version of Chrome… So in that case… Framework7 v4 will not work on “naked” Android 5.1 and Android 6.0 due to old browser.

#3

I am sure there is not so many users with “naked” Android 5.1, it is a 4 years old device/system.

If you need such devices full support, you can still work with v3.

You can also give a try for https://postcss.org/ it has some plugins that can transform CSS variables

#4

Thanks for the answer. You’re right, there is not much users with those Androids and I understand that. Emulator is just the fastest way to test bundle on a device and, unfortunately, it doesnt work.

Step back to v3 is a good variant too. But postcss (which I didn’t even think OMG) - probably is the best solution.

Thank you!

P.S. I’m using Framework7 since version 2, made a big application with it (up to 100k+ uploads both Android and iOS), now developing a new one and I was very exited after news on v4 with its stunning features. Thank you for your work!

#5

Unfortunately postcss doesn’t help, because many variables in framework css are wrapped by .ios and .md rule, so postcss-css-variables plugin throwing tons of variable is underfined warnings…

#6

Oh, and last thing - default Android 6.0 System WebView is 44.0.2403.117, so css variables don’t work there too.

I have an idea to show a popup asking to update system webview…

2019-02-09_12-31-03
2019-02-09_12-31-03.png1124×714 75.3 KB

#7

This is definitely an interesting problem to solve!

Even though we, developers are there to move with recent technologies, sometimes our customers are somewhat more conservative and stick e.g. with Android 5. And that means we cannot upgrade to F7v4 (regarding these projects) until this is resolved.

I’ll also investigate what could be done in this field…

#8

Congrats on the 100k+ downloads. Maybe consider contributing to https://www.patreon.com/vladimirkharlampidi/ ?

#9

After a conversation we decided to do something like that:

image
image.jpg292×517 53.7 KB

Stats of our application saying there are less than <1% old androids (5/6) with Chrome lower than 49 version. So we are showing at startup some kind of popup with proposition to update system component and giving a link to Android System WebView on Google Play. But we didn’t test that yet.

#10

I really want to do this, but our customer does not approved that yet. Why? I don’t know… But as soon as there will be an opportunity - I will definitely do that.

#11

Interesting, but looks like Android System Webview is not available on all devices. I have Android 8.1 device and I can’t install it, it says “Disabled”, not sure what it means.

I’m still thinking about doing that thing with postcss by doing some extra stuff. But even then, some features that highly rely on CSS variables like new large navbar won’t work at all. Not sure does it worth it or not

#12

Yeah, right, it’s disabled on Android >= 7 devices. I’m not an android developer, but googled that Android <= 6 devices using Android System WebView as system webview, but Android >= 7 devices using Chrome webview as system one. You can read about that here: https://www.androidpolice.com/2016/07/20/google-explains-chrome-will-become-webview-android-7-0/

So what we’ve got? Very little amount of users, who didn’t update their phone for YEARS? I think it doesnt worth it to do anything with that. I think if user have old 5.1 or 6.0 android and he is using it every day - he updated that component in the past, but if he didn’t - at least we can ask him to do that.

Back to postcss thing: there are many places where variables depends on .classes, so, imo, it’s very difficult to properly re-work those styles back to plain css. Or not? :slight_smile: To be honest I didn’t go deep into that, it looks too complicated challenge, so… I think it’s better to ask user to update.

#13

I forgot one thing a wanted to say. If you’re developing an app supporting Android 5.1/6.0 you cannot test framework on Android Studio emulators, because of ancient webview by default and there are no Google Play, so you’re not able to update that component. And if you haven’t real devices on your table - you’re in trouble…

Sure, you can find .apk with GP, or even with fresh System WebView, BUT there are bug in cordova, when you’re trying to run app on emulator and it stuck up. The only way is I found to fix that - wipe all data. That means that you must do everything from scratch every time.

UPDATE: Installing latest Android System WebView on emulator (via APK) didn’t force system webview to update, but on a real device it works as expected (system webview updated).

UPDATE2: Cordova bug fixed by using “cold boot”.

#14

You can install opengapps to Android emulator (and use Google Play).

#15

Thanks! I’ll try to use that thing. But after 1 hour of tries I’m still not able to install that on 5.1 emulator (Windows 10). Will keep trying…

#16

Pico (the smallest) variant should be enough to get Google Play working properly.

#17

I found three different manuals on how to install opengapps, but none of them work. I think problem in my OS (Windows 10)… I even cannot run adb in root mode (adb root) to change write rights in emulator.

Thanks for help!

#18

I just ran into this issue late in development cycle for updating f7 from v3 to v4 when testing old Android versions in the simulator. Doing some customer analytics, I do see a significant # of customers using the factory version of Chrome that came with Android, i.e., pre-Chrome 49. The earliest version of Android with a factory Chrome browser that works is Android 7.

This is unfortunate. We have to evaluate whether we will need to go back to v3. :frowning:
One option might be simply for the bootstrap code to check for Chrome less than version 49, and show message instructing user to update Chrome in Play Store.