PWA：安装 Web 应用

最新推荐文章于 2024-06-13 10:02:45 发布

chuogun0812

最新推荐文章于 2024-06-13 10:02:45 发布

阅读量1.3k

点赞数 2

文章标签： json 运维

原文链接：https://my.oschina.net/dkvirus/blog/3099112

版权

初识 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 worker
        if ('serviceWorker' in navigator) {
            // load 事件完成之后才注册 service worker
            window.addEventListener('load', function () {
                // 注册 sw.js
                navigator.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

chuogun0812

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
PWA：安装 Web 应用

初识 PWA要完整介绍 PWA 是什么，需要扯一堆名词，毫无意义。以改造公羊阅读的过程为例，简要的说明什么是 PWA。公羊阅读是个网站，将它改造成 PWA 应用之后，在谷歌浏览器上点击右上角三个小点点，可以看到安装按钮。（没有改造成 PWA 的网站是看不到安装按钮的~~）点击安装，...
复制链接

扫一扫