PWA - манифест не обнаружен после обновления или перенаправления страницы - PullRequest
0 голосов
/ 07 июня 2019

Я пытаюсь создать прогрессивное веб-приложение.

Когда я впервые захожу в приложение, все в порядке.манифест загружен успешно, также служащий сделал. манифест в порядке IMG

Я обнаружил еще одну проблему переполнения стека.Подсказка заключалась в том, чтобы попробовать запустить страницу в Chrome DevTools Audits.И я получил почти превосходный результат (также HTTP-трафик к HTTPS зеленый, игнорируйте восклицательный знак. Это из-за localhost. На домене все в порядке) devTools audit ok IMG

Проблема в следующем:Когда страница загружается из кэша, и я пытаюсь обновить страницу с помощью Ctrl + R или кнопки обновления или перенаправить страницу (например, выйти из системы), я получил неопределенное сообщение в окне приложения. browser err IMG

А в консоли devTools просто бессмысленная ошибка (потому что я не использую favicon.ico во всем приложении) favicon.ico err IMG

В тот момент, когда появляется эта ошибка, манифест также не обнаруживается.Я думаю, что это может быть проблемой.Но я не знаю, как это решить. Ошибка манифеста IMG

Я обнаружил, что когда я очищаю хранилище в приложении devTools и снова обновляю страницу, все снова в порядке.Но когда я пытаюсь перенаправить, снова происходит то же самое.

У кого-нибудь есть совет?Большое спасибо.

manifest.json

{
    "prefer_related_applications": false,
    "short_name": "test",
    "name": "test test",
    "icons": [
    {
        "src": "images/resources/main/logo-icon-red.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "images/resources/main/logo-icon-red.png",
        "sizes": "512x512",
        "type": "image/png"
        }
    ],
    "background_color": "#eaeaea",
    "theme_color": "#2e7d97",
    "start_url": "/edsa-test/test.sign/in",
    "orientation": "portrait",
    "display": "standalone",
    "scope": "/"
}

serviceworker.js

var cache_name = 'test-cache-v12';
var cached_urls = [
  'css/style_login.css',
  'css/style_body.css',
  'css/style_header.css',
  'css/style_config.css',
  'css/style_uni.css',
  'css/checkboxes.css',
  'css/responsive.css'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cache_name)
      .then(cache => cache.addAll(cached_urls))
  );
});

self.addEventListener('fetch', function(event) {
    //console.log('Fetch event for ', event);
    event.respondWith(
      caches.match(event.request).then(function(response) {
        if (response) {
          //console.log('Found ', event.request.url, ' in cache');
          return response;
        }
        //console.log('Network request for ', event.request.url);
        return fetch(event.request).then(function(response) {
          if (response.status === 404) {
            return caches.match('css/style_body.css');
          }
          return caches.open(cached_urls).then(function(cache) {
           cache.put(event.request.url, response.clone());
            return response;
          });
        });
      }).catch(function(error) {
        console.log('Error, ', error);
        return caches.match('offline.html');
      })
    );
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheNames) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
          console.log("removing cache")
          return true
        }).map(function(cacheNames) {
          return caches.delete(cacheNames);
        })
      );
    })
  );
});

self.addEventListener('message', function (event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

layout.latte (index) - часть с вызывающим манифестом и serviceworker

<link rel="manifest" href="{$basePath}/manifest.json">
<script>
$(document).ready(function(){
                let newWorker;
                function showUpdateBar() {
                    let snackbar = document.getElementById('snackbar');
                    snackbar.className = 'show';
                }

                if ('serviceWorker' in navigator) {
                    //window.addEventListener('load', function() {
                    navigator.serviceWorker.register({$basePath} + "/serviceworker.js").then(function(registration) {
                    // Registration was successful
                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
                    newWorker = registration.waiting;
                    //console.log("before -- newworker:", newWorker, "registration:", registration, "waiting:", registration.waiting, "installing:", registration.installing)
                    if(newWorker) {
                        console.log("new worker found, continue")
                        //newWorker.addEventListener('statechange', () => {
                        // Has network.state changed?
                        console.log("state", newWorker.state)
                            switch (newWorker.state) {
                                case 'installed': {
                                    if (navigator.serviceWorker.controller) {
                                        // new update available
                                        console.log("already installed")
                                        showUpdateBar();
                                    }
                                    // No update available
                                    break;
                                }
                                default: {
                                    console.log(newWorker.state)
                                }
                            }
                    } else {
                        console.log("no new worker found")
                    }
                    console.log("after -- newworker:", newWorker, "registration:", registration, "waiting:", registration.waiting, "installing:", registration.installing) 
                    });

                    let refreshing
                    console.log("refreshing located:", refreshing)
                    navigator.serviceWorker.addEventListener('controllerchange', function () {
                    console.log("service worker controller change", refreshing)
                    if (refreshing) return;
                        console.log("is refreshing")
                        window.location.reload();
                        refreshing = true;
                    });
                }

                document.getElementById('reload').addEventListener('click', function(){
                    console.log("clicked reload");
                    console.log(newWorker.postMessage({ action: 'skipWaiting' }))
                    //newWorker.postMessage({ action: 'skipWaiting' });
                    console.log("after click:", newWorker)
                });
        })
...