清单错误：页面无法脱机工作答案

【问题标题】：Manifest Error: Page Does not Work Offline清单错误：页面无法脱机工作
【发布时间】：2020-08-08 16:17:02
【问题描述】：

我正在尝试制作 Progressive Web App。我已经创建了 sw.js (serviceworker) 文件并成功注册了它，但它仍然无法正常工作。给出的错误是：

页面无法离线工作。

我的 sw.js 的代码如下。

const cacheName='whitecabs'
const staticAssets = [
  '/404.html'
  '/bookingSubmit.js'
  '/bookQuote.js'
  '/head.css'
  '/index.html'
]
self.addEventListener("install", function e => {
  const cache = await caches.open(cacheName)
  await cache.addAll(staticAssets)
  return self.skipWaiting();
});

self.addEventListener('activate', e =>{
  self.clients.claim();
})

为什么会出现错误，它实际上是什么意思，我该如何解决？

希望尽快回复。

提前感谢您的帮助。

【问题讨论】：

使用 HTTPS URL 运行时，您的 PWA 是否通过 Chrome Lighthouse 工具作为有效的 PWA 传递？如果有问题，它通常会给出很好的提示。

标签： javascript json progressive-web-apps manifest

【解决方案1】：

sw.js 文件中有几个错误。比如 staticAssest 数组中没有逗号，那么 await 就是唯一的 async 函数等等。在处理它并从头开始再次编写代码之后，我能够解决问题。我在下面给出正确的代码。我认为这将有助于其他尝试制作 Web 应用程序的人。

const staticCacheName='whitecabcache'
const assets=[
  '/',
  '/404.html',
  '/app.js',
  '/bookingSubmit.js',
  '/bookQuote.js',
  '/head.css',
  '/index.html',
  '/locations.html',
  '/locationStyle.css',
  '/manaliPackages.html',
  '/menu.gif',
  '/shimlaPackages.html',
  '/style.css'
]

//install event
self.addEventListener('install', evt => {
  evt.waitUntil(
    caches.open(staticCacheName).then( cache => {
      console.log('caching cell assets');
        cache.addAll(assets)
    })
  )

})

//activate event
self.addEventListener('activate', evt => {
  console.log('service worker activated');
})

//fetch event
self.addEventListener('fetch', evt => {
  console.log('fetch Event', evt);
})

【讨论】：