Установленный pwa не запускается в автономном режиме - PullRequest
Новая
       23

Установленный pwa не запускается в автономном режиме

0 голосов
/ 25 января 2019

Я сделал PWA, используя офлайн-плагин webpack, настроенный так: 

// Put it in the end to capture all the HtmlWebpackPlugin's
// assets manipulations and do leak its manipulations to HtmlWebpackPlugin
new OfflinePlugin({
  ServiceWorker: {
    events: true,
  },
  relativePaths: false,
  publicPath: '/',
  appShell: '/',

  // No need to cache .htaccess. See http://mxs.is/googmp,
  // this is applied before any match in `caches` section
  excludes: ['.htaccess'], // index.html

  caches: {
    main: [':rest:'],

    // All chunks marked as `additional`, loaded after main section
    // and do not prevent SW to install. Change to `optional` if
    // do not want them to be preloaded at all (cached only when first loaded)
    additional: ['*.chunk.js'],
  },

  // Removes warning for about `additional` section usage
  safeToUseOptionalCaches: true,
  autoUpdate: true,
}),

new WebpackPwaManifest({
  name: 'my_app_name',
  short_name: 'my_app_short_name',
  description: 'my_app_description',
  background_color: '#364150',
  theme_color: '#b1624d',
  icons: [
    {
      src: path.resolve('app/images/icon-512x512.png'),
      sizes: [72, 96, 120, 128, 144, 152, 167, 180, 192, 384, 512],
    },
  ],
}),

Так что сервисный работник работает, и я вижу его на Chrome Devtools.PWA распознается Chrome, и когда я перехожу к своему URL-адресу (размещенному на heroku в https), Chrome запрашивает рекомендации по установке на мобильном телефоне.Затем я устанавливаю приложение на свой телефон Android, авторизируюсь и использую его как всегда.Когда я перехожу в автономный режим, все по-прежнему работает, я могу перемещаться по всему своему приложению, я могу свести его к минимуму и снова открыть, пока все хорошо.Когда я ЗАКРЫВАЮ свое приложение (с помощью диспетчера задач), я перехожу в автономный режим, и я открываю его, он будет отображать либо белую страницу, либо запрос на отсутствие соединения.Какие-нибудь советы?В зависимости, как это на самом деле работает?Каждый раз, когда я нажимаю на установленный pwa, он проверяет, есть ли у меня соединение, и загружаю (если имеется) более новую версию приложения?

1 Ответ

0 голосов
/ 28 января 2019

Исходя из этой ссылки , вам нужно дополнительное условие для корневого запроса при обработке события выборки. 

self.addEventListener('fetch', function(event) {
    // … either respond with the cached object or go ahead and fetch the actual URL
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                // retrieve from cache
                return response;
            }

            // if not found in cache, return default offline content (only if this is a navigation request)
            if (event.request.mode === 'navigate') {
                return caches.match('./index.html');
            }

            // fetch as normal
            return fetch(event.request);
        })
    );
});

Также из этого потока есть обязательный параметр scope, который необходимо указать в клиентском JavaScript при подключении к серверу, если он не работает по корневому (/) пути .

...