版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012878818/article/details/85163735
什么是PWA:
Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验
PWA 的主要特点包括下面三点:
- 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
- 体验 - 快速响应,并且有平滑的动画响应用户的操作
- 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面
PWA 具有下面一些特性:
- 渐进式 - 适用于所有浏览器,因为它是以渐进式增强作为宗旨开发的
- 连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
- 类似应用 - 由于是在 App Shell 模型基础上开发,因为应具有 Native App 的交互和导航,给用户 Native App 的体验
- 持续更新 - 始终是最新的,无版本和更新问题
- 安全 - 通过 HTTPS 协议提供服务,防止窥探和确保内容不被篡改
- 可索引 - 应用清单文件和 Service Worker 可以让搜索引擎索引到,从而将其识别为『应用』
- 粘性 - 通过推送离线通知等,可以让用户回流
- 可安装 - 用户可以添加常用的 webapp 到桌面,免去去应用商店下载的麻烦
- 可链接 - 通过链接即可分享内容,无需下载安装
如何把vue-cli构建的项目改造成支持PWA呢?
第一:加入Manifest
manifest 的目的是将Web应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验。
为了这样做,我们需要添加一个manifest.json文件并且在index.html文件中进行声明
pwa-manifest-webpack-plugin
能够让我们在应用构建的时候生成文件:
npm i pwa-manifest-webpack-plugin --save
我们接着能够通过编辑build/webpack.dev.conf.js
以及build/webpack.prod.conf.js
来更新构建过程。
在顶部引入pwa-manifest-webpack-plugin
:
const manifestPlugin = require('pwa-manifest-webpack-plugin')
并且将它添加到插件:
plugins: [
new manifestPlugin({
name: '最野新闻', // 标题 指定了Web App的名称。
short_name: '最野', // 短标题 short_name其实是该应用的一个简称。一般来说,当没有足够空间展示应用的name时,系统就会使用short_name。
description: '最野新闻 - 一款最前线新闻的应用', // 这个字段的含义非常简单,就是一段对该应用的描述。
display: 'standalone', // fullscreen:全屏显示,会尽可能将所有的显示区域都占满;standalone:独立应用模式,这种模式下打开的应用有自己的启动图标,并且不会有浏览器的地址栏。因此看起来更像一个Native App;minimal-ui:与standalone相比,该模式会多出地址栏;browser:一般来说,会和正常使用浏览器打开样式一致。
start_url: '/', // 这个属性指定了用户打开该Web App时加载的URL。相对URL会相对于manifest。这里我们指定了start_url为/,访问根目录。
orientation: 'portrait-primary', // 控制Web App的方向。设置某些值会具有类似锁屏的效果(禁止旋转),例如例子中的portrait-primary。具体的值包括:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary。
icon: {
// icons本身是一个数组,每个元素包含三个属性:
//
// sizes:图标的大小。通过指定大小,系统会选取最合适的图标展示在相应位置上。
// src:图标的文件路径。注意相对路径是相对于manifest。
// type:图标的图片类型
src: path.resolve('src/assets/logo.png'),
sizes: [200]
},
background_color: '#2d8cf0', // background_color是在应用的样式资源为加载完毕前的默认背景,因此会展示在开屏界面。background_color加上我们刚才定义的icons就组成了Web App打开时的“开屏图”。
theme_color: '#2d8cf0' // 定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式(例如,在Android的任务切换器上,主题颜色包围应用程序)。此外,还可以在meta标签中设置theme_color:<meta name="theme-color" content="#5eace0"/>
})
]
最后,在 index.html
中声明使用manifest.json
:
<link rel="manifest" href="./manifest.json">
<!-- 针对safari(iOS)的添加到桌面功能进行相关设置 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="最野新闻">
<link rel="apple-touch-icon" href="./static/images/logo.png">
<!--end-->
<!-- IE的设置 -->
<meta name="application-name" content="最野新闻" />
<meta name="msapplication-TileColor" content="#222">
<meta name="msapplication-square70x70logo" content="./static/images/logo.png" />
<meta name="msapplication-square150x150logo" content="./static/images/logo.png" />
<meta name="msapplication-square310x310logo" content="./static/images/logo.png" />
<!--end-->
配置完上面的步骤之后,你可能需要重启一下 npm run dev
相关代码:https://github.com/hwq888/yeye-PWA
就是这么简单,您已经成功的迈出第一步了,如果你想查看你的成果,下面介绍一套简单的方式:
就是使用 “ngrok” 你可以查看 这篇文章试试:https://blog.csdn.net/u012878818/article/details/81234695