Lavas 介绍

Lavas 是什么

Lavas 是一个基于 Vue 的 PWA (Progressive Web Apps) 完整解决方案。我们将 PWA 的工程实践总结成多种 Lavas 应用框架模板，帮助开发者轻松搭建 PWA 站点，且无需过多的关注 PWA 开发本身。

Lavas 做什么

简单来说，站点 PWA 化需要做什么，Lavas 就做什么。要更好的理解 Lavas ，我们需要从 PWA 是什么讲起。这样我们才了解，为什么要把站点改成 PWA ，然后用 Lavas 轻松打造 PWA 站点。

PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App。主要是增强 Web App 的体验，使站点具有类似原生应用的功能和体验，如：

  • 站点可添加至主屏幕
  • 全屏方式运行
  • 支持离线缓存
  • 消息推送 …

这对于目前体验相对较弱的站点而言，无疑是个好消息，大大提升了站点的功能体验。在我们认识到 PWA 的好处后，就要考虑如果要打造一个 PWA 站点，到底有多少开发量，至少下面几个工作就必不可少：

  • 为了让站点能像原生应用那样安装到主屏幕，我们需要准备一些静态资源（如屏幕图标）和一个清单文件 manifest.json 去告知浏览器使用哪些图标，显示哪些应用名称等等；
  • 为了让站点具有更好的离线体验，PWA 提供了更好的缓存 API （详见 web 存储）和缓存管理方式 Service Worker。具体的缓存策略仍然需要开发者根据项目的实际需要进行开发；
  • 同样是为了让站点具有更好的离线体验，除了要在缓存策略上下功夫，站点 UI 设计上也需要遵循一定的规范（如 App Shell 模型 和 离线 UX 注意事项 ），才能让站点在页面切换、内容加载、加载出错、弱网断网等等情况下不会给用户显示个大白屏。

不禁要问，这么多的开发工作难道都要开发者自己做么？ 有没有现成的工具可用？ 此时 Lavas 就隆重登场，担负起了这个重任， Lavas 提供了一套基于 Vue 的 PWA 站点快速搭建方案。开发者只需要做一些简单的业务配置即可，从而大大节约开发维护成本。

Lavas 为开发者解决上述问题外，还提供了多种可选的项目模板：轻量的 basic 模板、appshell 模板，支持服务端渲染的 ssr 模板、支持多页应用的 mpa 模板等， 及多个技术点的实践经验等。用 Lavas 让你的站点可以渐进式地拥有 App 的体验，欢迎大家多多试用。

Lavas 教程索引

Lavas 教程文档主要分为基础和进阶两部分，也是我们建议开发者浏览的顺序。基础部分可以帮助大家快速搭建项目并跑通，让您对项目结构和效果有一个初步的了解和体验。进阶部分可以为大家剖析一些项目中必要技术点的实现，包括配置使用方法、使用时注意的问题、如何避免一些曾经踩过的坑等等，能为开发者开发大型项目时提供更好的技术支持。

基础教程

  • 如果您对 PWA 本身还不是很了解，可以通过 探索 PWA 来快速了解其一些特性、优势等，这会让您对项目的 PWA 化目标更加清晰。

  • 参考 快速开始 PWA 工程 ，使用 Lavas 工具快速导出一个 PWA 工程，浏览项目结构，运行浏览模板效果。

    • Lavas 工具中提供了多种应用模板框架，既包括最轻量的 basic 模板、appshell 模板，也包括支持服务端渲染的 ssr 模板、支持多页应用的 mpa 模板，大家可以参考使用
    • 初始化项目模板预设了 manifest.json 文件和 Service Worker 相关插件，均有默认设置
    • 初始化的框架结构，遵循 UI 开发规范，可引导用户遵循一定的开发规则，更高效地进行项目管理
  • 其他几节让您快速掌握简单的开发、调试及构建部署技巧。

进阶教程

开发中，您还需要关注的一些技术点，该部分的阅读会让您的开发更加得心应手：

  • 添加到桌面功能 ： 这是我们首先需要关注的一个内容，初始化项目模板中使用 static/manifest.json 的默认配置项，包括添加到桌面的图标、文案、打开方式、主题色等，开发者可以按需更换。
  • Service Worker：这部分需要我们重点关注，主要涉及离线资源缓存的配置管理与更新，项目默认缓存所有静态资源，并提供了简单的缓存更新机制。如果您想缓存指定内容，或配置部分动态缓存的内容及其他相关问题，均可参考 维护 service-worker.js 文件 和 Service Worker 与页面通信 两部分内容来寻找解决方案。
  • App Shell：在解决了上面两个必须的关键问题后，您可以对页面渲染中的白屏问题做进一步的优化，App Shell 就是其中之一。简单说，它就是第一次渲染个壳，等异步数据来了再填充，避免用户长时间看到白屏。这部分可以在 App Shell 调整及扩展 中查看相关介绍，Lavas 工具在 basic 外的模板中增加了 App Shell 的使用示例，供您参考。
  • App Skeleton 介绍 ：同样是为了优化白屏的问题，skeleton 的使用，能实现在页面渲染过程中，先展示整个页面内容框架，待页面渲染完成后用真实内容替换。如果能结合 App Shell 一起使用，就能完美解决白屏的体验问题。

  • 除 basic 模板外，其他模板中还提供了一些比较实用的解决方案，方便开发者使用。

    • 页面切换动画 ，这是开发者一般都需考虑的问题，所以这里给出了具体实现方案，供大家参考。

    • 项目主题色修改 ，开发者可以通过统一配置，修改站点的主题色，方便统一组件、页面的主色调等。

    • 项目中 icon 图标使用 ，支持使用 material 图标、自定义 svg 图标、引入指定 fontawesome 图标等。

    • Material UI 使用 ，介绍 Material UI 及使用 ，以及开发一个简单组件。