nodejs + vue-cli3.0 + pwa 初体验（一）

什么是pwa?

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点：

• 可靠 – 即使在不稳定的网络环境下，也能瞬间加载并展现
• 体验 – 快速响应，并且有平滑的动画响应用户的操作
• 粘性 – 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求。

实现pwa的大体路线

1.用现有的vue项目执行脚本：

vue add pwa

2.vue工程下面会构建如下文件

3.修改registerServiceWorker.js文件，做兼容处理；

/* eslint-disable no-console */

import { register } from 'register-service-worker';

if ('serviceWorker' in window.navigator && 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() {
            console.log('New content is downloading.');
        },
        updated() {
            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);
        }
    });
}

4.手动再public文件夹下面新增manifest.json文件；

{
    "name": "PWA-DEMO1", 
    "short_name": "DEMO", 
    "icons": [ 
      {
        "src": "./img/icons/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "./img/icons/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "id": "/main",
    "start_url": "./main",
    "display": "standalone",
    "background_color": "#000000",
    "theme_color": "#4DBA87"
}

 manifest.json是什么？移步manifest.json - Mozilla | MDN

这样一个简单的pwa案例就基本已经搭好了；

把vue工程打包丢进node-express里面，配置相关的express路由，在浏览器中打开nodejs开放的ip出现下载图标，到这儿pwa的简单配置就OK了

下期我会将pwa的manifest.json和server-worker细节方面做一个描述