在@vue/cli下添加PWA支持

版权声明: https://blog.csdn.net/u014418725/article/details/86999639

 

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解决方案,可以考虑看一下!

展开阅读全文

没有更多推荐了,返回首页