PWA

    PWA相关文章，个人也是在18年在微信公众号上看到PWA的相关信息，个人觉得是Amazing Idea----一种跨域BS和CS模式的应用。

添加PWA支持

    目前仅仅是学习阶段，尝试将一个现有的开发项目改造成PWA support。

    项目使用的是尤雨溪的Vue.js配合@vue/cli3.0快速开发。

    在@vue/cli的GitHub上，package目录下有很多具体的可添加模块

使用方法：命令行 vue add @vue/pwa

# 简写
vue add @vue/pwa
# 全名
vue add @vue/cli-plugin-pwa

# 简写
vue add pwa
# 全名
vue add vue-cli-plugin-pwa

 需要先安装yarn，网上教程比较多，自行查阅

注意，安装后会修改或添加部分文件

然后在dev目录下添加sw.js ，大概就是定义PWA的生命周期的监听

self.addEventListener('install', (event) => {
    console.log('Version installing', event);

    event.waitUntil(
        caches.open("static-v1").then(cache => cache.add("https://kaiyouhu.github.io/TMESIS/dist/img/TMESIS-logo.35b33ef8.png"))
    );
});

self.addEventListener('activate', (event) => {
    console.log('Version now ready to handle');
});

self.addEventListener("fetch", event => {
    const url = new URL(event.request.url);
    console.log('fetch', event.request);
});

在vue ui命令下的仪表盘选择打包dist，然后在dist目录下 python -m http.server [port] (可以用apach httpserver 或者nginx)

此处有个问题，在@vue/cli的GitHub 例子给的是sw.js ，然后通过@vue/pwa自动生成的registerServiceWorker.js却是

service-worker.js，本质上sw.js = service-worker.js，这里只要做对应的修改就是了

生成PWA

打开方式如下：

• 地址栏输入：Chrome://flags

• 搜索并启用以下项目：App Banners（应用横幅）、Experimental App Banners（实验性应用横幅）、Desktop PWAs（桌面PWAs）。

• 重启浏览器即可添加支持。

然后在chrome浏览器安装即可

写在后面

    目前只是简单实现通过vue-cli3.0实现pwa，只是为了能够简单安装(入门级别，不要嘲笑)，后续功能还有待继续学习，希望能够和大家共同学习，如有不对，请指正！

    Tips：貌似目前Lavas是一个比较成熟的PWA解决方案，可以考虑看一下！