ДОБАВИТЬ НА ГЛАВНЫЙ ЭКРАН Всплывающее окно не отображается на моем сайте ASP.Net

Я пытаюсь сделать баннер «Добавить на главный экран» с моим проектом Asp.net. Мой Index.js

// Make sure we are accessing over https, if not redirect
if ((!location.port || location.port === "80") && location.protocol !== "https:" && location.host !== "localhost") {
    location.protocol = "https:";
}

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('sw.js').then(function (registration) {
        console.log('ServiceWorker registration successful with scope:', registration.scope);
    }).catch(function (error) {
        console.log('ServiceWorker registration failed:', error);
    });
}

и мой Sw.js

console.log('I am a Service Worker!');
self.addEventListener('install', function () {
    self.skipWaiting();
});

self.addEventListener('activate', function (event) {
    event.waitUntil(clients.claim());
});

и мой файл манифеста похож на

{
  "name": "App_Name",
  "short_name": "APP",
  "icons": [
		{
        "src": "120x120.png",
        "type": "image/png",
        "sizes": "128x128"
      }, 
	  {
        "src": "152x152.png",
        "type": "image/png",
        "sizes": "152x152"
      }, 
	  {
        "src": "144x144.png",
        "type": "image/png",
        "sizes": "144x144"
      }, 
	  {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "256x256"
      },
      {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "512x512"
      }
	  ],
  "start_url": "Welcome.aspx?launcher=true",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#aac73c ",
  "theme_color": "#63528a"
}

Это работает, когда вы нажимаете «Добавить на главный экран» в форме Devtool на вкладке «Приложение». но он не может отображать всплывающее окно добавления на главный экран, как это. введите здесь описание изображения

пожалуйста, сообщите... Заранее спасибо


javascript web-applications progressive-web-apps
person TouchStarDev    schedule 29.08.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Браузеры управляют тем, когда отображать баннер установки приложения (он же приглашение «Добавить на главный экран»). Я предполагаю, что они основываются на том, сколько пользователь взаимодействовал с приложением (эти эвристики/критерии различны для каждого браузера и могут также время от времени меняться).

В целях разработки, если он работал при нажатии кнопки «Добавить на главный экран» в DevTools, вы можете быть уверены, что он будет работать и на других устройствах.

Существует также способ обойти эти эвристики браузера и сразу же показать баннер установки приложения. В Chrome это скрыто за флажком, поэтому перейдите на страницу chrome://flags, найдите "Обойти проверки вовлеченности пользователей" и включите этот флаг.

person Arnelle Balane    schedule 30.08.2017
comment
Уже включена проверка участия пользователя By Pass .from chrome flag, я думаю, что пропустил некоторые шаги в своем кодировании. - person TouchStarDev; 31.08.2017

arrow_upward
1
arrow_downward

Как насчет того, чтобы попробовать шаги из этого блога Как добавить всплывающее окно "Добавить на главный экран" в веб-приложение

Представлен Lighthouse от Google.

Это автоматизированный инструмент с открытым исходным кодом для улучшения качества ваших веб-приложений. Вы можете запустить его как расширение Chrome или из командной строки. Вы даете Lighthouse URL-адрес, который вы хотите проверить, он запускает множество тестов на странице, а затем создает отчет о том, насколько хорошо страница работала. Отсюда вы можете использовать неудачные тесты как индикаторы того, что вы можете сделать, чтобы улучшить свое приложение.

Есть два способа запустить Lighthouse: как расширение Chrome или как инструмент командной строки. Расширение Chrome предоставляет более удобный интерфейс для чтения отчетов. Инструмент командной строки позволяет интегрировать Lighthouse в системы непрерывной интеграции.

Следуйте этим шагам из блога и предложенным в SO post.

Шаг 1. Создайте файл сервис-воркера

создайте пустой файл service-worker.js в корневой папке. И поместите приведенный ниже код на свою html-страницу перед закрытием тега </html>.

<script>
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

Шаг 2. Создайте файл манифеста

создайте файл manifest.json в корневой папке. Добавьте тег ниже в раздел заголовка html-страницы.

<link rel="manifest" href="/manifest.json">

Шаг 3. Добавьте конфигурации в файл манифеста

Вот конфигурации, которые мы использовали.

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

В приведенном выше коде вы можете заменить свои собственные значения.

person MαπμQμαπkγVπ.0    schedule 30.08.2017
comment
Да, я применил все эти шаги, но это работает только из chrome devtool, не отображающего всплывающее окно. - person TouchStarDev; 31.08.2017