《PWA 应用实战》 简介 关于作者 为什么写这本书 为什么开源 版权 最后 《PWA 应用实战》 欢迎走进 PWA 世界！！ 简介 本书围绕着 PWA 以及周边技术，从概念入手，以实战的方式给读者讲述如何编写 PWA，以及如何编写体验最好、速度最快、安全的 PWA 站点。 本书主要从以下几个部分讲述 PWA。 设计与体...

sw-register-webpack-plugin 插件 背景 解决缓存更新痛点 服务器 Cache-control: no-cache 处理 版本控制 插件介绍 解决的问题 安装 webpack 配置 参数 version filePath prefix 维护 sw-register.js 文件 service-worker.js ...

维护 service-worker.js 文件 service-worker.js 如何配置缓存内容 如何修改 service-worker.js 文件内容 Service Worker 的注册 动态缓存补充 缓存更新难题及处理 Service Worker 容错降级方案 小结 维护 service-worker.js 文件 开始之前...

探索 PWA 什么是 PWA 什么站点适合改造成 PWA PWA 的效果 离线缓存 SPA (Single Page Apps) 基于 Vue 架构的 PWA 工程 App Shell Lavas 和 PWA 工程化 探索 PWA 什么是 PWA PWA (Progressive Web Apps) 是一种 Web App 新模型...

构建部署工程 生产环境构建 部署到服务器 Nginx 配置 Node.js (Express) 构建部署工程 和其他基于 vue 模版项目一样，构建和部署都十分简单。 生产环境构建 生产环境构建出的所有静态资源默认输出在 /dist 文件夹下。 $ npm run build 执行命令后，在控制台的输出主要分成两部分，第一部...

在项目中使用图标 字体文件 自定义 SVG 可选的 fontawesome 图标 在项目中使用图标 info Lavas Basic 模版 并不包含此功能 在项目中有两种使用图标的方式，可以同时使用： 使用 material 字体文件 引入自定义的 SVG 文件 字体文件 material 图标 能够满足大部分应用场...

页面切换动画效果 具体实现 注意事项 页面切换动画效果 Vue 提供了多种方式支持动画过渡效果。例如在各个过渡阶段应用 CSS 类，提供钩子函数使用 JS 操作 DOM，使用第三方 CSS/JS 动画库等。 如果对 Vue 中内置的 transition 机制还不了解，可以阅读 官方的介绍 。 在模版项目中，主要使用了最简单的应用 CSS 类...

你的第一个 PWA 准备工作 下载代码 添加到主屏 离线可用 总结 你的第一个 PWA 本书中大部分示例均基于下面的这个模板展开，开发者可以跟随书中示例逐步操作，加深理解。在这个示例里，我们一起来实现一个能添加到桌面并且离线可用的 PWA。 准备工作 在准备编写第一个 PWA 前，有一些准备工作需要准备，需要安装一些必备的软件，如下：...

修改项目主题 配置文件 使用预定义的颜色变量 使用主题变量 修改项目主题 info 注：Lavas Basic 模版 并不包含此功能 项目使用 vuetify 作为组件库，根据 vuetify 的实现，主题配置分为两个部分： 项目中主要使用的颜色，其中主要颜色，次要颜色的选择和使用场景可参考 material 设计中的颜色系统 ...

如何进行 Service Worker 调试 debug 环境下的开发跳过等待状态 借助 Chrome 浏览器 debug 查看 Service Worker 缓存内容 网络跟踪 安卓真机 debug 如何进行 Service Worker 调试 开发 Service Worker 的过程中，我们如何让我们的开发更加高效并且准确的找出 bu...