你们要的Web前沿技术PWA在这里

PWA是progress web app的缩写,是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。

history模式

如果不希望看到丑陋的 # 可以使用history模式 , 其原理依赖于 history.pushState函数

a标签点击以后,如果没有# 必然会页面跳转发起请求

使用pushState函数可以改变url 比如 /abc 而不会发起请求

js通过location.pathname获取该值 /abc 做页面局部的替换

router-view的history简单实现原理

router-view实现图解

自制webpack插件实现骨架屏

原理分析:

慢会带来什么?

解决方案:

1: 首屏白屏(量太大,渲染好久)

2: 首屏卡顿(加载一半,一半卡住)

1: 客户端太慢,渲染容易卡住。。服务端渲染好页面,客户端就加载个html完事

2: 白屏也不错,但是如果能有个骨架屏,看起就爽了

1: 从路由A跳到路由B慢不慢? 你敢说慢?因为A的时候各种js已经加载好了ok

2: 那到底是什么比较慢 ?A的首次加载

插件实现思路

需要在vue的执行代码加载之前,先让用户看到骨架屏,带app代码执行 new Vue() 替换

就好了

决定加载什么js的是index.html,操作他的插件是html-webpack-plugin

我们让自己的插件再其后操作,并根据其留下的数据入口获取数据并更改

效果预览

html

后续逻辑

再来卡顿

插件代码

let MyPlugin = function (options) {

this.template = options.template;

}

MyPlugin.prototype.apply = function (compiler) {

// console.log(compiler);

console.log('我们的插件被执行了');

// 先指定自己怎么编译,根据别人的编译结果操作

compiler.plugin('compilation', compilation => {

// 别人编译的入口

compilation.plugin('html-webpack-plugin-before-html-processing',(htmlData,callback) => {

// html-webpack-plugin中间插入行为的地方

htmlData.html = htmlData.html.replace(`

`,`

我是默认的骨架屏

我是user的骨架屏

我是login的骨架屏

`);

// 不论如何两个参数,错误在前

callback(null,htmlData);

});

});

}

module.exports = MyPlugin;

插件使用

多页应用

核心思想: 其实就是两个vue项目,一次webpack打包,关联用url联系

webpack操作:

多个入口 { main1:'./usermain.js',main2:'./goodsmain.js' }

多个html插件

注意事项

getHtmls的思路

filename属性是生成的相对dist的文件名 xxx.html

template 模板生成的参照物 需要绝对路径||相对路径 './xxx.html'

chunks:[filename] 指定第三引入的js文件名称

这个[name]其实就是entry的key

更为灵活的读取各项目下的js文件(入口) entry:{‘js文件名’:'js文件路径' }

更为灵活的读取各项目下的html文件(首页.html) plugins:[].concat( [ new HtmlWebpackPlugin(),new HtmlWebpackPlugin() ] )

使用CachesAPI获取指定缓存的内容

caches.open('key').then(function(cachedRequests) {

cachedRequests.match('appshell').then(r => r.text() ).then(console.log);

});

DB比较

PWA (渐进式/Web/application)

慢慢收服你

离线浏览web应用,生成桌面应用,顶部通知(页面都可以不存在),预缓存(在你页面没有启动以前,请求资源保存到浏览器)(真正访问的时候,非常快,请求本地),骨架屏,App shell(利用缓存机制保存css+html+js等等), 分享,全屏图标

以上所有讲的东西,请大家把自己当产品经理来学习,以后再新技术上,chrome推出PWA但是一直没火起来。

手机端 chrome 55以上才支持这些所有

IOS safari 考虑支持

英文看支持率 caniuse 中文就是lavas官网可以看到

补充啊。。补充webpack插件自己操作文件

// 向dist下写入文件,当然也可以通过

// compilation.assets['./tjx.txt'].source() 获取文件内容

compilation.assets['./tjx.txt'] = {

size:function () {

return 'abc'.length;

},

source:function () {

return 'abc'

}

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200215A0HM8P00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券