PWA:安装 Web 应用

2020-03-03 21:35:57

参考地址 PWA:安装 Web 应用

初识 PWA

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

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

图1

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

图2

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

图3

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

图4

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

图5

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

  • 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 服务器,访问网址,浏览器右上角三个点点可以找到安装按钮。

图6

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



  • 2017-04-07 23:18:29

    mac 安装composer

    当你下载了 composer.phar 后,可以将它放在目录中,但每次当你建立新目录时,你必須再复制一个副本到新目录中,这样比较麻烦。所以最佳做法是将它放到 usr/local/bin 目录中中,成为全域指令。

  • 2017-04-12 10:52:35

    最全面的Android Webview详解

    现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图

  • 2017-04-12 11:22:43

    WebView你真的熟悉吗?看了才知道

    在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装为一个叫做WebView组件。下面总结一下使用webview遇到的那些事、那些坑。

  • 2017-04-12 11:28:14

    史上最全webview详解

    WebView在现在的项目中使用的频率应该还是非常高的。 我个人总觉得HTML5是一种趋势。找了一些东西,在此总结。 本篇最后有一个非常不错 的 Html5Activity 加载类,不想看的可以直接跳下载。

  • 2017-04-12 23:11:59

    Android Studio签名打包的两种方式

    给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行。签名就代表着自己的身份(即keystore),多个app可以使用同一个签名。

  • 2017-04-13 10:57:08

    webstorm 怎么关闭jshint

    You need to configure the inspections in Settings/Editor/Inspections, then in the list on the right, find JavaScript/JavaScript validity issues. That worked for me to remove the Chai warnings. (I am using the WebStorm 11 EAP at the moment.)

  • 2017-04-13 14:11:14

    MySQL中的describe关键字

    今天写代码的时候,有一个类的数据始终不能插入,老是提示在You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe, picPath1, picPath2, picPath3, picPath4, picPath5, agentId, belongStore' at line 1。因为用的是SSH进行插入,所以SQL语句不用自己写,检查了每个字段也没写错。