PWA 介绍 概念: PWA(Progressive web apps,渐进式 Web 应用)运用现代 Web API 和传统的渐进式增强策略来创建跨平台 Web 应用程序 它并不是一个快捷方式,而能在系统中作为一个独立的 App 存在,用户可设置它的权限,清除它的缓存 PWA 的关键技术在浏览器中的支持度: 1.Web App Manifest 的支持度达到 80.63% 2.Service Worker 的支持度达到 89.84% 3.Notifications API 的支持度达到 75.…

深入学习网址:https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 一. 基本介绍 1. 渐进式:适用所有浏览器,因为它是以渐进式增强作为宗旨开发的,不支持的浏览器不影响 2. 流畅:能够借助service worker在离线或者网络较差的情况下正常访问 3. 可安装:用户可以添加常用的webapp到桌面,免去去应用商店下载的麻烦 4. 原生体验:可以和app一样,拥有首屏加载动画,可以隐藏地址栏等沉浸式体验 5. 粘…

1. 介绍 Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA 本质上是 Web App ,借助一些新技术也具备了Native App的一些特性,兼具 Web App和Native App的优点. 2. 优势 渐进式Web应用程序中相比于普通的Web应该存在以下一些优势. 可靠  应用程序在加载时应该快速闪电,它应该接近瞬时,并且当没有网络或像2G这样的低速网络时也应该打开. 快速 当用…

Service Worker 简介: 1.Service Worker 是 PWA 技术基础之一,脱离浏览器主线程的特性,使得 Web App 离线缓存成为可能, 更为后台同步.通知推送等功能提供了思路 2.通常所讲的 Service Worker 指的是 Service Worker 线程 3.浏览器中执行的 JavaScript 文件是运行在一个单一线程上,称为主线程,而 Service Worker 是一种独立于 浏览器主线程的工作线程,与当前的浏览器主线程是完全隔离的,并有自己独立的执行…

离线与缓存 资源请求的拦截代理: 1.资源请求的判断: (1)fetch 事件会拦截页面上所有的网络资源请求,但我们通常只对部分资源请求进行处理, 其余的请求会继续走浏览器默认的资源请求流程 (2)fetch 事件回调参数的 event.request 属性描述了当前被拦截的资源请求,可以通过它来进行判断分类. event.request 是 Request 对象的实例,包含了资源请求的 URL.请求模式.请求头等全部信息 (3)一般情况下,资源请求的判断可以通过对 event.request.…

基础技术简介 Promise: 1.ES6 引入的一种异步编程的解决方案,通过 Promise 对象来提供统一的异步状态管理方法 2.一般在使用 Promise 对象的时候,首先需要对其进行实例化 3.实例化的 Promise 对象为异步状态的管理容器,resolve()和reject()是用于控制 promise 状态的方法 4.在调用 resolve()和reject()方法的时候可传入任意值,这个值会作为监听状态变更的回调函数的参数透传出去 5.Promise 提供了 .then(onFu…

设计与体验 APP Shell: 1.应用从显示内容上可粗略划分为内容部分和外壳部分,App Shell 就是外壳部分,即页面的基本结构 2.它不仅包括用户能看到的页面框架部分,还包括用户看不到的代码逻辑 3.页面能够展现所需的最小资源集合,即支持用户界面所需的最小的 HTML.CSS 和 JS 等静态资源集合 4.采用 App Shell 的站点,每个页面都会先加载 App Shell 的内容, 再由 App Shell 根据当前页面 URL 渲染对应的主体内容 正确地使用 APP Shell…

(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https://nodejs.org/en/download/ ,直接点 windows installer 2. 选择按装路径后(我的按装路径 D:\nodejs ),直接下一步,这样 npm 命令就可以用了, node -v 来测试是否成功安装  按装是此处不勾选 测式: n…

前言 "小步快跑.快速迭代"的开发大环境下,"一套代码.多端运行"是很多开发团队的梦想,美团也一样.他们做了很多跨平台开发框架的尝试:React Native.Weex.PWA 等等.但都没有得到很好的解决,直至遇到Flutter. Flutter 提供了一整套从底层渲染逻辑到上层开发语言的完整方案,有跨平台.高保真.高性能等优点.因此从发布开始,热度一路攀升,受到开发者们的热切青睐,也有了 阿里闲鱼.今日头条.腾讯 Now 等在内的一众知名商业案例. 我曾跟很多前…

之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者服务器 一.安装webpack 你需要之前安装node.js $ npm install webpack -g 安装成功后,便可以使用webpack命令行了. ok,开始工作! 二.新建一个空目录,名字为myApp,文件如下 entry.js document.write("It works.&qu…