当前位置：首页 > article >正文

渐进式Web应用(PWA)基础教程

article 2025/3/27 16:03:55

渐进式Web应用(PWA)基础教程

什么是PWA

渐进式Web应用(Progressive Web App, PWA)是一种结合了Web和原生应用优势的现代应用程序。它们在浏览器中运行，但能提供类似原生应用的用户体验。PWA可以安装到用户的主屏幕，实现离线工作，接收推送通知，以及访问设备硬件功能。

PWA遵循渐进式增强原则，意味着它们能在所有浏览器中工作，并在支持现代特性的浏览器中提供更丰富的体验。

PWA的核心特性

可靠性(Reliable): 即使在不稳定的网络条件下也能加载和运行
快速(Fast): 快速响应用户交互，平滑的动画和滚动
引人入胜(Engaging): 提供沉浸式全屏体验，可安装到主屏幕

PWA的技术组件

Web App Manifest

Web App Manifest是一个JSON文件，它告诉浏览器关于你的Web应用的信息，以及它应该如何在用户的移动设备或桌面上表现。

基本的manifest.json文件示例:

{
  "name": "我的第一个PWA",
  "short_name": "FirstPWA",
  "description": "我的第一个渐进式Web应用",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196f3",
  "icons": [
    {
      "src": "images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

将manifest链接到你的HTML文件:

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

Service Workers

Service Worker是一个在浏览器背景中运行的脚本，它作为Web应用、浏览器和网络（如果可用）之间的代理服务器。Service Worker使得离线体验成为可能，并允许缓存应用资源。

基本的Service Worker注册:

// 在你的主JavaScript文件中
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);
      });
  });
}

基本的Service Worker文件(sw.js):

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.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 => {
        // 命中缓存则返回缓存的响应
        if (response) {
          return response;
        }
        // 未命中缓存则发起网络请求
        return fetch(event.request)
          .then(response => {
            // 检查是否收到有效的响应
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 克隆响应
            const responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

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

// 激活阶段清除旧缓存
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});