Progressive Web App (PWA) 是一种增强型网页应用形式,具备:

  • 可被安装(添加到主屏幕)
  • 离线访问
  • 类似原生 App 的体验

实现 PWA 核心需要以下三个要素:

  1. manifest.json: 用于描述你的 Web App 的外观和行为,如图标、名称、主题色等。
  2. service-worker.js: 是一个浏览器后台脚本,可以拦截网络请求、缓存资源,实现离线访问。
  3. 在 HTML 中注册 Service Worker 和引入 manifest

第一步:添加 manifest.json

创建 static/manifest.json:

{
  "name": "Hugo PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

第二步:添加 service-worker.js

在 static/service-worker.js 中添加:

const cacheName = 'v1';

const cacheAssets = [
  '/',
  '/index.html',
  '/style.css',
  // 可以添加其他需要缓存的资源路径
];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      console.log('Caching files...');
      return cache.addAll(cacheAssets);
    })
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    fetch(e.request).catch(() => caches.match(e.request))
  );
});

第三步:在页面中注册 service worker 和引入 manifest

修改你的layouts/partials/head.html(或 baseof.html 中的 <head> 部分):

<link rel="manifest" href="/manifest.json" />
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(reg => console.log('Service Worker registered', reg))
      .catch(err => console.log('Service Worker failed', err));
  }
</script>

测试

然后就可以在浏览器中测试你的 PWA 了。并不是所有的浏览器多支持PWA。测试时,发现firefox支持PWA,表现就是在浏览器菜单里面操作添加应用到主屏幕后,通过桌面的ICON访问网站,是一个全屏窗口的网站,不在出现浏览器的地址栏和菜单的UI。测试发现,Edge浏览器不支持PWA。以上测试基于Android系统。