如何在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 文件后面还有一些配置可以改变用户体验的，可以在这个网址看一下https://lavas.baidu.com/pwa/engage-retain-users/add-to-home-screen/improved-webapp-experience

5. 哇哦，接下来就是最后一步了，在public/index.html   中设置一下我们的主题颜色

 

 

 

 //之前只在manifest.json的“theme_color“设置了，没有起到作用，差点怀疑人生

 

接下来就是见证成果的时候，我们可以先build一下，看看生成的dist文件中的index有没有引用成功 manifest.json文件，看看相应的配置有没有生成，如果有，那么恭喜你，人生的第一个pwa项目完成，手动撒花

有人说，pwa那么好为什么没那么火，为此我也是百度了一下

1. 游览器对技术支持还不够全面， 不是每一款游览器都能100%的支持所有PWA
2. 需要通过第三方库才能调用底层硬件（如摄像头）
3. PWA现在还没那么火，国内一些手机生产上在Android系统上做了手脚，似乎屏蔽了PWA, 但是相信当PWA火起来以后，这个问题就不会是问题

       管它火不火，我们学到的是知识，而且又这么有趣，当然要学一下喽，要不然怎么能说自己是一个优秀的前端呢。作为一个良心的博主，为了了解更多的pwa，，我们可以看一下https://lavas.baidu.com/pwa   网站上讲的很详细，包括用户体验什么的都有，没事可以研究一下，有事也可以抽时间了解一下，你会发现一个更美好的世界。

掘金地址https://juejin.im/post/5e0738f751882512657bc1f8