代码之家  ›  专栏  ›  技术社区  ›  oninross

A2H不启动移动铬

  •  1
  • oninross  · 技术社区  · 7 年前

    这是网站( https://oninross.github.io/not-hotdog-pwa/ ,您可以在chrome浏览器上查看它,它将执行离线缓存位。我在移动chrome浏览器中查看同一个链接,但它没有进行离线缓存。没有a2hs提示。

    我已经从以前的项目中复制了我的软件和js。现在不行了。你知道为什么吗?

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

    主.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.
                }
            };
        }
    }
    

    清单.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"
            }
        ]
    }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Mathias    7 年前

    看来你的服务人员没有注册
    这可能会有帮助
    https://developers.google.com/web/fundamentals/primers/service-workers/registration

    使用灯塔审计工具
    找出所有的错误,直到你看到下面的4
    “。” 可以提示用户安装Web应用程序 “。”

    一旦你看到这个,你应该会看到chrome mobile中的a2hs提示符

    灯塔审计结果 enter image description here