webviewの表示速度を上げたい。またはプログレスバーを表示したい。

monacaでプロジェクトを作っています。

javascript
1var ref = window.open("http://___", "_self", "location=no,hidden=yes");

こちらのコードでCordova WebViewで任意のサイトを表示できるのですが、サイトを表示するまでに５−６秒ほどグレーの画面が表示されます。おそらくその間に読み込んでいると考えられるのですが、もっと短縮する方法はありませんでしょうか？
また、プログレスバーなどを挿入できないでしょうか？
理想の形は読み込み時間を短縮しつつ、プログレスバーを挿入することです。

今のままではあまりにも体感が遅く感じてしまい困っております。
みなさま、お知恵をお貸しください。
宜しくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

試しにご申告の環境でやってみました。
MONACA　Onsen UI V2 Angular 1 Splitter のテンプレート

テンプレのHTMLにボタンを作って押したらyahooに飛ぶだけです。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18    ons.bootstrap()
19      .controller('AppController', function($scope) {
20        this.load = function(page) {
21          $scope.splitter.content.load(page);
22          $scope.splitter.left.close();
23        };
24
25        this.toggle = function() {
26          $scope.splitter.left.toggle();
27        };
28      });
29
30    ons.ready(function() {
31        console.log("Onsen UI is ready!");
32    });
33    
34    function next1() {
35        var ref = window.open("https://www.yahoo.co.jp/", "_self", "location=no,hidden=no");
36    }
37  </script>
38</head>
39<body>
40
41  <ons-splitter ng-controller="AppController as app" var="splitter">
42    <ons-splitter-side side="left" width="220px" collapse swipeable>
43      <ons-page>
44        <ons-list>
45          <ons-list-item ng-click="app.load('home.html')" tappable>
46            Home
47          </ons-list-item>
48          <ons-list-item ng-click="app.load('settings.html')" tappable>
49            Settings
50          </ons-list-item>
51          <ons-list-item ng-click="app.load('about.html')" tappable>
52            About
53          </ons-list-item>
54        </ons-list>
55      </ons-page>
56    </ons-splitter-side>
57    <ons-splitter-content page="home.html"></ons-splitter-content>
58  </ons-splitter>
59
60  <ons-template id="home.html">
61    <ons-page>
62      <ons-toolbar>
63        <div class="left">
64          <ons-toolbar-button ng-click="app.toggle()">
65            <ons-icon icon="md-menu"></ons-icon>
66          </ons-toolbar-button>
67        </div>
68        <div class="center">
69          Main
70        </div>
71      </ons-toolbar>
72      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
73      <button onclick="next1()">ボタン</button>
74      </p>
75    </ons-page>
76  </ons-template>
77
78  <ons-template id="settings.html">
79    <ons-page>
80      <ons-toolbar>
81        <div class="left">
82          <ons-toolbar-button ng-click="app.toggle()">
83            <ons-icon icon="md-menu"></ons-icon>
84          </ons-toolbar-button>
85        </div>
86        <div class="center">
87          Settings
88        </div>
89      </ons-toolbar>
90    </ons-page>
91  </ons-template>
92
93  <ons-template id="about.html">
94    <ons-page>
95      <ons-toolbar>
96        <div class="left">
97          <ons-toolbar-button ng-click="app.toggle()">
98            <ons-icon icon="md-menu"></ons-icon>
99          </ons-toolbar-button>
100        </div>
101        <div class="center">
102          About
103        </div>
104      </ons-toolbar>
105    </ons-page>
106  </ons-template>
107</body>
108</html>

5～6秒の読込時間は再現されず、問題なくyahooが開きますので、
if~elseの条件分岐やそれ以外の部分に原因があるように思われます。

投稿2017/12/19 00:31

hydroxy

総合スコア49

yuichi02

2017/12/20 04:41

hydroxy様、環境再現までしていただきありがとうございます。ご指摘のようにコピペしてビルドしてみたところ当初の問題点は発生しませんでした。そこで改めて最初から検証してみたところ、プラグインのInAppBrowserをONにしている際に発生するということがわかりました。なぜ発生するのか原因までは私はわからないのですが、当面Offにすることで解決できそうです。どこをどう改善すればよくなるのかもわかっていなかったのでアドバイスをいただき非常に助かりました。初心者の私にお付き合いいただき誠にありがとうございます。もっと上達できるよう精進いたします。ありがとうございました。

行動規範の内容に同意します

上記のコードですと、hidden=yesを設定されていますので、

hidden: yes に設定した場合、ブラウザーの「作成」とページの読み込みを行いますが、表示はしません。読み込みが完了すると、loadstop イベントが発火します。省略または no ( デフォルト ) に設定した場合、通常通り、ブラウザーを開き、読み込みを行います。

こちらのリファレンスにある通り、表示はさせずにその後のloadstopイベントを発火させて、その後何らかの処理を経てページを表示させているのかな？と推察されました。
単純にページを表示させるだけなら、（飛び先のサイトのサーバーが重いわけでないのなら）すぐに表示されると思いますが。

投稿2017/12/18 03:32

hydroxy

総合スコア49

yuichi02

2017/12/18 14:26

ご回答ありがとうございます。 hidden=no　に設定しても改善はされませんでした。試しに Onsen UI V2 Angular 1 Splitter のテンプレートで下記のように試してみたのですが、変わらずです。 function next1() { if (navigator.onLine) { // オンライン var ref = window.open("https://www.yahoo.co.jp/", "_self", "location=no,hidden=no"); } else { // オフライン alert("offlineです通信環境をご確認ください"); } サーバーのせいかなと思いましたがyahooでも変わらずでした当方初心者のためこれが私の間違いなのか仕様の問題なのか判断できず困っております。お知恵を貸していただけるとありがたいです。

行動規範の内容に同意します

あなたの回答