搜索文件 /

Vue中的渐进式网络应用程序

让您的VUE应用程序成为PWA

PWA的两个主要要求是一个 服务工作者 A. 网页清单 。虽然可以手动将这两者添加到App,但Vue CLI有一些用于为您添加此功能的实用程序。

对于现有项目,您可以运行 vue补充. 命令安装PWA插件for Vue。


             Vue.
              添加
             PWA.

如果您已经发生了更改,请务必在Git中提交它们。

完成后,Vue的CLI将创建一个新的 RegisterServiceWorker.ts. 文件并将其导入我们的 Main.ts.


              进口
             
              {
             CreateApp.
              }
             
              
             
              'vue'
             
              进口
             应用程序
              
             
              './app.vue'
             
              进口
             路由器
              
             
              '。/路由器'
             
              //由CLI添加
             
              进口
             
              './registerserviceworker'
             
              CreateApp.
              
             应用程序
              的)
             
              
              采用
              
             路由器
              的)
             
              
              
              
              '#应用程序'
              的)
复制 复制

RegisterServiceWorker.ts. 文件将指向CLI将在构建时创建的服务工作者。在这里,我们可以自定义用户在服务工作者检测到更新时的体验,网络连接中的更改或收到错误。


              进口
             
              {
             登记
              }
             
              
             
              '注册服务 - 工作人员'
             
              如果
             
              
             过程
              
             env.
              
              node_env.
             
              ===.
             
              '生产'
              的)
             
              {
             
              登记
              
               `
                $ {
               过程
                
               env.
                
                base_url.
                }
               服务员工.JS.
               `
              
             
              {
             
              准备好
             
              
              的)
             
              {
             
              安慰
              
              日志
              
             
              '应用程序是由服务工作者的缓存提供服务。\ n'
             
              +
             
              “有关详细信息,请访问https://goo.gl/afskqb'
             
              的)
             
              }
              
             
              挂号的
             
              
              的)
             
              {
             
              安慰
              
              日志
              
              '服务工作人员已注册。'
              的)
             
              }
              
             
              c
             
              
              的)
             
              {
             
              安慰
              
              日志
              
              '内容已缓存离线使用。'
              的)
             
              }
              
             
              updateFound.
             
              
              的)
             
              {
             
              安慰
              
              日志
              
              '新内容正在下载。'
              的)
             
              }
              
             
              更新
             
              
              的)
             
              {
             
              安慰
              
              日志
              
              '新内容可用;请刷新。'
              的)
             
              }
              
             
              离线
             
              
              的)
             
              {
             
              安慰
              
              日志
              
              '没有找到互联网连接。应用程序在离线模式下运行。
              的)
             
              }
              
             
              错误
             
              
              错误
              的)
             
              {
             
              安慰
              
              错误
              
              '服务员工登记期间错误:'
              
             错误
              的)
             
              }
             
              }
              的)
             
              }
复制 复制

生成的服务工作人员是基于 Workbox的WebPack插件 ,默认情况下是要使用的 生成() 。意味着在构建时,Workbox会自动为其进程的所有文件生成服务工作者缓存。

如果要配置此操作并更改默认行为,请结帐 PWA插件文档 在github上。

显现

除了服务工作者之外,Vue Pwa插件还负责为应用程序创建清单文件。默认情况下,CLI将生成包含以下条目的清单。


              {
             
              “姓名”
              
             
              “pwa-test”
              
             
              “简称”
              
             
              “pwa-test”
              
             
              “theme_color”
              
             
              “#4dba87”
              
             
              “图标”
              
             
              [
             
              {
             
              “src”
              
             
              “./img/icons/android-chrome-192x192.png”
              
             
              “尺寸”
              
             
              “192x192”
              
             
              “类型”
              
             
              “图像/ png”
             
              }
              
             
              {
             
              “src”
              
             
              “./img/icons/android-chrome-512x512.png”
              
             
              “尺寸”
              
             
              “512x512”
              
             
              “类型”
              
             
              “图像/ png”
             
              }
              
             
              {
             
              “src”
              
             
              “./img/icons/android-chrome-maskable-192x192.png”
              
             
              “尺寸”
              
             
              “192x192”
              
             
              “类型”
              
             
              “图像/ png”
              
             
              “目的”
              
             
              “可掩盖”
             
              }
              
             
              {
             
              “src”
              
             
              “./img/icons/android-chrome-maskable-512x512.png”
              
             
              “尺寸”
              
             
              “512x512”
              
             
              “类型”
              
             
              “图像/ png”
              
             
              “目的”
              
             
              “可掩盖”
             
              }
             
              ]
              
             
              “start_url”
              
             
              “。”
              
             
              “展示”
              
             
              “独立”
              
             
              “背景颜色”
              
             
              “#000000”
             
              }
