Packaging Mobile Sites Using Cordova

Recently, a client made a request. Although we already have a mobile web version of the site, it’s burdensome for clients to remember and input the URL. Therefore, an APP is needed. However, the cost of developing a standalone APP is considerable. How can we maximize the reuse of existing resources, such as the mobile web version? This situation led to a solution: using hybrid development tools like Cordova to package the mobile site as an APP. This way, the APP exists, and for specific clients, the only difference between the APP and the website is the form of existence, without the need for differentiated functionality. Packaging the mobile site into an APP is the most suitable approach in this context.

Feasibility

Can it be packaged?

Answer: It’s just using the system browser to open a webpage. Cordova has a browser plugin, so it’s possible.

Can it be published on app stores?

Answer: We can directly state the conclusion now. Most stores currently allow it. If none did, there would be no point in reading this article.
I’ve successfully published apps packaged using this method in major stores, such as the Apple App Store, Tencent MyApp, 360, Wandoujia, Huawei, Meizu, and Vivo.
The Xiaomi App Store doesn’t allow it; submissions will be rejected, explicitly stating that simple shell APPs are not permitted.

Since most significant stores currently support it, let’s continue to see how to implement it!

Specific Strategy

• Initialize Cordova project
  Please refer to the official doc for initializing the development environment and details. There is no need to repeat here, click here
• Install main plugins

• $ cordova plugin add cordova-plugin-whitelist
• $ cordova plugin add cordova-plugin-splashscreen
  This plugin mainly controls the APP launch screen settings
• $ cordova plugin add cordova-plugin-inappbrowser
  This plugin implements the opening of target web pages using the built-in browser in the app.

• In the index.js file, implement opening the corresponding site after the application starts.

  var app = {
      // Application Constructor
      initialize: function () {
          document.addEventListener('deviceready', onDeviceReady, false);
      },
  
      // deviceready Event Handler
      //
      // Bind any cordova events here. Common events are:
      // 'pause', 'resume', etc.
      onDeviceReady: function () {
          this.receivedEvent('deviceready');
      },
  
      // Update DOM on a Received Event
      receivedEvent: function (id) {
      }
  };
  function onDeviceReady() {
      // window.open = cordova.InAppBrowser.open;
      var url = 'http://apache.org';
      var target = '_blank';
      var options = "location=no,toolbar=no";
      cordova.InAppBrowser.open(url, target, options);
  }
  app.initialize();

Tips

Regarding icons, apart from UI designers directly providing icons of corresponding sizes, I think using the Ionic service is also a good choice. After installing the Ionic framework, using ionic resources to generate icons of corresponding sizes for each platform based on template images is also a convenient method. Then, copy the corresponding configuration items generated in config.xml.

At the end

This approach mainly uses Cordova to achieve APP. In principle, it creates a browser but removes the browser interface, disguising it as an app.