PWA的学习之路

PWA介绍

PWA是什么

MDN解释

PWA（Progressive Web Apps，渐进式Web应用）运用现代的Web API以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

• 可以提升WebApp体验的一种新方法，能给用户原生应用的用户体验
• 创建跨平台Web桌面应用程序

总结：PWA能做到如此，不是指某一项特定的技术，而是在原有的WebApp基础之上通过添加Manifest配置文件和Service Worker以及搭配缓存使用，可以让原有的应用具备安装和离线的功能

PWA优势

• 渐进式
  • 在原有的基础上添加PWA功能，不影响原有应用
• 可安装/原生体验
  • 可以像原生App应用一样添加在桌面，点击主屏幕图标可以实现启动动画以及隐藏地址栏
• 离线功能
  • 在Service Worker和缓存 api实现离线缓存功能。可以做到离线访问使用一些离线功能
• 推送
  • 通过推送消息点击，快速打开应用，用户促活

这里展示一下手机端Demo运行效果

PWA相关技术点

源码请点击这里下载

一个标准的PWA应用应该具备以下3个特征

• https访问或者localhost
• Service Worker
• Manifest

Manifest

manifest.json可以使应用具备添加桌面图标的能力。配置文件内容：应用名称，图标，启动屏，主题色，应用样式等等

相比传统的WebApp入口：网址，收藏夹，书签；PWA应用入口更直接，方便快捷

• 添加桌面图标
• 添加启动动画，避免白屏
• 隐藏浏览器的默认相关UI，看上去更像一个原生应用

在index.html引入manifest.json文件

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

manifest.json常用的配置信息：

{
    "name": "pwa-basic",
    "short_name": "PWA基础",
    "start_url": "/index.html",
    "icons":[
        {
            "src": "/images/icon128.png",
            "sizes": "128x128",
            "type":"image/png"
        },
        {
            "src": "/images/icon144.png",
            "sizes": "144x144",
            "type":"image/png"
        }
    ],
    "description": "这个是一个PWA基础的Demo",
    "background_color": "skyblue",
    "theme_color": "black",
    "display": "standalone"
}

• name 应用名称，添加时显示的名称，启动屏下方显示的名称
• short_name 当应用名称过长，桌面上显示的名称
• start_url 点击桌面图标加载的入口地址
• icons 桌面的图标，启动屏中间显示图标
• description
• background_color 启动屏的背景颜色
• theme_color 主题颜色
• display
  • fullscreen全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏
  • standalone 状态栏除外，无地址栏
  • minimal-ui 有状态栏，有浏览器地址栏

更多配置项

Cache Api

MDN-Cache文档

Service Worker

什么是Service Worker

MDN解释

Service workers 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截作用域下边的网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源

Service Worker的功能（除了具备Web Worker功能以外）

• 安装成功，运行于浏览器后台。可以拦截作用域范围下所有的页面http请求
• 利用缓存API可以让离线内容可控（由开发者控制）
• 必须使用https。除了使用本地开发环境调试时域名可以使用localhost

Service Worker兼容性 94%的浏览器都支持

Service Worker 的使用

以下简称SW

SW独立于 Web 页面的生命周期。分为5步：注册、安装成功（安装失败）、激活、运行、销毁。如下图：

SW注册

if (window.navigator.serviceWorker) {
  const serviceWorker = window.navigator.serviceWorker;
  serviceWorker.register('./service-worker.js').then(registion => {
    console.log('注册成功', registion);
  }).catch(error => {
    console.log("注册失败")
  })
}

SW常见事件监听如下

// service worker 安装
self.addEventListener('install', (event) => {
    console.log('install 成功', event);
    // 这里一般静态资源的预缓存
});

// service worker 激活
self.addEventListener('activate', (event) => {
    console.log('activate 成功', event);
    // 这里建议删除旧的缓存，所有客户端获取控制权
})

self.addEventListener('fetch', (event) => {
    const req = event.request;
    // 拦截请求，并利用fetch api 和 cache api把结果给到event.respondWith() 即可实现离线缓存
});

1、SW第一次加载

用户首次访问PWA的页面时，SW会立刻被下载并注册。注册结束之后，会进行安装SW，执行install事件（会在这里做预缓存，也就是静态文件的缓存），第二次打开就可以使用缓存的静态资源了（这里也要看使用的缓存策略，下边会讲）

这里的静态资源（HTML, JS, CSS和 Images）可以理解为web应用的外壳（应用外壳缓存），也可以理解成首页。因为预缓存一个网站离线工作需要的所有资源显然是不现实的。

const staticFiles = [
    '/',
    '/index.html',
    '/css/index.css',
    '/js/index.js'
];
caches.open("cache_name_v1").then(cache => {
    return cache.addAll(staticFiles);
}).then(self.skipWaiting)

然后会立即激活SW，也就会触发监听激活的事件，该事件会做移除旧缓存和获取控制权的操作

caches.keys().then(keys => {
    keys.forEach(key => {
        if ("当前缓存key值" !== key) {
            caches.delete(key);
        }
    });
})

激活之后就是SW正常运行阶段了。在运行阶段，监听了fetch事件，所有的请求都会走到这个事件。主要做两件事

• 使用cache.put(request，response)缓存一些运行时资源，比如api，其它文件资源
• 使用用event.respondWith返回拦截的请求响应结果，那么这个如何返回这个响应结果就是我们开发可控的

响应结果从原子上分为2中方式来获取

• 网络请求fetch(request)

const req = event.request;
event.respondWith(
    fetch(req).then((response) => {
        return response;
    })
);

• 直接取缓存

const req = event.request;
caches.open("缓存key").then(cache => {
    return cache.match(req);
})

