初识 PWA

要完整介绍 PWA 是什么，需要扯一堆名词，毫无意义。以改造公羊阅读的过程为例，简要的说明什么是 PWA。

公羊阅读是个网站，将它改造成 PWA 应用之后，在谷歌浏览器上点击右上角三个小点点，可以看到安装按钮。（没有改造成 PWA 的网站是看不到安装按钮的~~）

点击安装，完成后会发现生成了桌面应用图标，像原生 App 一样点击一下图标即可进入。

PWA 不只是改变 Web 网站的入口，点击进入应用，可以看到没有浏览器中的地址栏，看起来就跟原生应用一毛一样。

在谷歌浏览器中输入 chrome://apps 可以查看安装了哪些 PWA 应用，选择应用，右键可以卸载该应用。

移动端也是一样的，在手机浏览器上访问公羊阅读的网址：https://novel.dkvirus.top ，在网页最下方可以看到提示框："将公羊阅读添加到主屏幕"，点击即可添加到桌面。

注意：移动端并不是所有机型都支持添加到桌面功能。

360N6 手机就不支持，
IPhone XR 可以支持添加到主屏幕。

身边测试手机机型有限，欢迎给我发邮件说明你的测试结果 me@dkvirus.com。

将网站改造成 PWA 应用

这部分从头介绍如何将一个网站改造成 PWA 应用。

搭建一个网站

PWA 要求一：网址必须是 https 协议，或者域名是 localhost。

本地测试只要保证访问域名是 localhost 即可，创建一个网页 index.html，然后部署到 nginx 服务器上，通过 localhost 访问 index.html。

不了解 Web 服务器的参考：图解 Web 服务器

创建 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>PWA DEMO</title>
</head>
<body><h1>将网站改造成 pwa 应用</h1>
</body>
</html>

manifest.json

PWA 要求2：包含 manifest.json 中关键字段：short_name/name、icons、start_url、display；

manifest.json 定义了Web 应用的参数，比如：Web 应用叫什么名字、Web 应用的图标是啥等等。

在 index.html 同级目录下创建 manifest.json 文件

{"name": "测试PWA","start_url": "/index.html","display": "standalone","icons": [{"src": "logo.png","sizes": "192x192","type": "image/png"}]
}

属性说明：

name 安装应用的名称，比如上面?的 公羊阅读；
start_url 点击图标进入应用，访问的第一个页面；
display 有三个值 fullscreen(全屏展示)、standalone(不包含浏览器的地址栏)、minimal-ui；
icons 应用的图标，自己找个图标命名为 logo.png 放在根目录下即可。

在 index.html 的 header 属性中引入 manifest.json 文件

// index.html
<head>// ......<link rel="manifest" href="manifest.json">
</head>

sw.js

PWA 要求三：注册 Service Worker 并且监听 fetch 事件；

Service Worker 是 PWA 的另外一个知识点，主要用来做缓存，这里不多介绍。

在 index.html 同级目录下创建 sw.js 文件（sw 是 service worker 的首字母拼接），监听 fetch 事件。

self.addEventListener('fetch', function (evt) {console.log('sw fetch() 发送的请求', evt.request.url)
})

在 index.html 中注册 sw.js

<body><h1>将网站改造成 pwa 应用</h1><script>// 判断浏览器是否支持 service workerif ('serviceWorker' in navigator) {// load 事件完成之后才注册 service workerwindow.addEventListener('load', function () {// 注册 sw.jsnavigator.serviceWorker.register('/sw.js').then(function (registration) {// 注册成功console.log('sw.js 注册成功', registration.scope);}).catch(function (err) {// 注册失败:(console.log('sw.js 注册失败 ', err);});});}</script>
</body>

验证结果

启动 nginx 服务器，访问网址，浏览器右上角三个点点可以找到安装按钮。

如果没有安装按钮，请检查是否符合上述介绍的三个要求，亦或是您已经安装过 Web 应用，也不会出现安装按钮。

转载于:https://my.oschina.net/dkvirus/blog/3099112

PWA：安装 Web 应用相关推荐

PWA(Progressive Web App)入门系列：安装 Web 应用
前言在传统的 Web 应用中,通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问,或者把网页地址创建到桌面上通过点击,然后在浏览器里打开. 传统模式下,图标.启动画面.主题色.视图模式.屏幕方 ...
PWA (Progressive Web App)
PWA (Progressive Web App) 1.简介是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生的功能,比如:通知推送 Js-to-Nati ...
从 SPA 到 PWA：Web App的下一站在哪？
从AJAX(Asynchronous JavaScript + XML,异步JavaScript和XML)开始, 尤其是 AngularJS 推出之后,SPA(Single Page App,单页应用 ...
PWA(Progressive web apps)：Web技术实现类似原生应用 - 入门
PWA(Progressive web apps):Web技术实现类似原生应用 - 入门简介前言在(使用Google浏览器)访问一些网站时,有时右上角会弹出"安装应用"的按钮. ...
windows一键安装web环境全攻略(win2008)
在windows中安装服务器环境,推荐使用阿里云的集成环境,这里特分享下安装方法,使用win2008的朋友可以参考下 windows一键安装web环境全攻略请根据系统不同下载对应的一键安装包,注意区 ...
linux安装web服务器httpd,Linux_linux构建动态WEB服务器安装篇，基本配置安装web服务器:httpd-2. - phpStudy...
linux构建动态WEB服务器安装篇基本配置安装web服务器:httpd-2.X.X 先优化吧根据CPU设置变量 #export CFLAGS="-O2 -march=pentium4 ...
Linux / openwrt / 安装 Web GUI 和 ftp server
一.安装 Web GUI opkg update . opkg install luci . (选做,安装中文软件包)opkg install luci-i18n-base-zh-cn . /etc/ ...
使用 Advanced Installer 打包一键安装Web应用程序
使用 Advanced Installer 打包一键安装Web应用程序原文 http://www.cnblogs.com/codealone/archive/2013/04/03/2998148. ...
eclipse安装web插件、安装centos版本的idea
eclipse 安装web插件的地址 1.打开eclipse中的help---->Install New Software 2.点击Add按钮,然后弹出一个框,第一个文本框可以随便写,第二个一定 ...
python3.7.3安装失败_python 3.7.3安装web.py报错解决方法
安装python最新版本: 第一,请确保使用下面命令安装web.py pip install web.py==0.40-dev1 第二.运行官方例子: import web urls = ( '/(. ...

PWA：安装 Web 应用