记录-vue项目中使用PWA
Posted 林恒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录-vue项目中使用PWA相关的知识，希望对你有一定的参考价值。
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前言：
梳理了一下项目中的PWA的相关用法，下面我会正对vue2和vue3的用法进行一些教程示例，引入离线缓存机制，即使你断网，也能访问页面。一旦用户访问了我们的网页，我们就像牛皮糖一样粘连着他，他永远都可以访问，即使断网也能访问。有一天我们下掉了网站他仍然能够访问，这就是把缓存写入了cache storage，并安装注册到用户的本地。
PAW在vue-admin-element下的相关配置
1、执行vue add @vue/cli-plugin-pwa
package.json里会增加两个依赖 // dependencies下 "register-service-worker" <!-- devDependencies下 --> "@vue/cli-plugin-pwa" 会自动在src的根目录生成一个registerServiceWorker.js文件
2、在main.js导入
import \'./registerServiceWorker\'
3、在src下新建service-worker.js文件
完整配置如下（拿来即用）
/* eslint-disable no-undef*/ importScripts(\'https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js\') if (workbox) console.log(`Yay! Workbox is loaded如何将 Paypal 智能按钮集成到 vue 浏览器扩展 pwa [关闭]
【中文标题】如何将 Paypal 智能按钮集成到 vue 浏览器扩展 pwa [关闭]【英文标题】：How to integrate Paypal smart button into vue browser extension pwa [closed] 【发布时间】：2021-02-20 04:49:38 【问题描述】：当我在寻找一种将支付和订阅集成到现有 vue 项目的方法时，我发现了 Paypal 智能按钮文档。这似乎是在客户端解决方案中使用的安全解决方案，有人用 vue 尝试过吗？我将在我的 vue 浏览器扩展中使用 sdk，因为要替换 CWS 已弃用的 API，所以我担心安全方面。不清楚我是否还需要服务器端代码来使用按钮。
【问题讨论】：
【参考方案1】：订阅按钮是客户端的，除非你pair one with a server integration.
你可以generate subscribe buttons at PayPal.
【讨论】：
哪种解决方案最好？我看到智能按钮比生成的按钮更灵活？ 一个需要服务器，另一个不需要。如果您需要立即在服务器端记录新创建的订阅 ID，则使用服务器执行操作非常有用。 服务器端部分也可以与firebase或firestore集成？ 据我所知，这些是数据库。您需要一个可以执行 API 调用的编程环境和一个创建自己的 API 端点的地方。以上是关于记录-vue项目中使用PWA的主要内容，如果未能解决你的问题，请参考以下文章
vue/cli-plugin-pwa：服务器请求（使用 axios）不被 service worker 缓存