如何在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   网站上讲的很详细，包括用户体验什么的都有，没事可以研究一下，有事也可以抽时间了解一下，你会发现一个更美好的世界。

赞 (0)

相关推荐