javascript - A2HS 无法在移动版 chrome 上启动

Question

这是网站 ( https://oninross.github.io/not-hotdog-pwa/ )，您可以在 Chrome 浏览器上查看它，它将执行其离线缓存位。我在移动 Chrome 浏览器中查看了相同的链接，但它没有执行离线缓存位。没有A2HS提示。

我从以前的项目中复制了我的 SW 和 JS。现在它没有。有什么想法吗？

sw.js

var version = '0.0.0',
    now = Date.now(),
    OFFLINE_URL = './pages/offline/',
    urlsToPrefetch = [
        './assets/not-hotdog-pwa/css/main.css',
        './assets/not-hotdog-pwa/js/main.js',
        './assets/not-hotdog-pwa/fonts/icomoon.woff',
        './assets/not-hotdog-pwa/models/output_labels.txt',
        './assets/not-hotdog-pwa/models/saved_model_web/tensorflowjs_model.pb',
        './assets/not-hotdog-pwa/models/saved_model_web/weights_manifest.json',
        './assets/not-hotdog-pwa/models/saved_model_web/group1-shard1of5',
        './assets/not-hotdog-pwa/models/saved_model_web/group1-shard2of5',
        './assets/not-hotdog-pwa/models/saved_model_web/group1-shard3of5',
        './assets/not-hotdog-pwa/models/saved_model_web/group1-shard4of5',
        './assets/not-hotdog-pwa/models/saved_model_web/group1-shard5of5',
        './manifest.json',
        OFFLINE_URL,
        './index.html?homescreen=1'
    ],
    CURRENT_CACHES = {
        prefetch: 'prefetch-cache-v' + version
    };

self.addEventListener('install', function (event) {
    console.log('Handling install event. Resources to prefetch:', urlsToPrefetch);

    event.waitUntil(
        caches.open(CURRENT_CACHES.prefetch).then(function (cache) {
            var cachePromises = urlsToPrefetch.map(function (urlToPrefetch) {                
                var url = new URL(urlToPrefetch, location.href);
                url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;

                var request = new Request(url, { mode: 'no-cors' });
                return fetch(request).then(function (response) {
                    if (response.status >= 400) {
                        throw new Error('request for ' + urlToPrefetch +
                            ' failed with status ' + response.statusText);
                    }

                    return cache.put(urlToPrefetch, response);
                }).catch(function (error) {
                    console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
                });
            });

            return Promise.all(cachePromises).then(function () {
                console.log('Pre-fetching complete.');
            });
        }).then(function () {
            return self.skipWaiting();
        }).catch(function (error) {
            console.error('Pre-fetching failed:', error);
        })
    );
});

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

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

self.addEventListener('fetch', function (event) {
    console.log('Handling fetch event for', event.request.url);

    event.respondWith(        
        caches.match(event.request).then(function (response) {
            if (response) {
                console.log('Found response in cache:', response);

                return response;
            }

            console.log('No response found in cache. About to fetch from network...');

            return fetch(event.request).then(function (response) {
                console.log('Response from network is:', response);

                return response;
            }).catch(function (error) {                
                console.error('Fetching failed:', error);

                return caches.match(OFFLINE_URL);
            });
        })
    );
});

ma​​in.js

 if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
        navigator.serviceWorker.register('./service-worker.js', { scope: './' })
            .then(function (registration) {
                console.log('registered service worker');

                registration.onupdatefound = function () {
                    // The updatefound event implies that registration.installing is set; see
                    // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
                    const installingWorker = registration.installing;

                    installingWorker.onstatechange = function () {
                        switch (installingWorker.state) {
                            case 'installed':
                                if (!navigator.serviceWorker.controller) {
                                    toaster('Caching complete!');
                                }
                                break;

                            case 'redundant':
                                throw Error('The installing service worker became redundant.');
                        }
                    };
                };
            })
            .catch(function (whut) {
                console.error('uh oh... ');
                console.error(whut);
            });
    });

    window.addEventListener('appinstalled', (evt) => {
        console.log('User added to homescreen');
    });

    // Check to see if the service worker controlling the page at initial load
    // has become redundant, since this implies there's a new service worker with fresh content.
    if (navigator.serviceWorker && navigator.serviceWorker.controller) {
        console.log("navigator.serviceWorker.controller.onstatechange:: " + navigator.serviceWorker.controller.onstatechange)
        navigator.serviceWorker.controller.onstatechange = function (event) {
            if (event.target.state === 'redundant') {
                toaster('A new version of this app is available.', 0); // duration 0 indications shows the toast indefinitely.
            }
        };
    }
}

list .json

{
    "lang": "en",
    "name": "Not Hotdog PWA",
    "short_name": "Not Hotdog PWA",
    "description": "",
    "start_url": "./index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ee0000",
    "theme_color": "#ee0000",
    "icons": [
        {
            "src": "./assets/not-hotdog-pwa/images/favicon/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image/png",
            "density": "0.75"
        },
        {
            "src": "./assets/not-hotdog-pwa/images/favicon/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "density": "1.0"
        },
        {
            "src": "./assets/not-hotdog-pwa/images/favicon/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "density": "1.5"
        },
        {
            "src": "./assets/not-hotdog-pwa/images/favicon/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "density": "2.0"
        },
        {
            "src": "./assets/not-hotdog-pwa/images/favicon/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png",
            "density": "3.0"
        },
        {
            "src": "./assets/not-hotdog-pwa/images/favicon/android-icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "density": "4.0"
        }
    ]
}

Answer 1

看起来你的 service worker 没有注册
这可能有帮助
https://developers.google.com/web/fundamentals/primers/service-workers/registration

使用灯塔审计工具
解决所有错误，直到您看到下面的 #4 下
“系统会提示用户安装 Web 应用程序”

一旦你看到了，你应该会在 chrome mobile 中看到 A2HS 提示

PWA 的 Lighthouse 审计结果