以上2种其实是常用缓存策略中的2个而已

• NetworkOnly
• CacheOnly 这两种基本是不可取的，太过单一。还有一下几种
• CacheFirst 首先去缓存，取缓存失败，再去请求
• NetworkFirst 首先请求缓存，请求失败，再取缓存
• StaleWhileRevalidate 从缓存中读取资源的同时发送网络请求更新本地缓存

为防止缓引起问题，一般使用NetworkFirst。优先取最新得网路资源，失败再去取缓存。这样既可以做到离线缓存，也可以资源/数据得一致

2、SW更新 当没有更新的时候再次注册SW，不会触发install，activate事件。

如果SW有更新，和上述第一次加载路程基本相似。有2个注意事项

• install事件需要处理skipWaiting，可以让更新的sw跳过等待，直接激活。防止有页面正在使用老的SW，导致新的SW一直等待激活。
• activate事件需要获取控制权clients.claim()

3、SW销毁

sw一旦安装激活成功，会一直存在，需要手动卸载

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.ready.then(registration => {
    registration.unregister();
  })
}

PWA实操

注册SW文件

可以使用register-service-worker插件注册sw.js

点击这个查看具体使用

基本使用搞懂了，可以在项目中实践一下。

对于大部分项目的现状，使用webpack/vite构建工具编译项目，每次发版编译的静态资源文件名存在变化，直接写原生的SW，不可能在SW文件中每次都要手动去修改需要缓存的静态资源。而且编写也比较繁琐和复杂。所以这里需要借助轮子

PWA相关工具的使用

• sw-precache  sw-precache-webpack-plugin处理静态资源缓存的工具

• sw-toolbox 处理运行时缓存的能力 运行时缓存：动态资源，比如服务API，资源图片

sw-precache 默认集成了 sw-toolbox，但是两个工具官方已经不更新了。google官方建议使用workbox，workbox是现在PWA最优的绝决方案

workbox基本使用

workbox的缓存分为两种，一种的precache，一种的runtimecache

workbox常用的包

workbox-build  自动构建生成sw.js
workbox-core  核心包，基本的类
workbox-expiration  配置资源过期
workbox-precaching  处理预缓存
workbox-cacheable-response 处理缓存资源相应
workbox-strategies  缓存策略对象

precache对应的是在installing阶段进行读取缓存的操作。它让开发人员可以确定缓存文件的时间和长度，以及在不进入网络的情况下将其提供给浏览器，这意味着它可以用于创建Web离线工作的应用。 precache api具体使用

precache([    '/',    '/index.html',    '/css/index.css',    '/js/index.js',])

或者

precacheAndRoute(self.__WB_MANIFEST);

第二种方式需要依赖 workbox-build插件InjectManifest模式下，根据配置动态替换__WB_MANIFEST占位符的形式

runtimecache api具体使用如下：（运行时的资源，比如api，其它资源等等）

registerRoute(
    ({ request }) => request.url === 'http://localhost:3030/api/food/getFoodList',
    new NetworkFirst({
        // cacheName: 'api',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [200, 0],
            }),
            new ExpirationPlugin({
                maxEntries: 50,
                maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
            }),
        ],
    }),
);

work-build的使用

2种模式

• injectManifest 需要按照workbox规范手动维护sw.js文件，动态东城预缓存的资源列表。根据sw.js文件中__WB_MANIFEST占位符进行替换。这里的动态缓存需要自己维护开发，可拓展性及强

const { injectManifest } = require('workbox-build')
injectManifest({
    swSrc: path.resolve(__dirname, './sw.js'),  // 必传
    swDest: path.resolve(__dirname, './service-worker.js'),
    globDirectory: path.resolve(__dirname, '../'),
    globPatterns: ["**\/*.{js,css,html,ttf}"]
});

• generateSW 不需要提供sw.js文件，只需传入配置，就可自动生成sw.js文件

const { generateSW } = require('workbox-build')
generateSW({
    cacheId: 'generatesw-pwa', // 设置前缀
    cleanupOutdatedCaches: true, // 删除旧的预缓存
    skipWaiting: true,
    clientsClaim: true,
    globDirectory: path.resolve(__dirname, '../'),
    globPatterns: ["**\/*.{js,css,html,ttf}"],
    sourcemap: false,
    mode: 'development', // 生成sw文件的模式
    swDest: path.resolve(__dirname , 'service-worker.js'), // 默认 service-worker.js
    runtimeCaching: [
        {
            urlPattern: /^http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com/,
            handler: 'NetworkFirst', // 网络优先
            options: {
                cacheName: 'images-cache',
                expiration: {
                    maxEntries: 20, // 针对改类型的缓存的最大数量，超过替换
                },
            },
        }
    ]
});

workbox-webpack-plugin的使用

这是分为两种模式，和上述work-build差不多，需要增加webpack插件配置，需要在html-webpack-plugin之后，否则生成的html文件不在预缓存列表

const { GenerateSW , InjectManifest } = require('workbox-webpack-plugin')
new GenerateSW(config) 或者 new InjectManifest(config)

webpack项目中使用

vue项目

vue新创建的项目可以自己选择支持pwa如下图

如果不是，则添加@vue/cli插件即可。执行vue add pwa即可添加支持pwa

具体配置请看配置文档

react项目

react项目新建 使用cra脚手架工具指定pwa模板创建，如下

create-react-app my-app --template cra-template-pwa

老项目直接根据项目情况添加webpack配置以及manifest.json，注册sw.js即可

vite项目中使用

安装

npm install -D vite-plugin-pwa

vite.config.js配置

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
            mode: 'development',
            workbox: {
                // 省略
            }
        })
  ]
}

更多vite-plugin-pwa插件使用详情