记录学习过程，如有错误欢迎指出
看到国内的环境,我是感到悲伤的,以前大家都是在浏览器中上网冲浪,现在它们想方设法的把我们留在App中,也许现在我们只有百度问题的时候才会打开浏览器吧(除了前端程序员).我们不能被臃肿的App锁上枷锁,即便现在的设备性能越来越好,容量越来越大,但是这也不是把我们绑架到App上的理由.确实Web现在无法像App一样丝滑,用户体验好.但是我相信总有一天Web也能完成这些任务.(个人感受)
前置知识
这篇文章仅对MDN上的PWA教程进行补充,下面提到的知识不会讲,如果还不会使用的,可以点击后面的链接
- service worker MDN文档
- notification Api MDN文档
- 浏览器 cache MDN文档
- manifest manifest介绍
- 自适应网页设计
- 性能审核lighthouse lighthouse
App Shell模型
App Shell架构师构建PWA的一种方式,这种应用能够可靠且及时地加载到用户的屏幕上
即离线缓存支持用户界面所需的最小的HTMl,CSS,JavaScript,可确保在用户重复访问时提供及时,可靠的良好性能,意味着用户每次访问时只需要从网络中加载必要的内容
总的来说,就是本机缓存了构建显示网页所需的基础内容,但是并不包含数据
我们应遵守下面规则,以获得最佳性能
- 快速加载
- 尽可能使用少的数据
- 使用本机缓存的静态资源(缓存优先 cache first)
- 将内容和导航分离
- 检索和现实特定页面的内容
- 缓存动态内容(可选)
缓存优先&网络优先
这里我觉得在PWA里面比较重要,重要的是思想不是代码
//一个网络优先的demo
self.addEventListener('fetch',(event)=>{
//请求对象
const req = event.resquest;
//将响应返回给浏览器
event.respondWith(networkFirst(req))
})
async function networkFirst(req){
try{
const res = await fetch(req);
return res
}catch(e){
const cache = await caches.open(cache_name)
//拿着接受的req去缓存库能匹配,匹配到就返回出去
const cahced = await cache.match(req)
return cahced
}
}
//即所有数据请求都是先请求网络,如果在网络不通的请况下,才使用
我们为什么把网络优先和缓存优先拎出来说呢?是因为前面提到了App Shell模型的规则,即我们要在正确的时间,正确的位置,使用正确的方式(方式指使用缓存优先||网络优先)
坑
因为PWA只能在https或者localhost的请况下使用,那么我们在开发的时候一定是起的本地服务器,访问localhost,重点来了
原因:因为我们在浏览器访问的是localhost,然后缓存了首页的html路径('./xxx/index.html'),这是就导致访问localhost找不到index.htm文件,如果你换成了index.html,那么你测试的时候一定那么为什么chrome显示网络错误😅
不要缓存'./html/index.html',(首页html路径) 而是换成'/',会自动访问首页
记录学习过程，如有错误欢迎指出
