Question

我正在尝试创建渐进式Web应用程序。

当我第一次去应用程序时，一切都很好。清单加载成功，服务人员也做了。 manifest ok IMG

我在堆栈溢出时发现了另一个问题。提示是要尝试在chrome DevTools审核中运行该页面。而且我得到了近乎完美的结果（HTTP到HTTPS的通信也是绿色的，请忽略惊叹号。这是因为localhost。在域上还可以） devTools audit ok IMG

问题是：当页面从缓存加载并且我尝试使用ctrl + r或刷新按钮刷新页面或重定向页面（例如注销）时，我在应用程序窗口中收到未定义的消息。 browser err IMG

并且在devTools控制台中只是无意义的错误（因为我没有在整个应用程序中使用favicon.ico） favicon.ico err IMG

此错误出现时，也未检测到清单。我认为这可能是问题所在。但是我不知道如何解决这个问题。 manifest fail 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（索引）-具有调用清单和服务工作人员的部分

<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)
                });
        })

PWA-页面刷新或重定向后未检测到清单

0 个答案: