cnode-webapp项目搭建 (pwa学习一)

鲁德佑

2023-12-01

一、概述

lavas是百度出品的基于 Vue.js 的 PWA 解决方案。
使用lavas解决方案对 cnode社区webapp项目hybridApp版进行重构,搭建一个PWA应用。使用cnodeJs社区提供的api获取数据。
架构：lavas + vant-ui
项目地址：cnode-webapp

预览

二、安装lavas

cnpm install lavas -g

三、使用lavas脚手架初始化项目

lavas init 
npm install 
npm run dev

四、引入Vant UI

Vant-UI

/core/app.js引入

/* 全局使用UI框架 vant */
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

五、实现

1、创建桌面快捷方式

要实现这个功能，本质是需要在构建后的根目录配置一个manifest.json给浏览器提供必要的信息

2、Service Worker

Service Worker 有以下功能和特性：
一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。
一旦被 install，就永远存在，除非被手动 unregister
用到的时候可以直接唤醒，不用的时候自动睡眠
可编程拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）
离线内容开发者可控
能向客户端推送消息
不能直接操作 DOM
必须在 HTTPS 环境下才能工作
异步实现，内部大都是通过 Promise 实现
所以我们基本上知道了 Service Worker 的伟大使命，就是让缓存做到优雅和极致，让 Web App 相对于 Native App 的缺点更加弱化，也为开发者提供了对性能和体验的无限遐想。

3、在service-worker.js中对指定的api配置缓存

workbox.routing.registerRoute(new RegExp('https://cnodejs.org/api/v1/topics'),
    workbox.strategies.cacheFirst());

4、预缓存设置

      //将index.html或其他文件加入到预加载页面中
        globPatterns: [
            '**/*.{html,js,css,eot,svg,ttf,woff}'
        ]

5 SPA下的骨架屏设计

Skeleton本身直接被注入到了index.html中，在页面的 HTML 结构中就已经包含了 Skeleton，后续渲染成功后再进行替换。如果配合 Service Worker，则可以将 HTML 文件缓存起来，在页面切换时快速展现，达成目标。
1、Skeleton 本身的编写
core文件夹下的Skeleton.vue加上vant的骨架屏组件

  <van-skeleton title avatar :row="3" />

2、配置 Service Worker，添加预缓存文件列表

	serviceWorker: {
   	 	globPatterns: [
        	'**/*.{html,js,css,eot,svg,ttf,woff}'
	    ],
    // ...

6、图片懒加载 (vant-ui)

注册指令

import Vue from 'vue';
import { Lazyload } from 'vant';
// options 为可选参数，无则不传
Vue.use(Lazyload, {
    loading:'static/img/default-person.png',
    error:'static/img/default-person.png'
});

设置懒加载图片

<img v-for="img in imageList" v-lazy="img" >

7、页面自适应方案

通过postcss-pxtorem 插件配合 lib-flexible实现

postcss-pxtorem 转换px为rem
lib-flexible用于设置 rem 基准值

安装、配置

cnpm install postcss-pxtorem --save-dev
cnpm install lib-flexible --save-dev

/core/app.js下引入flexible

// 引入flexble 页面自适应工具之一
import 'lib-flexible/flexible.js'

项目中自动生成了配置文件postcssrc.js

module.exports = {
    plugins: {
        // to edit target browsers: use "browserslist" field in package.json
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
          	rootValue: 32,   //The root element font size
         	 propList: ['*']  //(Array) The properties that can change from px to rem
        }
    }
};

六、打包前配置

修改 publicPath为 “ ./ ” 指当前目录下
修改lavas.fonfig.js中整个项目中的基础路径 router对象中base = ’ /cnode-webapp/ ’ ，因为我发布在了https://itch8.github.io/cnode-webapp/

lavas build