复制 复制

务必更新图标 公共/ img /图标 匹配自己的品牌。如果您想自定义主题颜色或名称,请务必阅读 PWA插件文档 在github上。

部署

您可以使用Firebase,Vercel,NetWify或甚至Azure静态Web应用程序等各种主机。所有人都将具有类似的安装过程,需要完成。对于本指南,Firebase将被用作托管示例。除了本指南之外,还有 Vue Cli文档 还有关于如何部署到各种提供商的指南。

Firebase.

Firebase Hosting为渐进式Web应用提供了许多优势,包括默认情况下的CDN,HTTPS的快速响应时间,并支持 http2推

首先,如果尚未提供, 创建项目 在Firebase。

接下来,在终端中,安装Firebase CLI:


              $
              NPM.
             
              安装
             -g firebase-tools

使用Firebase CLI安装,运行 Firebase Init. 在您的离子项目中。betway东盟体育appCLI提示:

“您想要为此文件夹设置哪个Firebase CLI功能?” 选择“托管:配置和部署并部署Firebase托管站点。”

“选择此目录的默认Firebase项目:” 选择您在Firebase网站上创建的项目。

“你想用什么作为你的公共目录?” 输入“dist”。

注意:接听以下两个问题将确保在应用程序中进行路由,硬重新加载和深度链接工作:

配置为单页应用程序(将所有URL重写为/index.html)?“ 输入“是”。

“文件dist / index.html已存在。覆盖?” 输入“否”。

一种 Firebase.Json. 配置配置文件,配置应用程序以进行部署。

需要的最后一件事是确保正确设置缓存标头。为此,添加一个 标题 片段赛段 Firebase.Json. 文件。完整 Firebase.Json. 好像:


              {
             
              “托管”
              
             
              {
             
              “上市”
              
             
              “dist”
              
             
              “忽视”
              
             
              [
             
              “firebase.json”
              
             
              “** /。*”
              
             
              “** / node_modules / **”
             
              ]
              
             
              “重写”
              
             
              [
             
              {
             
              “来源”
              
             
              “**”
              
             
              “目的地”
              
             
              “/index.html”
             
              }
             
              ]
              
             
              “标题”
              
             
              [
             
              {
             
              “来源”
              
             
              “/ **”
              
             
              “标题”
              
             
              [
             
              {
             
              “钥匙”
              
             
              “缓存控制”
              
             
              “价值”
              
             
              “公共,最大年龄= 31536000”
             
              }
             
              ]
             
              }
              
             
              {
             
              “来源”
              
             
              “预存清单。*。js”
              
             
              “标题”
              
             
              [
             
              {
             
              “钥匙”
              
             
              “缓存控制”
              
             
              “价值”
              
             
              “no-cache”
             
              }
             
              ]
             
              }
              
             
              {
             
              “来源”
              
             
              “服务员工。”
              
             
              “标题”
              
             
              [
             
              {
             
              “钥匙”
              
             
              “缓存控制”
              
             
              “价值”
              
             
              “no-cache”
             
              }
             
              ]
             
              }
             
              ]
             
              }
             
              }
复制 复制

有关更多信息 Firebase.Json. 属性,见 Firebase文档

接下来,通过运行构建应用程序的优化版本:


              $
             betway东盟体育app离子建设

最后,通过运行部署应用程序:


              $
             Firebase部署

完成此后,该应用程序将居住。

以前的
平台实用程序
下一个
贮存
Baidu