H5 学习足迹(二)

classlist 对象

---

dataset 对象

	
		
		
	
	
	
		
		

			
		
		
		[外链图片转存失败(img-VKrDq3Bh-1562069837910)(https://mp.csdn.net/mdeditor/loading.gif)]
		
	
	
	
	
	
	

---

监听网络状态事件

---

监听网页状态事件

---

监听手机电量显示事件

navigator对象

---

手机震动事件

	
		
		
	
	
		
		点击震动
		
	
	
	
	
	

---

富文本编辑器 执行命令 execCommand

	
		
		
	
	
		
		全选
		加粗
		复制
		剪切
		
	
	
	
	
	

---

自定义事件

---

调用设备摄像头

---

前端路由url 的改变和监听事件

	
		
		
	
	
		
		点击跳转
		团购
		
		
		登录
		
	
	
	
	
	

1-0

1-1

1-2

1-3

1-4

1-5

1-6

---

离线存储 Cache Storage

cachesStorage.html

sw.js

// 用来管理离线存储功能
// self 相当于window  fetch 监听浏览器请求的事件

// name 名字 || 版本号
const name = 'yueyueV3.0.1';
// 缓存哪些东西 想要缓存图片也要加在list中
const list = [
    './cachesStorage.html',
    './sw.js',
    './pic.jpg'
];

// 当缓存的html 等 静态文件更新时
// 更新事件
self.addEventListener('activate',function(e){
    // 1. 读取缓存列表
    e.waitUntil(
        caches.keys().then(keyList =>
            // 如果name 版本号不同则表示更新 则删除原来的缓存
            // 无论html 或者静态文件怎么改变浏览器都只是读取旧版本缓存  只有name 改变后也就是版本更新才会触发判断进行更新缓存  谷歌浏览器自动更新缓存
            Promise.all(keyList.map(key => key !== name && caches.delete(key)))
        )
    )
});

// 用JS控制让浏览器进行缓存
// 开始进行缓存 第一次进入到网页的时候触发
self.addEventListener('install',function(e){
    // 第一次进入网页就新建名为yueyueV3.0.1的文件夹，将list所有内容添加到该文件夹
    // 缓存完成后再审查元素 Application/Cache Storage 内可查看
    // e.waitUntil 等代码执行后 do sth
    e.waitUntil(
        caches.open('name').then((c) => c.addAll(list))
    )
});


// 审查元素 network里显示的所有请求  都能被这个事件监听到
self.addEventListener('fetch',function (e) {
    // 如何去拦截浏览器默认向服务器请求的

    // 拦截浏览器请求 可以指定请求哪些内容     (离线缓存.html)
    // 打开离线存储.html的时候 浏览器请求      离线缓存.html
    // 拦截了 浏览器的请求，并且让浏览器去请求   离线缓存.html
    e.respondWith(
        // 查找缓存 并监听请求
        // 判断 如果缓存里有，那么就使用缓存的内容，没有的话就 fetch 向服务器请求
        caches.match(e.request).then( response => response || fetch(response))
    )
});

将网站伪装成手机app

为网站添加设置 ：手机在访问网站的同时可以添加到主屏幕创建快捷方式

index.html

manifest.json

{
  // 添加到手机主屏幕后的伪app名字
  "name": "yueyue",
  // 添加到手机主屏幕时的app名字
  "short_name": "mingming",
  "start_url": "./",
  // 全屏
  "display": "fullscreen",
  // 创建手机主屏幕快捷方式的图标
  "icons": [
    {
      "url": "111.jpg",
      "sizes": "512x512",
      "type": "image/gif"
    }
  ],
  "background_color": "#996633",
  "theme_color": "#669933"
}