PWA技术理论+实战

导读

随着互联网技术的发展,web应用已经越来越流行,技术的发展越来越迅速,尤其是移动互联网的到来使得HTML5技术,Hybrid混合开发,更加火爆起来,但是web应用没能摆脱PC时代的一些根本性的问题,所需的资源依赖网络下载,用户体验始终要依赖浏览器,这让web应用和Native应用相比尤其在移动手机端的体验,总让人感觉”不正规”,而PWA技术的到来,让下一代web应用终于步入正轨!

基于此,本文主要有以下几部分内容:

  • PWA基本概念讲解
  • Service Worker原理讲解
  • Web Push协议讲解
  • 将一个SPA项目改造为PWA
    • manifest.json配置解析
    • Service Worker资源缓存
    • 添加保存到桌面功能
    • 接收消息推送
  • 总结

阅读全文

Proxy API--Vue3响应式对象reactive初探

Proxy API对应的Proxy对象是ES2015就已引入的一个原生对象,用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。

从字面意思来理解,Proxy对象是目标对象的一个代理器,任何对目标对象的操作(实例化,添加/删除/修改属性等等),都必须通过该代理器。因此我们可以把来自外界的所有操作进行拦截和过滤或者修改等操作。

基于Proxy的这些特性,常用于:

  • 创建一个可“响应式”的对象,例如Vue3.0中的reactive方法。
  • 创建可隔离的JavaScript“沙箱”。

阅读全文

前端开发与架构师

前端架构师,听起来就是个很高大上的职位,在大多数程序员的眼中,架构师一般从事后端开发,Java或者C++出身,它们往往拥有这十八般武艺,可以解决业务中出现的各种问题。好像架构师就从来没有和前端有过关系,那么真的是这样么,通读此文,便可豁然开朗。

前端的意义:

首先,我们先来谈谈本职工作,前端的意义。前端源自用户界面,是最先和用户接触的地方,也是衡量一个项目产品好坏的第一道关口。

到底什么是前端

从最早的DOS系统说起,那时是没有前端的概念的,大多数的软件界面显示的都是冷冰冰的黑底白字的控制台命令,于是,慢慢的不仅是用户,就连广大的程序员也不满足现状,开发出一套图形化的用户界面,让一些功能更加便于操作。那时前端叫做GUI(图形用户界面)。还没有区分出多端的概念,大多数是基于操作系统开发出的原生界面。

阅读全文

移动web性能优化从入门到进阶

关于前端性能优化相关的技术知识,网上随便搜一些就有很多,本文将系统性的从初级到高级的思路,总结移动前端性能优化各个方面的相关技术点,内容来自笔者以往经验的总结,希望读者可以花些时间看看。

在目前大多数刚从事前端开发,或者是正在学习前端开发的同学来说,性能优化对于他们可能还比较远,但是脱颖而出,拉开差距的点,往往就在与性能优化,和理论知识不同,性能优化往往来自日常的工作经验中总结而来,也是目前大厂面试前端必问的知识点,所以重要性就不言而喻了。

一,入门篇

首先,重要的事情说三遍:

移动web性能优化原理知识同样适用于PCweb端!
移动web性能优化原理知识同样适用于PCweb端!
移动web性能优化原理知识同样适用于PCweb端!

阅读全文

最新React全家桶实战使用配置指南

写在前面

这篇文档 是我结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获。

目录

  1. 版本说明
  2. 目录结构
  3. 初始化项目
  4. webpack
  5. react
  6. 配置loader(sass,jsx))
  7. 引入babel
  8. 使用HtmlWebpackPlugin
  9. redux
  10. 使用webpack-dev-server
  11. 多入口页面配置
  12. 如何理解entry point(bundle),chunk,module
  13. 多入口页面html配置
  14. 模块热替换(Hot Module Replacement)
  15. 使用ESLint
  16. 使用react-router
  17. 使用redux-thunk
  18. 使用axios和async/await
  19. Code Splitting
  20. 使用CommonsChunkPlugin

阅读全文

移动web开发实战课程

历时半年打造的慕课网移动web实战课程

课程介绍

  • 本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP,理解并掌握移动Web开发的基本技能。
  • 开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能。
  • 本课程还覆盖了工作中常见移动Web开发问题,并且可以通过课程学习找到对应的技术解决方案。

课程链接

想要学习移动web的同学不妨试试!

移动web适配之--vh,vw,vmin,vmax

前言

其实关于vh,vw,vmin,vmax这四个单位,伴随着css3的出现就已经有了,但是当时移动web的浪潮已经来临,并且rem出现的要早,所以很多人忽略这个,但是rem使用适配是要依赖js来进行处理,今天介绍的vh,vw,vmin,vmax是完全基于css的自适应方案,关于rem的适配可以参考笔者之前写的文章

阅读全文

豫ICP备19009686号
吕小鸣的前端博客正在使用PWA,是否安装到桌面?x
吕小鸣的前端博客正在使用PWA,是否安装到桌面?x