web-dev-qa-db-ja.com

PWAが表示されないホーム画面に追加する

プログレッシブWebアプリを作成しました。 index.html、ファビコンなどを含むフォルダ「画像」など、sw.jsとstyles.cssだけです。

Manifest.jsonのコード

{
"lang" : "en",
"name" : "Test",
"short_name" : "Test",
"icons" :   [
  {
  "src": "images/Android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
},
{
  "src": "images/Android-chrome-144x144.png",
  "sizes": "144x144",
  "type": "image/png"
}
],
"theme_color" : "#116b20",
"background_color" : "#1a1a1a",
"scope" : "1",
"start_url" : "/test",
"display" : "standalone",
"orientation" : "natural"
   }

およびsw.js

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open('static').then(function(cache) {
 cache.addAll(['/test/', '/test/index.html', '/test/manifest.json']);
  })
  );
});
self.addEventListener('activate', function(event) {
 console.log('[Service Worker] Activating Service Worker ....', event);
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
caches.match(event.request).then(function(response) {
  if (response) {
    return response;
  } else {
    return fetch(event.request).then(function(res) {
      return caches.open('dynamic').then(function(cache) {
        cache.put(event.request.url, res.clone());
        return res;
      });
    });
  }
})
  );
});

だから...今のところ、クロームでスマートフォンからサイトにアクセスすると、すべてが正しく表示され、タブの色が良く、すべてがきれいに見えます。しかし、「ホーム画面に追加」というバナーはありません。短所では、クロムの設定に移動し、「ホーム画面に追加」をクリックして検証し、追加されたショートカットに移動すると、サイトは「スプラッシュ画面」などでアプリとして起動されます。

そして、コンピューターからサイトにアクセスし、「アプリケーション」およびマニフェストでデバッガーを見ると、「ホーム画面に追加」という小さなリンクがあります。これがどこから来たのか知っていますか？

手伝ってくれてありがとう ！

編集：

私は少し進んで組織を少し変更し、サブドメインを作成しました。今では https://subdomain.example.com のようなURLを持っています。すべてがサブドメインのルートにあります。コードでは、リンクは相対的です（例： "img/name.png"）。 Chrome私のPCから、開発ツール->アプリケーション->マニフェストタブに移動し、[ホームに追加]をクリックすると、サービスワーカーにエラーが発生しません。画面」、サイトをアプリケーションに追加するためのバナーが表示され、検証するとうまく機能します。Chrome dev tools-> Application-> Service worker tab

sw.js

しかし、私のスマートフォンでは、誰かがアイデアを持っている場合、ホーム画面に追加するバナーがありません...

service-workerprogressive-web-appsmanifest.json
10
Cohchi

サイトは、証明書、有効なマニフェスト、およびクロムアプリケーションタブに表示される有効なサービスワーカーを含むhttpsである必要があります。これにより、サイトはインストール可能なサイトとして追加するための基本的なPWAとして認定されます。 .APKファイル）

Https、証明書、またはサービスワーカーに問題がある場合（ほとんどの場合これが理由です）、アイコンがホーム画面に追加され、アドレスバーなしでアプリとして開きます。違いは、それは単なるブックマークの種類のリンクです。これは、WebApkがChromeで生成した.apkファイルではありません。このようなシナリオでは、chromeはインストールバナーを表示しません。

他のケースは、あなたが気づかないうちに一度行って行ったかもしれないし、あなたの中断で​​ページをリロードしたかもしれません。ユーザーによる最初の不承認、chromeは再び表示されません。別のデバイスから試すことができますが、同じ問題が発生します。最初のパラグラフで述べたように正しく構成されていないPWAコンポーネントの1つです。

Here および here は、インストールバナーに関するGoogleの公式の基準です。

6
Anand

Google開発者サイトですべての基準を確認しましたか？

https://developers.google.com/web/fundamentals/app-install-banners/

現在、あなたの投稿にHTTPSについて言及しているものは何もありません-これが原因かもしれません。

1
Bob Vaselaar