javascript - Progressive Web App：离线缓存在移动设备上不起作用

问题描述

我有一个简单的 PWA，可以在网上正常工作。我还测试了 Chrome 开发工具中的离线行为，并且 service worker 完美地完成了它的工作。但是当我从我的 Android 手机或 ios 手机运行应用程序时，只有欢迎页面可以完美地离线工作，但是当我们在第二页重定向时，它不能作为缓存存储离线工作。我的第一页代码用 html5、css 和 js 编写，其他页面代码用 jsp、css 和 js 编写。

这是服务人员：

    var staticCache = 'v0.002';
var files = [
  '/',
    './index.html',
    './index.html?homescreen=1',
    './?homescreen=1',
    '../home.jsp',
    './user/test/SecondPage.jsp',
    './user/test/ThirdPage.jsp',
    './user/test/menu.jsp',
    './user/test/FourthPage.jsp',
    './user/test/FifthPage.jsp',
    './manifest.json'
];


// Install
self.addEventListener('install', e => {
    self.skipWaiting();
    e.waitUntil(
        caches.open(staticCache).then(cache => {
            return cache
                .addAll(files)
                .then(() => console.log('App Version: ' + staticCache))
                .catch(err => console.error('Error adding files to cache', err));
        }),
    );
});

// Activate
self.addEventListener('activate', e => {
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cache => {
                    if (cache !== staticCache) {
                        console.info('Deleting Old Cache', cache);
                        return caches.delete(cache);
                    }
                }),
            );
        }),
    );
    return self.clients.claim();
});
self.addEventListener('fetch', function(event) {
     console.log(event.request.url);

     event.respondWith(
       caches.match(event.request).then(function(response) {
         return response || fetch(event.request);
       })
     );
    });
async function cacheFirst(req) {
    let cacheRes = await caches.match(req);
    return cacheRes || fetch(req);
}

async function networkFirst(req) {
    const dynamicCache = await caches.open('dynamic');
    try {
        const networkResponse = await fetch(req);
        if (req.method !== 'POST') dynamicCache.put(req, networkResponse.clone());
        return networkResponse;
    } catch (err) {
        const cacheResponse = await caches.match(req);
        return cacheResponse;
    }
}

当通过 Chrome 开发工具在其 url 上测试应用程序时，它也会离线响应。但因为它不能在电话上工作。

这是我的第一页，它作为离线工作正常。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <meta name="description" content="test" />
        <meta name="theme-color" content="#44A752" />
        <meta name="msapplication-TileColor" content="#44A752" />
        <meta name="msapplication-TileImage" content="./images/logo.png" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta
            name="apple-mobile-web-app-status-bar-style"
            content="black-translucent"
        />
        <meta name="apple-mobile-web-app-title" content="test" />
        <meta name="application-name" content="test" />
    <title>test pwa</title>
    <link rel="manifest" href="manifest.json" />
    <link rel="stylesheet" href="css/bootstrap/main.css" />
 <script src="js/bootstrap/jquery.min.js" type="text/javascript"></script>

  </head>

  <body>

  <script>
  if ('serviceWorker' in navigator) {
        // we are checking here to see if the browser supports the service worker api
 navigator.serviceWorker.register('./sw.js').then(function(registration) {
                      // sometime later…
                      registration.update();
                      registration.addEventListener('updatefound', function() {
                          var installingWorker = registration.installing;
                          console.log('A new service worker is being installed:',
                            installingWorker);    
                      });
               // Registration was successful
               console.log('Service Worker registration was successful with scope: ', registration.scope);
             }, function(err) {
             console.log('ServiceWorker registration failed: ', err);
             });

          if (navigator.onLine)
            {
            // alert('online');
            } else {
                    alert('You have lost internet access!');
                    }

          window.addEventListener('online',function()  {
              alert("You're now back online! ");
            });

            window.addEventListener('offline', function() {
                alert("You're offline! ");
            });

     }


</script>
        <!-- Wrapper -->
            <div id="wrapper" class="divided">

                <!-- One -->
                    <section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">

                        <div class="content" style="background-color: #E0FFFF; border: 1px solid black;">
                        <img class="img-responsive" alt="" src="images/logo.png">
                            <h1>test</h1>

                            <form action="home.jsp" method="post" onsubmit="return validateForm();">
                             <input class="button big wide smooth-scroll-middle" value="Login" type="submit">
                            </form>
                        </div>

                        <div class="image">
                            <img src="img\slides\flexslider/first.jpg" alt="" />
                        </div>

                    </section>
</div>
            <script src="js/bootstrap/jquery.min.js"></script>
            <script src="js/bootstrap/jquery.scrollex.min.js"></script>
            <script src="js/bootstrap/jquery.scrolly.min.js"></script>
            <script src="js/bootstrap/breakpoints.min.js"></script>
            <script src="js/bootstrap/util.js"></script>
  </body>
</html>

它在桌面浏览器上运行良好。仅当从移动设备作为 PWA 运行或运行移动浏览器时才会出现脱机问题。

离线模式下第二页的屏幕截图......

标签： javascripthtmljspservice-workerprogressive-web-apps

javascript - Progressive Web App：离线缓存在移动设备上不起作用

问题描述

解决方案

推荐阅读