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

一、概述

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