Question

我正在MVC项目上实现PWA，它在我的内页上工作正常，但在主页上却无法正常工作！我可以猜到问题出在清单的“ start_url”中，但是我不知道这是怎么回事。请注意：我的首页是/，然后是文化“ ar | en | fr”

master.cshtml-头

Event::listen(\Illuminate\Auth\Events\Login::class, function ($event) {
    \Log::info("User login: {$event->user->name}");
});

Event::listen(\Illuminate\Auth\Events\Logout::class, function ($event) {
    \Log::info("User logout: {$event->user->name}");
});

master.cshtml-正文

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

sw.js

<script>
(function e() {
        "use strict";
        if ("serviceWorker" in navigator) {
            window.addEventListener("load", function () {
                navigator.serviceWorker.register("/sw.js").then(function (e) {
                    console.log("ServiceWorker registration successful with scope: ", e.scope);
                    e.onupdatefound = function () {
                        var t = e.installing;
                        t.onstatechange = function () {
                            switch (t.state) {
                                case "installed":
                                    if (navigator.serviceWorker.controller) {
                                        //console.log("new update available");
                                        location.reload(true)
                                    }
                                    break;
                                default:
                            }
                        }
                    }
                }).catch(function (e) {
                    console.log("ServiceWorker registration failed: ", e)
                })
            })
        }
    })();
</script>

manifest.webmanifest.json

'use strict';

// Incrementing CACHE_VERSION will kick off the install event and force previously cached
// resources to be cached again.
const CACHE_VERSION = 1;
let CURRENT_CACHES = {
    offline: 'offline-v' + CACHE_VERSION
};
const OFFLINE_URL = 'offline.html';

function createCacheBustedRequest(url) {
    let request = new Request(url, { cache: 'reload' });

    if ('cache' in request) {
        return request;
    }

    let bustedUrl = new URL(url, self.location.href);
    bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now();
    return new Request(bustedUrl);
}

self.addEventListener('install', event => {
    event.waitUntil(
        fetch(createCacheBustedRequest(OFFLINE_URL)).then(function (response) {
            return caches.open(CURRENT_CACHES.offline).then(function (cache) {
                return cache.put(OFFLINE_URL, response);
            });
        })
    );
});

self.addEventListener('activate', event => {
    let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
        return CURRENT_CACHES[key];
    });

    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (expectedCacheNames.indexOf(cacheName) === -1) {
                        //console.log('Deleting out of date cache:', cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch', event => {
    if (event.request.mode === 'navigate' ||
        (event.request.method === 'GET' &&
            event.request.headers.get('accept').includes('text/html'))) {
        //console.log('Handling fetch event for', event.request.url);
        event.respondWith(
            fetch(event.request).catch(error => {
                //console.log('Fetch failed; returning offline page instead.', error);
                return caches.match(OFFLINE_URL);
            })
        );
    }
});

Answer 1

希望您能够解决您的问题。有一个manifest validator，您可以用来验证网络清单的格式是否正确。

我还写了article关于在用户屏幕上安装PWA的信息，也许它对您或其他任何登陆这里的人仍然有用。

PWA“添加到主屏幕”在首页中不起作用，在内页中正常工作

1 个答案: