PWA 开发中遇到的一些 bug 及解决方案-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及和 Web 技术的不断发展，PWA（渐进式 Web 应用程序）成为了前端开发中的热门话题。PWA 不仅可以提供类似原生应用的用户体验，还可以离线访问、推送通知等，具有很大的优势。但是，在 PWA 开发过程中，我们也会遇到一些 bug，本文将介绍一些常见的问题及解决方案。

1. Service Worker 无法缓存某些资源

在 PWA 中，Service Worker 负责离线缓存和网络请求拦截，是实现 PWA 离线访问的核心。但是，有时候我们会发现某些资源无法被缓存，比如一些第三方库或者图片等。这是因为 Service Worker 只能缓存同源资源，即资源的 URL 必须和 Service Worker 所在页面的 URL 同源。如果不同源，就无法被缓存。

解决方案：

将资源放在同源服务器上。这是最简单的解决方案，但不一定可行，尤其是在一些跨域场景下。
使用 CORS（跨域资源共享）来解决跨域问题。CORS 允许服务器在响应中添加一些头信息，告诉浏览器哪些资源可以跨域访问。具体实现可以参考 MDN 文档。
使用 Service Worker 的 fetch 事件来拦截请求并处理。fetch 事件会在网络请求发出后被触发，我们可以在其中判断请求的 URL 是否符合要求，如果是，则将其缓存。示例代码如下：

// javascriptcn.com 代码示例
self.addEventListener('fetch', function(event) {
  var url = event.request.url;
  if (url.includes('cdn.example.com')) { // 判断是否是需要缓存的资源
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request).then(function(response) {
          return caches.open('my-cache').then(function(cache) {
            cache.put(event.request, response.clone());
            return response;
          });
        });
      })
    );
  }
});

2. PWA 应用无法更新

PWA 应用的一个重要特性是可以自动更新，即用户访问网站时，Service Worker 会检查是否有更新的版本，并将其下载并安装。但是，有时候我们会发现应用无法更新，即使我们更新了代码。这是因为浏览器会根据 Service Worker 的缓存策略来判断是否需要更新，如果缓存策略没有变化，就不会触发更新。

解决方案：

修改缓存策略。我们可以在 Service Worker 中修改缓存策略，比如增加版本号、修改缓存时间等。这样，浏览器在检测到缓存策略变化后，就会重新下载并安装新的 Service Worker。示例代码如下：

// javascriptcn.com 代码示例
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    }).then(function() {
      return self.skipWaiting(); // 跳过等待，立即激活新的 Service Worker
    })
  );
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(keys) {
      return Promise.all(keys.map(function(key) {
        if (key !== 'my-cache') {
          return caches.delete(key); // 删除旧的缓存
        }
      }));
    }).then(function() {
      return self.clients.claim(); // 立即控制页面
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

手动触发更新。如果我们希望手动触发更新，可以使用 cache API 中的 CacheStorage.delete 方法删除缓存，然后重新加载页面。示例代码如下：

caches.delete('my-cache').then(function() {
  location.reload();
});

3. PWA 应用无法在 iOS 设备上添加到主屏幕

在 iOS 设备上，用户可以将 PWA 应用添加到主屏幕，类似原生应用，但是有时候我们会发现无法添加。这是因为 iOS 设备对 PWA 应用的支持不够完善，需要满足一些特定的条件才能添加到主屏幕。

解决方案：

使用 Apple Touch Icon。在 iOS 设备上，如果网站没有设置 Apple Touch Icon，就无法添加到主屏幕。Apple Touch Icon 是一种特殊的图标，可以通过以下方式设置：

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

其中，sizes 属性需要设置为 180x180，href 属性可以指向一个 PNG 图片。

提供清晰的名称和描述。在添加到主屏幕时，iOS 设备会显示应用的名称和描述，因此需要提供清晰的名称和描述，以便用户识别和使用。
使用 HTTPS。在 iOS 设备上，只有使用 HTTPS 协议的网站才能添加到主屏幕。

总结

本文介绍了 PWA 开发中常见的一些 bug 及解决方案，涉及到 Service Worker 缓存、应用更新和 iOS 设备支持等方面。在实际开发中，我们需要仔细排查问题，并根据具体情况选择合适的解决方案。希望本文能够对 PWA 开发者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6562e0c5d2f5e1655dca30e2