当我们在手机浏览器上打开网页时,然后通过浏览器的 “更多” 功能,选择添加到主屏幕。
这个时候,我们的手机桌面上会生成一个当前网页的 “快捷入口”。
如果你的网站没有加 PWA
的话,那么,手机桌面上生成的只是网页的一个“快捷方式”,从桌面上点击进入,依然是用浏览器打开。
如果你的网站加上了 PWA
的话,那么,你可以自定义手机桌面上生成的这个图标,并且,从这个桌面图标点击进入的话,是一个 PWA
。
来一个鲜明的对比:
PWA
的这种渐进式 Web 应用 给人的感觉和体验还真不错,有一种 App 的感觉。
大家可以在手机上打开这个网站体验一下:web-bookmarks
提供一个二维码快捷访问方式:
=========================================================================
给网站加上 PWA
是简单的:
-
在网站的根目录下(
/
),添加一个 Web应用程序清单文件(manifest.json
)。 -
在
index.html
中加上<link rel="manifest" href="/manifest.json">
Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息(如名称,作者,图标和描述)。manifest
的目的是将Web应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验。
关于 manifest.json
文件里面有哪些可配置的字段,以及字段的说明,推荐阅读官方文档:
https://developer.mozilla.org/zh-CN/docs/Web/Manifest
-----------华丽的分割线-------------
我想给你的建议和参考:
1、为了让你的网站完全地兼容 PWA,强烈建议你在 index.html
中加上除了 <link rel="manifest" href="/manifest.json">
以外更完善的 head
信息:(参考这样)
可以参考这里=> https://github.com/Neveryu/web-bookmarks/blob/master/docs/.vuepress/config.js#L7-L17
2、我的 manifest.json
的配置,可以参考这里=> https://github.com/Neveryu/web-bookmarks/blob/master/docs/.vuepress/public/manifest.json
==================================================================
-
可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
-
体验 - 快速响应,并且有平滑的动画响应用户的操作
-
粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面
-
渐进式 - 适用于所有浏览器,因为它是以渐进式增强作为宗旨开发的
-
连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
-
类似应用 - 由于是在 App Shell 模型基础上开发,因为应具有 Native App 的交互和导航,给用户 Native App 的体验
-
持续更新 - 始终是最新的,无版本和更新问题
-
安全 - 通过 HTTPS 协议提供服务,防止窥探和确保内容不被篡改
-
粘性 - 通过推送离线通知等,可以让用户回流
========================================================================
PWA
还有很多强大的功能,除了前面提到的给我们的网站加上 PWA
之外,PWA
中包含的如下核心功能及特性,我们也可以加上:
-
Web App Manifest(已加)
-
Service Worker
-
Cache API 缓存
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
总结
-
框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
-
算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!