ssr + service worker 实践

JavaScript010

ssr + service worker 实践,第1张

当页面加载的 js 和 css 更多更大时，网路不够流畅时，客户端渲染的首屏出现时间会更晚。

项目结构

项目搭建步骤

2.2 创建entry-client.js

该文件注册了service worker并将vue实例挂载到#app节点。

2.3 创建entry-server.js

2.4 配置vue.config.js

如果是自己写sw.js文件，详细步骤见下方service worker小节。sw.js文件放在public文件夹下。

如果使用workbox-webpack-plugin插件自动生成service-worker.js文件，需要额外的配置

以下配置的参考文章： https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.GenerateSW#GenerateSW

2.5 配置package.json

build:server 命令使用cross-env库设置了环境变量SSR。如此process.env.SSR为true

在Application/Cache Storage中查看sw缓存的资源

PWA 全称是渐进式 web 应用，它是用一系列前端技术来实现的，目标是提供类似原生APP一样的体验。主要解决的痛点是：

以下介绍 PWA 相关技术

PWA中最重要的一项技术，特点是：

2、主 js =>sw.js

caches 缓存库一般以request 为key , response为value

在项目根目录下准备一个 manifest.json 文件，可以实现用户首次访问网页时提示在桌面创建网页入口icon，以后直接通过桌面的icon就可以直接访问网页了。

注意：只有至少已经访问网站两次、访问至少间隔五分钟时才可以将网络应用添加到主屏幕上。

然后在 html 文件里引入该文件

sw.js