PWA не открывается в автономном режиме на Android

Я пытаюсь реализовать функцию "Добавить на главный экран" в последней версии Chrome & Android (7). Я указал "автономный" в файле манифеста, но приложение открывается только в браузере. Я получил желаемое поведение раньше на том же устройстве, но не могу воспроизвести его.

Я вижу, что у кого-то была похожая проблема в этом вопросе. Я следовал предложенному решению - проверке свойств PWA с помощью Lighthouse - но даже с идеальным счетом 100 Lighthouse я все еще не могу заставить приложение открываться в автономном режиме.

Есть идеи?

Мой код для справки (который также находится на GitHub и размещен на страницах GitHub):

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A2HS Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0077c2"/>
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <p>Add To Home Screen</p>
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js')
        .then(reg => console.log('Registration success. Scope is ', reg.scope))
        .catch(err => console.log('Registration failed. ', err));
      }
    </script>
  </body>
</html>

sw.js

const cacheName = 'a2hs-test';
const resourcesToCache = [
  'index.html',
  'manifest.json',
  'icons/icon-512.png',
  'icons/icon-256.png',
  'icons/icon-96.png',
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(resourcesToCache);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

manifest.json

{
  "short_name": "A2HS",
  "name": "Add To Home Screen",
  "theme_color": "#0077c2",
  "background_color": "#42a5f5",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "icons/icon-96.png",
      "sizes": "96x96"
    },
    {
      "src": "icons/icon-256.png",
      "sizes": "256x256"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512"
    }
  ]
}

РЕДАКТИРОВАТЬ:

Я снова столкнулся с подобной проблемой на v63 и Canary v66, и кажется, что использование localhost вызвало ту же проблему - не удалось запустить в автономном режиме. Размещение одного и того же кода и доступ к HTTPS-сайту позволили мне запустить его в автономном режиме.

Источник

2 ответа

Решение

Согласно комментариям, это, кажется, просто ошибка, которая была исправлена ​​в Chrome 63+.

РЕДАКТИРОВАТЬ:

См. Изменения выше - хостинг через HTTPS также решил ту же проблему для меня на v63 и Canary v66. Возможно, локального хоста недостаточно для запуска приложений в автономном режиме.

Источник

Я нашел одно решение - использовать прокси из инструментов разработчика на удаленных устройствах. Вы должны использовать USB-кабель для подключения устройства и прокси приложения, таким образом, вы также можете использовать localhost.

Источник
Другие вопросы по тегам