搜索文档 /

Vue中的先进Web应用程序

使您的Vue应用程序PWA

PWA的两个主要要求是a 服务人员 和一个 网络清单 .虽然可以手动将这两种功能添加到应用程序中,但Vue CLI有一些实用工具可以为您添加这两种功能。

对于已存在的项目,可以运行 vue添加 命令,为Vue安装PWA插件。


             vue
              添加
             pwa

如果已经有了更改,请确保在Git中提交它们。

完成此操作后,Vue的CLI将创建一个新的 registerServiceWorker.ts 文件并导入到我们的 main.ts


              进口
             
              
             createApp
              
             
              
             
              “vue”
             
              进口
             应用程序
              
             
              ”。/ App.vue '
             
              进口
             路由器
              
             
              ”。/路由器的
             
              //由CLI添加
             
              进口
             
              ”。/ registerServiceWorker '
             
              createApp
              
             应用程序
              
             
              
              使用
              
             路由器
              
             
              
              
              
              “#应用”
              
复制 复制

registerServiceWorker.ts 文件将指向CLI将在构建时创建的service worker。在这里,我们可以自定义当service worker检测到更新、网络连接变化或接收到错误时用户的体验。


              进口
             
              
             注册
              
             
              
             
              “register-service-worker”
             
              如果
             
              
             过程
              
             env
              
              NODE_ENV
             
              ===
             
              “生产”
              
             
              
             
              注册
              
               
                $ {
               过程
                
               env
                
                BASE_URL
                
               service-worker.js
               
              
             
              
             
              准备好了
             
              
              
             
              
             
              控制台
              
              日志
              
             
              'App正在由service worker从缓存中提供服务。\n'
             
              +
             
              “更多详情,请访问https://goo.gl/AFskqB”
             
              
             
              
              
             
              注册
             
              
              
             
              
             
              控制台
              
              日志
              
              “服务人员已经注册了。”
              
             
              
              
             
              缓存
             
              
              
             
              
             
              控制台
              
              日志
              
              内容已被缓存以供脱机使用
              
             
              
              
             
              updatefound
             
              
              
             
              
             
              控制台
              
              日志
              
              “新内容正在下载。”
              
             
              
              
             
              更新
             
              
              
             
              
             
              控制台
              
              日志
              
              “有新的内容;请刷新。
              
             
              
              
             
              离线
             
              
              
             
              
             
              控制台
              
              日志
              
              没有找到网络连接。App在离线模式下运行。”
              
             
              
              
             
              错误
             
              
              错误
              
             
              
             
              控制台
              
              错误
              
              service worker注册时出错
              
             错误
              
             
              
             
              
              
             
              
复制 复制

生成的service worker是基于 工具箱的webpack插件 ,默认情况下是设置使用 GenerateSW () .这意味着在构建时,Workbox将为它处理的所有文件自动生成一个service worker缓存。

如果您想配置并更改默认行为,请签出 PWA插件文档 在GitHub上。

清单

除了service worker, Vue PWA插件还负责为应用程序创建清单文件。默认情况下,CLI将生成包含以下条目的清单。


              
             
              “名称”
              
             
              “pwa-test”
              
             
              “short_name”
              
             
              “pwa-test”
              
             
              “theme_color”
              
             
              “# 4 dba87”
              
             
              “图标”
              
             
              
             
              
             
              " src "
              
             
              ”。/ img /图标/ android -铬- 192 x192.png”
              
             
              “大小”
              
             
              “192 x192”
              
             
              “类型”
              
             
              “图像/ png”
             
              
              
             
              
             
              " src "
              
             
              ”。/ img /图标/ android -铬- 512 x512.png”
              
             
              “大小”
              
             
              “512 x512”
              
             
              “类型”
              
             
              “图像/ png”
             
              
              
             
              
             
              " src "
              
             
              ”。/ img /图标/ android -铬-可屏蔽的- 192 - x192.png”
              
             
              “大小”
              
             
              “192 x192”
              
             
              “类型”
              
             
              “图像/ png”
              
             
              “目的”
              
             
              “可屏蔽的”
             
              
              
             
              
             
              " src "
              
             
              ”。/ img /图标/ android -铬-可屏蔽的- 512 - x512.png”
              
             
              “大小”
              
             
              “512 x512”
              
             
              “类型”
              
             
              “图像/ png”
              
             
              “目的”
              
             
              “可屏蔽的”
             
              
             
              
              
             
              “start_url”
              
             
              “。”
              
             
              “显示”
              
             
              “独立”
              
             
              “background_color”
              
             
              “000000 #”
             
              
复制 复制

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

部署

你可以使用各种主机,比如Firebase, Vercel, Netlify,甚至是Azure静态Web应用。所有这些都需要完成类似的设置过程。对于本指南,将使用Firebase作为宿主示例。除了本指南, Vue CLI文档 还有关于如何部署到各种提供者的指南。

重火力点

Firebase托管为进步Web应用程序提供了许多好处,包括cdn的快速响应时间,默认启用HTTPS,以及支持 HTTP2推

首先,如果还没有, 创建项目 在重火力点。

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


              
              npm
             
              安装
             - g firebase-tools

安装Firebase CLI后,运行 重火力点init 在你的爱奥尼亚项目中。betway东盟体育appCLI提示:

“您想为这个文件夹设置哪些Firebase CLI特性?” 选择“托管:配置和部署Firebase托管站点”。

"为这个目录选择一个默认的Firebase项目" 选择您在Firebase网站上创建的项目。

“您想用什么作为您的公共目录?” 进入“经销”。

注意:回答以下两个问题将确保路由、硬重载和深度链接在应用程序中工作:

配置为单页应用(重写所有url到/index.html)? 输入“是的”。

"文件dist/index.html已经存在。覆盖吗?” 进入“不”。

一个 firebase.json 生成配置文件,配置用于部署的应用程序。

最后一件事是确保缓存头被正确设置。要做到这一点,添加一个 片段的 firebase.json 文件。完整的 firebase.json 看起来像:


              
             
              “托管”
              
             
              
             
              “公共”
              
             
              “距离”
              
             
              “忽略”
              
             
              
             
              “firebase.json”
              
             
              “* * / *”。
              
             
              “* * / node_modules / * *”
             
              
              
             
              “重写”
              
             
              
             
              
             
              “源”
              
             
              “* *”
              
             
              “目的地”
              
             
              “/ index . html”
             
              
             
              
              
             
              “头”
              
             
              
             
              
             
              “源”
              
             
              “/ * *”
              
             
              “头”
              
             
              
             
              
             
              “关键”
              
             
              “cache - control”
              
             
              “价值”
              
             
              “公共信息= 31536000”
             
              
             
              
             
              
              
             
              
             
              “源”
              
             
              “precache-manifest * . js”。
              
             
              “头”
              
             
              
             
              
             
              “关键”
              
             
              “cache - control”
              
             
              “价值”
              
             
              “no - cache”
             
              
             
              
             
              
              
             
              
             
              “源”
              
             
              “service-worker.js”
              
             
              “头”
              
             
              
             
              
             
              “关键”
              
             
              “cache - control”
              
             
              “价值”
              
             
              “no - cache”
             
              
             
              
             
              
             
              
             
              
             
              
复制 复制

有关的更多信息 firebase.json 属性,看到 重火力点文档

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


              
             betway东盟体育app离子构建

最后,通过运行以下命令部署应用程序:


              
             重火力点部署

完成后,应用程序将是活的。

以前的
平台跑龙套
下一个
存储
Baidu