pwa程序,清单文件测试有效,为什么不起效果?

244 阅读1分钟
一个很简单的demo程序,上传在github上面,通过github pages来做https访问,可是在手机上面测试,清单文件不起效,用的是ios chrome 68?


// manifest.json
{
  "name": "Progressive Times web app",
  "short_name": "Progressive Times",
  "start_url": "./index.html",
  "theme_color": "#FFDF00",
  "background_color": "#58bc58",
  "display": "standalone",
  "icons": [
    {
      "src": "./images/homescreen.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./images/homescreen-144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

// index.html
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js').then(function(registration) {
      // Registration was successful
    });
  }
 </script>

// sw.js
var cacheName = 'latestNews-v1';

// Cache our known resources during install
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
    .then(cache => cache.addAll([
      './js/main.js',
      './js/article.js',
      './images/newspaper.svg',
      './css/site.css',
      './data/latest.json',
      './data/data-1.json',
      './article.html',
      './index.html'
    ]))
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request, { ignoreSearch: true })
    .then(function(response) {
      if (response) {
        return response;
      }
      var fetchRequest = event.request.clone();

      return fetch(fetchRequest).then(
        function(response) {
          if(!response || response.status !== 200) {
            return response;
          }

          var responseToCache = response.clone();
          caches.open(cacheName)
          .then(function(cache) {
            cache.put(event.request, responseToCache);
          });

          return response;
        }
      );
    })
  );
});