封面图加载中

让你的网站初步适配PWA

技术分享
2025-01-19 09:46
天气 雾 3°~15°
心情 非常愉快
热度 65
地点 上海虹桥
本文共计
预计阅读
上海虹桥

近年来，渐进式 Web 应用程序（Progressive Web App，简称 PWA）因其能够在用户体验和性能之间取得平衡而受到越来越多开发者的青睐。PWA 结合了网页和本地应用的优势，例如离线访问、快速加载、推送通知以及添加到主屏幕等功能。这篇文章将带领你了解如何让你的网站初步适配 PWA。

什么是 PWA？

PWA 是一种增强型的 Web 应用程序，通过利用现代浏览器的新特性（如 Service Workers 和 Web App Manifest），提供类似原生应用的用户体验。它具有以下特点：

  1. 可靠性：即使在网络条件较差或无网络的情况下，应用仍能正常运行。

  2. 性能：加载速度快，界面流畅，用户体验接近本地应用。

  3. 可安装性：用户可以将 PWA 添加到设备的主屏幕，就像安装了本地应用程序一样。

实现 PWA 的基本步骤

1. 添加 Web App Manifest 文件

Manifest 文件是 JSON 格式的配置文件，它定义了 PWA 的元信息，如应用名称、图标、启动页面等。将该文件链接到 HTML，可以让浏览器识别你的 PWA。

示例代码

创建一个名为 manifest.json 的文件，并添加以下内容：

{
  "name": "示例 PWA 应用",
  "short_name": "PWA 示例",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

然后在 HTML 的 <head> 标签中添加：

<link rel="manifest" href="/manifest.json">

2. 使用 Service Worker

Service Worker 是 PWA 的核心组件，它运行在浏览器后台，可以拦截和缓存网络请求，从而实现离线功能。

编写 Service Worker

创建一个名为 sw.js 的文件，并添加以下内容：

const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png',
  '/icons/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(urlsToCache);
    })
  );
});

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

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

注册 Service Worker

在你的主 JavaScript 文件中注册 Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker 注册成功:', registration);
      })
      .catch(error => {
        console.log('Service Worker 注册失败:', error);
      });
  });
}

3. 启用 HTTPS

PWA 要求在 HTTPS 环境下运行（本地开发环境下可使用 localhost）。你可以通过以下方式启用 HTTPS：

  • 使用免费的 Let’s Encrypt 证书。

  • 在本地使用工具如 mkcert 来生成自签名证书。

4. 测试 PWA

使用 Chrome 开发者工具中的 Lighthouse 进行测试：

  1. 打开开发者工具（F12）。

  2. 切换到 "Lighthouse" 标签。

  3. 勾选 "Progressive Web App"，然后点击 "Generate report"。

Lighthouse 会生成一份评分报告，显示你的网站在 PWA 方面的表现。

适配 Hexo Butterfly 主题

要使您的 Hexo 博客在使用 Butterfly 主题时支持 PWA 功能，可以按照以下步骤进行配置：

1. 安装 hexo-offline 插件

在您的 Hexo 工作目录中，运行以下命令安装 hexo-offline 插件：

npm install hexo-offline --save

2. 创建 hexo-offline 配置文件

在 Hexo 根目录下创建一个名为 hexo-offline.config.cjs 的文件，并添加以下内容：

module.exports = {
  globPatterns: ['**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}'],
  globDirectory: 'public',
  swDest: 'public/service-worker.js',
  maximumFileSizeToCacheInBytes: 10485760, // 10 MB
  skipWaiting: true,
  clientsClaim: true,
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/cdn\.example\.com\/.*/, // 将 example 替换为您的 CDN 域名
      handler: 'CacheFirst'
    }
  ]
};

此配置指定了要缓存的文件类型、缓存目录以及 Service Worker 的相关设置。

3. 修改主题配置文件

打开 Butterfly 主题的配置文件 _config.butterfly.yml，启用 PWA 选项，并设置相关参数：

pwa:
  enable: true
  manifest: /img/pwa/manifest.json
  apple_touch_icon: /img/pwa/apple-touch-icon.png
  favicon_32_32: /img/pwa/32.png
  favicon_16_16: /img/pwa/16.png
  mask_icon: /img/pwa/safari-pinned-tab.svg

确保上述路径下存在相应的图标文件，或者根据需要调整路径。

4. 创建 manifest.json

在 source/img/pwa/ 目录下创建 manifest.json 文件，内容如下：

{
  "name": "Hexo PWA 示例",
  "short_name": "HexoPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#333333",
  "icons": [
    {
      "src": "/img/pwa/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/pwa/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

5. 生成并部署

运行以下命令生成静态文件并部署到服务器：

hexo clean
hexo generate
hexo deploy

优化 PWA 体验

离线支持

通过缓存更多资源（如图片、字体），提升离线用户体验。

推送通知

集成 Web Push API，向用户发送通知，进一步增强交互性。

动态缓存策略

使用 Workbox 库实现更复杂的缓存策略，例如动态内容缓存或缓存过期控制。

结语

通过以上步骤，你可以让你的网站初步适配 PWA，从而为用户提供更加优质的体验。如果想进一步优化，可以研究更多高级功能，例如后台同步和渐进式加载等。PWA 是未来 Web 开发的重要趋势，赶快行动起来，让你的网站更上一层楼！