阅读 4708

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

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,,我们可以看一下lavas.baidu.com/pwa   网站上讲的很详细,包括用户体验什么的都有,没事可以研究一下,有事也可以抽时间了解一下,你会发现一个更美好的世界。


文章分类
前端
文章标签