One, foreword

As we all know, although webapp has cross-platform advantages compared with nativeapp, it is not as good as nativeapp in terms of user experience, for example, how to make webapp have inertia scrolling and edge rebound of ios, and how to make webapp have the same status bar as nativeapp (transparent and immersive). I use better Scroll for the former and cordova-plugin-Statusbar for the latter. The webApp developed by my company is developed with VUE and then packaged with Cordova, which is what I want to share with you in this article.

Second, the body

  • Cordova-plugin- Install and use the statusbar plug-in
cordova plugin add cordova-plugin-statusbar
Copy the code

After installing the plug-in, perform the following configuration in the config. XML file of the Cordova project

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightContent" />
Copy the code

StatusBarOverlaysWebView Determines whether the status bar overwrites the webView. If the value is Boolean, it overwrites the webView. If the value is false, it overwrites the webView.

StatusBarStyle Specifies the style of the status bar. The optional values are default, lightContent, Blackopaque, always black. The value is lightContent, Blackalways, or Blackopaque, always the same. The font color of the status bar is white.

Note that there is no need to set the StatusBarBackgroundColor, because the background color of the status bar is transparent when the value is not set. This is also what we want to achieve in this article. See the official documentation of Cordova below

StatusBarBackgroundColor (color hex string, no default value). On iOS, set the background color of the statusbar by a hex string (#RRGGBB) at startup. If this value is not set, the background color will be transparent.

Package after configuration. Here, debug ios first, as shown in the following effect picture.

  • Status bar and safe zone

On earlier versions of iOS, the status bar was just a black strip above a fixed screen and was not touchable. It’s part of the system UI, and your app runs in the space underneath it. With the release of iOS7, the status bar became transparent, taking its colors from the colors of the app’s navigation bar. For webView apps such as Cordova, it is usually necessary to determine the iOS version and leave a 20px margin above the fixed navigation bar to correctly fill the navigation bar. The difference with iOS 11 from earlier versions is that the WebView content area extends beyond the security zone. That is, if you have a header navigation bar that uses the fixed positioning element and uses top: 0, it will be rendered 20px below the top of the screen: aligned to the bottom of the status bar.

Now that we know why, is there a way to fix it? The answer is yes, apple has given us a way to control this form through meta tags. Fortunately, this new viewport behavior also applies to older versions, including the deprecated UIWebView, which is viewport-fit!

Add viewport-fit=cover to the meta tag of index. HTML and set a height of 20px or more for the status bar.

For more details on the status bar and security zones, see Cordova iOS11 webView Adaptation.

Then continue to package debugging, the effect picture is as follows

Here is where StatusBar. StyleLightContent () and the StatusBar. StyleDefault () these two methods.

Listen for routes in the app.vue file

methods: {
    onDeviceReady() {// Dynamically change the status bar style according to the route // I set a route meta for all the routes with the status bar font color white, and the attribute statusBgc is 1 this.$route.meta.statusBgc ? StatusBar.styleLightContent() : StatusBar.styleDefault()
    }
},
watch: {
    $route(to and from) {/ / cordova plug-in can define a StatusBar object, when it can only be used after the deviceready document. The addEventListener ("deviceready", this.onDeviceReady, false)}}Copy the code
  • The adapter iphoneX

Due to the iphoneX’s bang-level design, the previously reserved 20px would still cause the view to be covered with a bang-lock, but thankfully apple has added a way to expose the safe zone layout guidelines to CSS. They added a CSS like variable concept called CSS constant. Consider CSS variables that are designed by the system and cannot be overridden. They can be done with the CONSTANT () function of CSS.

So I just add

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);  

Copy the code

Constant (safe-area-inset-top) : Specifies the number of Settings in the security zone at the top of the Viewport (CSS pixel) constant(safe-area-inset-bottom) : specifies the number of Settings in the security zone at the top of the Viewport. Constant (safe-area-inset-left) : Constant (safe-area-inset-right) : Constant (safe-area-inset-right) : Constant (safe-area-inset-right) : Set the amount (CSS pixels) in the security zone to the right of the Viewport

  • Android adaptation

After I finished debugging ios, I realized

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightContent" />
Copy the code

The configuration in the android didn’t seem to work, the specific performance is the status bar does not cover the webview and background color is black, then looked at the android cordova documents found need to use the StatusBar. OverlaysWebView (true) this method. Modify the previous app.vue as follows:

methods: {
    onDeviceReady() {// Dynamically change the status bar style according to the route // I set a route meta for all the routes with the status bar font color white, and the attribute statusBgc is 1 this.$route.meta.statusBgc ? StatusBar.styleLightContent() : StatusBar.styleDefault()
    }
},
watch: {
    $route(to, from) {// The cordova plugin defines a StatusBar object that can only be used with Devicereadyif (cordova.platformId == 'android') {/ / android need special treatment, see cordova StatusBar. The official document overlaysWebView (true)
      }
        document.addEventListener("deviceready", this.onDeviceReady, false)}},created() {/ / that android entered the status bar for the first time that cover the webview document. The addEventListener ("deviceready", this.onDeviceReady, false)}Copy the code

Third, concluding remarks

Well, that’s all for this article. Thanks for reading

Four, see

cordova-plugin-statusbar

Cordova iOS11 webView adaptation

IPhone X’s notch and CSS