渐进式 Web 应用程序在实时服务器上无法离线工作

Question

我是 pwa 和 service worker 的新手，我已经在 app.xml 中添加了 manifest.json 和 service worker 文件。它还显示了保存到主屏幕的弹出窗口， 但它在离线模式下不起作用。

在控制台错误消息下方离线（使用 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

我也尝试过更改不同的网址 通过尝试使用像“/public/images/iserve-logo-blue.png”这样的绝对网址 并且还尝试通过提供代码 sn-p 中的直接 url。 它正在本地主机中离线加载资源，但无法在实时服务器上加载。（使用 chrome 开发工具进行离线测试）。

Service Worker 文件的代码

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 视图文件中的以下代码

    <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"
        }
    ]
}

该页面应该可以在线和离线工作。

Answer 1

您的服务人员似乎与您的根路径不在同一级别。

你的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('/');
                    }),
                );
        }),
    );
});