如何在vue项目中使用PWA

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的项目来说示范了,其他的可以参考

1.  首先我们要引入pwa,可以直接用npm安装,然后在package.json文件中就会生成

 "@vue/cli-plugin-pwa": "^4.0.0"

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.   在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 文件后面还有一些配置可以改变用户体验的,可以在这个网址看一下lavas.baidu.com/pwa/engage-…

4. 哇哦,接下来就是最后一步了,在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,, 首推pwa的官网 lavas.baidu.com/pwa,没事可以研究一下,有事也可以抽时间了解一下,你会发现一个更美好的世界。


原文链接:juejin.im

上一篇:cool-ascii-faces
下一篇:Web Components 全知道

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    23 天前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🚩Vue源码——如何监听数据变化

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue 是用数据来驱动来生成视图...

    5 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    6 个月前
  • 🏆 掘金技术征文|双节特别篇 vue3——composition API

    vue3刚出测试版的时候尝过一次,后来学了react,才尝出点味道来,现在再尝一遍,先从重要的compositon api入手! composition api 主要是把之前vue的核心api暴露出来...

    12 天前
  • 🎉🎉🎉 一个基于vue3+vite+ts的完整项目

    VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 ...

    9 天前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    1 个月前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    24 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前

官方社区

扫码加入 JavaScript 社区