pwa ? 这是什么? 第一次听到pwa的时候是隔壁桌的大佬在交流前端的时候说的“这是前端目前很火的技术,用户体验很好,简单方便 ... ...”。听起来就很想试一试,在大佬的帮助下完成了自己人生的第一个pwa项目。强烈安利,接下来就好好的去了解一下所谓的pwa
什么是pwa ?
Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。
PWA 的主要特点包括下面三点:
- 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
- 体验 - 快速响应,并且有平滑的动画响应用户的操作
- 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面
PWA 本身强调渐进式,并不要求一次性达到安全、性能和体验上的所有要求,开发者可以通过 PWA Checklist 查看现有的特征。
简单的说,其实pwa就是可以做成类似于app的小应用,可以自己设置名字和图标,只要在浏览器的地址栏后面点击安装就可以安装到桌面(轻量,或许有几百kb的缓存数据),即开即用,省去了去软件商店安装的过程,还不用上架软件商店就可以有原生app的体验。
下面就是我们从用户角度所能看到的,从页面提醒安装,到用户安装在桌面生成图标,以及最后打开软的看到的视图的部分截图。
- 提醒用户安装
- 在桌面生成图标(图标和名称是可以自定义的)
- 点击图标看到的视图
有没有很像一个原生的app,想一想自己的网易音乐好像也是这样打开的哎,我们不用经过 App Store就可以在mac上安装小图标了,激不激动,开不开心,接下来就是见证小奇迹的时候。
如何使用PWA进行开发
当我们刚开始知道pwa的时候,很难去下手,就像我们就算知道做一个架构师很厉害,我们却没有做到,并不是因为我们不想,那是因为实力不允许啊。接下来就好好去说一下在实战中如何使用pwa,别问底层原理啥的啊,因为我也不知道。
首先,我们准备葱姜蒜,不对,岔了,再来,首先我们需要有一个项目vue ui 的项目
1. 刚开始我们肯定要安装pwa插件,在命令行中输入 vue add @vue/pwa 命令就可以安装pwa插件以及相关依赖包和文件。在pwa插件安装成功后生成的文件包括:一些vue的logo图片、manifest.json、registerServiceWorker.js。 生成的vue的logo图片是示例图片,已经默认配置在了manifest.json中。registerServiceWorker.js是用来注册service worker的注册器,当然不使用这个生成的注册器也是可以的
vue add @vue/pwa
2. vue.config.js 文件中配置pwa
pwa: {
workboxOptions: {
// https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
skipWaiting: true,
clientsClaim: true,
importWorkboxFrom: 'local',
importsDirectory: 'js',
navigateFallback: '/',
navigateFallbackBlacklist: [/\/api\//]
}
}
3. 注册service worker。 安装pwa插件时会生成一个registerServiceWorker.js(src文件下)文件并在main.js中添加导入,这个文件中自动生成了注册service worker的代码。其中默认生成的service worker名称为service-worker.js,可以修改为自定义的service worker,如sw.js。registerServiceWorker.js的代码如下。
import { register } from 'register-service-worker'import { Message, MessageBox } from 'element-ui'if (process.env.NODE_ENV === 'production') { register(`${process.env.BASE_URL}service-worker.js`, { ready() { console.log( 'App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB' ) }, registered() { console.log('Service worker has been registered.') }, cached() { console.log('Content has been cached for offline use.') }, updatefound() { Message({ message: '检测到新版本,正在下载', type: 'info' }) console.log('New content is downloading.') }, updated() { MessageBox({ title: '更新', message: '新版本内容下载完成,点击确定按钮立即使用新版', confirmButtonText: '确定', showClose: false, showCancelButton: false, closeOnClickModal: false, closeOnPressEscape: false, type: 'success', callback() { location.reload() } }) console.log('New content is available; please refresh.') }, offline() { console.log( 'No internet connection found. App is running in offline mode.' ) }, error(error) { console.error('Error during service worker registration:', error) } })}
然后我们在main.js中引入registerServiceWorker.js
import './registerServiceWorker'
4. 配置public/manifest.json文件,这是pwa的添加至桌面的功能主要就是依赖于这个文件
{
"short_name": "短名称",
"name": "这是一个完整名称",
"icon": [
{
"src": "./img/icons/icon-192x192.png", // 可以自定义的icon
"sizes": "192x192", // 要注意尺寸要和实际尺寸相同
"type": "image/png" },
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "index.html" // 启动网址
"display": "standalone", // 启动画面
"background_color": "#002140", // 启动背景颜色
"theme_color": "#002140" // (index.html文件中也要设置)主题颜色,强烈建议和ui主题颜色保持一致,看起来更有原生app的感觉
}
manifest.json 文件后面还有一些配置可以改变用户体验的,可以在这个网址看一下https://lavas.baidu.com/pwa/engage-retain-users/add-to-home-screen/improved-webapp-experience
5. 哇哦,接下来就是最后一步了,在public/index.html 中设置一下我们的主题颜色
<meta name="theme-color" content="#00142A"> //之前只在manifest.json的“theme_color“设置了,没有起到作用,差点怀疑人生
接下来就是见证成果的时候,我们可以先build一下,看看生成的dist文件中的index有没有引用成功 manifest.json文件,看看相应的配置有没有生成,如果有,那么恭喜你,人生的第一个pwa项目完成,手动撒花🎉
<link rel=manifest href=/manifest.json>
<meta name=theme-color content=#4DBA87>
有人说,pwa那么好为什么没那么火,为此我也是百度了一下
1. 游览器对技术支持还不够全面, 不是每一款游览器都能100%的支持所有PWA
2. 需要通过第三方库才能调用底层硬件(如摄像头)
3. PWA现在还没那么火,国内一些手机生产上在Android系统上做了手脚,似乎屏蔽了PWA, 但是相信当PWA火起来以后,这个问题就不会是问题
管它火不火,我们学到的是知识,而且又这么有趣,当然要学一下喽,要不然怎么能说自己是一个优秀的前端呢。作为一个良心的博主,为了了解更多的pwa,,我们可以看一下https://lavas.baidu.com/pwa 网站上讲的很详细,包括用户体验什么的都有,没事可以研究一下,有事也可以抽时间了解一下,你会发现一个更美好的世界。
掘金地址https://juejin.im/post/5e0738f751882512657bc1f8