PWA 应用在低电量和网络连接慢的设备上的表现

什么是 PWA

PWA (Progressive Web App) 是渐进式 Web 应用的缩写，是一种结合了 Web 和 Native 应用两者优点的新型应用。它具有 Web 应用的无需下载、安装即可直接访问的优点，也可以通过添加至桌面、全屏模式等方式模拟 Native 应用的操作体验；同时还支持 Web App Manifest、Service Worker 等技术，实现离线访问、推送通知等功能。PWA 应用可以通过 Manifest 文件的形式被添加至设备主屏幕，无需通过应用商店下载。

低电量下的 PWA 表现和解决方案

在低电量下，PWA 应用需要特别注意资源的消耗和优化。以下介绍几种常见的优化方案：

1. 图片懒加载

图片是 Web 页面中常见的资源并占据了大量的带宽和内存，因此在低电量下需要特别注意图片的加载情况。通过懒加载可以实现在页面实际需要元素时加载图片，节省了网页的总加载量，降低了设备负担。

示例代码：

// www.javascriptcn.com code example
// 单张图片的懒加载
const img = new Image();
img.src = 'placeholder.jpg';
img.addEventListener('load', () => {
  img.src = 'realImage.jpg';
});

// 多张图片的懒加载
const images = document.querySelectorAll('img[data-src]');
const len = images.length;

function loadImage(index) {
  const img = images[index];
  const src = img.getAttribute('data-src');

  if (!src) return;

  img.src = src;
  img.removeAttribute('data-src');

  if (index < len - 1) {
    loadImage(index + 1);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  loadImage(0);
});

2. 减少请求次数

在低电量设备上，网络请求可能会比较耗费电量。因此，在设计页面时需要尽可能减少不必要的请求次数。例如合并 CSS、JS 文件、使用 iconfont 代替小图标等方法。

3. Service Worker 缓存

使用 Service Worker 缓存可以大大地减少设备对服务器的网络请求，从而降低电量消耗。使用 Service Worker 可以将静态资源缓存在本地，并在不必要的时候直接从 Service Worker 中读取，避免了网络请求的消耗。

网络连接慢的 PWA 表现和解决方案

在网络连接慢的情况下，PWA 应用需要采取以下优化方案：

1. PWA 页面优化

PWA 的首屏速度对用户体验至关重要。优化首页加载速度、减少请求次数和提高性能是改进首次加载速度的关键。

示例代码：

// www.javascriptcn.com code example
<!-- 使用 link 标签手动载入关键css并异步载入其他资源 -->
<!doctype html>
<html>
  <head>
    <link rel='preload' href='keyfile.css' as='style' onload='this.onload=null;this.rel="stylesheet"'>
    <noscript><link rel="stylesheet" href="keyfile.css"></noscript>
    <script async src='other.js'></script>
  </head>
  <body>
    ...
  </body>
</html>

<!-- 预处理可以加快首次渲染 -->

<!doctype html>
<html>
 <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Document</title>
    <link rel='stylesheet' type='text/css' href='index.min.css'>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const links = document.querySelectorAll('link[rel=preload][as=style]');
            const loaded = [];

            for (let i = 0; i < links.length; ++i) {
                const path = links[i].href;

                if ('requestIdleCallback' in window) {
                    window.requestIdleCallback(() => {
                        const tag = document.createElement('link');
                        tag.rel = 'stylesheet';
                        tag.href = path;
                        document.head.appendChild(tag);

                        loaded.push(i);

                        if (loaded.length == links.length) {
                            document.body.style.opacity = 1;
                        }
                    });
                } else {
                    const tag = document.createElement('link');
                    tag.rel = 'stylesheet';
                    tag.href = path;
                    document.head.appendChild(tag);

                    loaded.push(i);

                    if (loaded.length == links.length) {
                        document.body.style.opacity = 1;
                    }
                }
            }
        });
    </script>
 </head>
 <body style='opacity: 0;'>
    ...
 </body>
</html>

2. Service Worker 脱机处理

Service Worker 还可以像前面所说的那样采用缓存策略。当用户第一次载入页面后，Service Worker 可以将页面信息和数据缓存在本地，这样用户可以体验快速内容刷新和搜索功能。

结语

PWA 应用的发展已经成为了前端开发的新趋势，它具有多个优势，但同时也存在一些问题。本文讨论了如何在低电量和网络连接慢的情况下优化 PWA 应用的表现，提出了一些可行的解决方案。希望这些提示对你的 PWA 应用开发有所启发，能够优化应用的表现，改善用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfd6cce46428fe9ebf79bc