PWA让你的网站如app般丝滑

2025-04-19

字数统计: 607字 | 阅读时长≈ 2分

一、什么是PWA?

PWA,全称为Progressive Web App(渐进式Web应用), 可以让网站像app一样被安装、使用。PWA的核心就是为了提升用户体验，提高用户转化率。

PWA只在https站点下才支持。

网站要支持pwa，最好采用响应式设计，适配多端尺寸显示。

二、核心点

2.1 manifest.json文件

PWA核心点之一就是web清单文件，只有在网站根目录放置了manifest.json文件，浏览器(大多浏览器支持)才能显示install 安装应用的图标。

清单文件包含应用名称、logo图标、主题颜色等，下面是基础manifest.json示例

{
  "name": "暮秋人的个人网站 | Hatch's Blog",
  "short_name": "暮秋人的个人网站",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#f9c5aa",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

确保你的配置的图标可正常访问, 然后在网站首页head 添加link引入该文件

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

部署成功后，你就可以在网站搜索栏找到install图标，点击进行安装

安装pwa

更多的功能可在web应用清单配置查询

2.2 Service Worker

PWA核心点之二，Service Worker非常强大，可以拦截所有http/https网络请求，决定是从缓存加载还是走网络服务，从而让网站应用在网络不稳定的环境下正常访问，甚至可实现离线访问。

pwa-service-worker

Service Worker很强大，但并非所有浏览器支持，下图是浏览器支持情况

pwa-caniuse-service-worker

2.2.1 检测浏览器是否支持

1
2
3

if ('serviceWorker' in navigator) {
  // register service worker
}

2.2.2 注册Service Worker

1	navigator.serviceWorker.register("/sw.js")

2.2.3 sw.js文件内容

// service worker 已安装
self.addEventListener("install", event => {

});
// service worker 激活事件
self.addEventListener("activate", event => {

});
// 当主应用线程发出网络请求时，service worker可以拦截网络请求并发送自定义响应数据
self.addEventListener("fetch", (event) => {

})
// 页面通信消息
self.addEventListener("message", event => {

})

参考链接

本文作者： 暮秋人
本文链接： https://muqiuren.pages.dev/2025/04/pwa-manifest-json/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！