прогрессивное веб-приложение не могло работать в автономном режиме, когда на живом сервере - PullRequest
Новая
       24

прогрессивное веб-приложение не могло работать в автономном режиме, когда на живом сервере

0 голосов
/ 08 апреля 2019

Я новичок в pwa и работник службы, я сделал добавление файла manifest.json и работника службы в приложение. Это также показывает всплывающее окно для сохранения на домашний экран, Но он не работает в автономном режиме.

в автономном режиме (с помощью инструмента dev в chrome) под сообщением об ошибке консоли. 

The FetchEvent for "https://www.iservefinancial.com/" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) @ sw.js:23
sw.js:1 Uncaught (in promise) TypeError: Failed to fetch

Я также пытался изменить различные URL пытаясь использовать абсолютные URL-адреса, такие как /public/images/iserve-logo-blue.png а также пытался, давая прямые URL-адреса, как в фрагменте кода. он загружает ресурсы в автономном режиме на локальном хосте, но не может загрузить их на работающем сервере (с помощью инструмента chrome dev для автономного тестирования).

Код служебного рабочего файла 

const BASE_URL = "https://www.iservefinancial.com/";
self.addEventListener('install', function (event) {
   console.log('sw installed');
   event.waitUntil(
     caches.open('static').then(function (cache) {
    cache.addAll([
       BASE_URL,
       BASE_URL + 'public/js/jquery-3.2.1.min.js',
       BASE_URL + 'public/images/logos/iserve-logo-blue.png',                
      'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
       BASE_URL + 'public/css/fontawesomeak.css',
           BASE_URL + 'public/css/questrial-font.css'
    ]);
    })
   );
});

self.addEventListener('activate', function () {
    console.log('sw Activated');
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
        .then(function (res) {
            if (res) {
                return res
            } else {
                return fetch(event.request)
            }
        })
    );
});

Код ниже, который я включил в файл PHP view 

    <link rel="manifest" href="<?php echo $baseurl; ?>public/scripts/manifest.json">
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js', {
                scope: '.'
            }).then(function () {
                console.log('Service Worker Registered');
            });
        }

    </script>

manifest.json 

{
    "name": "iServeFinancial.Com",
    "short_name": "iServeFinancial",
    "start_url": "https://www.iservefinancial.com/",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#fff",
    "theme_color": "#1770a3",
    "icons": [{
            "src": "https://www.iservefinancial.com/public/images/logos/iserve-logo-blue.png",
            "sizes": "120x36",
            "type": "image/png"
        },
        {
            "src": "https://www.iservefinancial.com/public/images/logos/progressive.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://www.iservefinancial.com/public/images/logos/progressive1.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "https://www.iservefinancial.com/public/images/logos/progressive2.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "https://www.iservefinancial.com/public/images/logos/progressive2.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Страница должна работать как в сети, так и в автономном режиме.

1 Ответ

1 голос
/ 08 апреля 2019

Кажется, ваш сервисный работник не находится на одном уровне с вашим корневым путем.

Ваш sw.js зарегистрирован в /iserve/, и вы пытаетесь кэшировать JS-файл в /public/js/.

Также вы используете http://localhost/iserve/sw.js, который, я думаю, не является тем же доменом, что и ваш действующий веб-сайт, должен быть заменен на /iserve/sw.js или /sw.js в зависимости от заголовка вашего ответа.

Если вы хотите отправить свой sw.js в другую папку, вы должны добавить Service-Worker-Allowed:'/' в заголовок вашего ответа.

Также вот код, как я кеширую свой ответ, чтобы отключить сеть. 

    self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.open(CURRENT_CACHES).then(function(cache) {
            return fetch(event.request)
                .then(function(response) {
                    cache.put(event.request, response.clone());
                    return response;
                })
                .catch(() =>
                    cache.match(event.request).then(function(response) {
                        return response || caches.match('/');
                    }),
                );
        }),
    );
});
...