web-dev-qa-db-ja.com

プログレッシブウェブアプリを閉じる方法

PWAがモバイルデバイスにインストールされたら、ユーザーが戻るボタンを何度もクリックせずに、ネイティブアプリのようにアプリケーションを閉じるにはどうすればよいですか。

Webページでwindow.closeを使用するのは悪い考えですが、これはモバイルデバイスでのpwaです。

Cordovaではnavigator.app.exitAppを使用しますが、これはもちろんpwaでは使用できません。

javascriptprogressive-web-apps
10
fredtma

これは私が今日作成したソリューションです。

[戻る]ボタンをクリックすると、ダイアログで[戻る]ボタンをもう一度クリックしてアプリを実際に閉じるか、[キャンセル]をクリックしてページに戻るように要求されます。

全体は、履歴の一部の操作を使用しており、Chromeで動作します。より多くのブラウザーで機能するように調整できます。歴史がどのように詳細に機能するべきかということになると、ブラウザはしばしば少し異なる哲学を持っているようです。

したがって、この例では、コードで確認できるように、ChromeでAndroidに対してのみ機能するという条件があります。

また、フルスクリーン（私のPWAはフルスクリーンで実行されます）の状態もあるため、このロジックは通常のブラウザーでは使用されません（通常のブラウザーでtestInBrowser = trueを設定してテストできます）。

closePWA.js

var testInBrowser = false; // set this to true to test in browser
if (   testInBrowser 
    || 
       /Android/i.test(navigator.userAgent)
    && /Chrome/i.test(navigator.userAgent)
    && window.matchMedia('(display-mode: fullscreen)').matches
    ) {
  if (getCookie('closing') == "true") {
    setCookie('closing', '', 1);
    showCloseDialog();
    returnToOriginalPageIfUserCancels();
    window.stop();
  } else {
    history.pushState(null, null);
    window.addEventListener('popstate', function () {
      setCookie('closing', 'true', 10);
      history.go(-(history.length - 2));
    })
  }
}
function showCloseDialog() {
  document.body.style='background-color:#aaa;';
  var s = document.createElement('SPAN');
  s.style='border-radius:10px;padding:50px 30px 40px 30px;display:table;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background-color:#fff;font-size:30px;font-family:arial;font-weight:bold;';
  s.appendChild(document.createTextNode('Click back button again to close'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createTextNode('or'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createElement('BR'));
  var b = document.createElement('BUTTON');
  b.style='font-size:30px;font-family:arial;background:none!important;border:none;color:blue;font-weight:bold;';
  b.innerHTML='Cancel'
  b.addEventListener('click',function(){outsideResolve()});
  s.appendChild(b);
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createElement('BR'));
  s.appendChild(document.createTextNode('to go back'));
  document.body.appendChild(s);
}
async function returnToOriginalPageIfUserCancels() {
  await new Promise(function(resolve) {
    outsideResolve = resolve;
  });
  var steps = history.length - 1;
  if (steps==1) steps=0; // takes care of the case when user clicks back on first page
  history.go(steps);
}
function setCookie(cname, cvalue, exseconds) {
  var d = new Date();
  d.setTime(d.getTime() + (exseconds * 1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

スクリプトは、body要素の先頭、またはbodyの非常に早い段階で追加する必要があります。これは重要。ヘッダーに追加した場合は機能せず、後で本文に追加した場合、または本文の最後に追加した場合に正しく機能しません。

これは、PWAのすべてのページで行う必要があります。

このような：

<!DOCTYPE html>
<html>
<head>
  <title>A page</title>
</head>
<body>
  <script src="/script/closePWA.js"></script>
  <h3>A page</h3>
  <a href="anotherPage.html">Go to another page</a>
</body>
</html>

ここでテストできます

2019-01-29を編集：次のリンク（デモPWA）のWebサイトは現在ダウンしています。後でもう一度実行します。

デモPWA（ブラウザでテストする場合は、新しいウィンドウ/タブでChromeで開く必要があります。）

このデモはtestInBrowser = trueで構成されているので、通常のChromeブラウザでテストできます。もちろん、ブラウザは閉じませんが、履歴がどのようにジャンプするかを確認できます。

通常の（Chrome）ブラウザーでテストする場合は、新しいウィンドウまたはタブで開くことが重要です。これは、履歴に以前のページが含まれていてはならないという考え方です。

実際のテストは、お使いのAndroid Chrome搭載デバイスでお試しください。Chromeブラウザ、三点メニューを押し、[ホーム画面にショートカットを追加]を選択します。

プログレッシブウェブアプリがインストールされたら、アプリを起動し、1ページと2ページの間をしばらく移動してから、デバイスの戻るボタンを押して全体をテストします。

3
Magnus