pwa应用动态添加到主屏幕

发表于 | 更新于 | 分类于 |
pwa应用通过浏览器打开，打开不同的“服务号”，在添加主屏幕时动态更换图标

PWA介绍

PWA(Progressive Web App)，渐进式网页应用，2014年W3C公布Service Worker的相关草案，其生产环境在2015年被Chrome支持。如果将Servicce Worker出现的时间作为PWA应用的诞生时间，则是2015年。

具体的介绍可参考这篇文章或者是Google文档：

PWA介绍

Google文档

核心技术

PWA不是特指某一项技术，而是应用了多项技术的Web App，其核心包括：App Manifest、Service Worker、Web Push等等。

基本配置

pwa技术是可以非常快的结合到当前的应用项目当中的。其核心配置文件包括：Manifest.json与ServiceWorker.js。

  • Manifest.json中主要对web应用的一些配置进行声明，主要有以下配置：

  • Service Worker主要做一些代理配置工作，主要注册了几个事件，在我的应用过程中，没有对其进行额外的编写。使用的是 react 默认生成的，确实有一些囫囵吐枣了，项目中用不太到。主要事件有：

浏览器支持情况

做了一些调研，大体的浏览器支持情况如下：

详细统计情况如下：

PWA动态更换图标

动态更换icon，一定要能够动态的获取icon。本文主要介绍在动态获得icon之后，如何处理Android浏览器及Safari浏览器的问题。

获取icon： 可以通过在 index.html 中添加一段 JavaScript 获取icon，之后再做处理。

iOS

在前端 index.html中，一般情况下是在 head 中配置icon的路径，比如：

1
<link rel="apple-touch-icon" sizes="180x180" href="favicon-apple.png">

我们需要做的就是把 href 中的图片给替换就可以了，更改为外部链接图片地址，是可行的。通过Safari浏览器添加到桌面主屏幕时，会使用链接中的img。

Android

在Android中，相关配置都是来自于manifest.json中，所以需要做的就是更改相应的manifest来实现动态更换图标等。

正常的配置是这样的：

1
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

这里如果直接像在Safari中的处理方法一样的话，是无法实现动态更换相应的配置信息的。所以参考其他文章，使用了一种trick方法来实现目的。动态替换图标

主要使用blob对象来解决这个问题，去掉原来manifest的引用方式，去掉将原来的href属性及其内容。

1
2
<!--<link rel="manifest" href="%PUBLIC_URL%/manifest.json">-->
    <link rel="manifest" id="my-manifest-placeholder">

将其添加 id 属性，便于之后获取并添加其他属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let manifestUrl = "https://xxx:port/manifest.json";
$.ajax({
    url: manifestUrl,
    success: function (data) {
        let resultObj = JSON.parse(data);
        var myDynamicManifest = {
            "name": resultObj.name,
            "short_name": resultObj.short_name,
            "description": "description",
            "start_url": resultObj.start_url,
            "display": "standalone",
            "theme_color": "#2696f3",
            "background_color": "#2696f3",
            "icons": resultObj.icon
        };
        const stringManifest = JSON.stringify(myDynamicManifest);
        const blob = new Blob([stringManifest], {type: 'application/json'});
        const manifestURL = URL.createObjectURL(blob);
        
        // 添加 href 属性
        document.querySelector('#my-manifest-placeholder').setAttribute('href', manifestURL);

    }
})

关于JavaScript中blob的介绍：JavaScript中的对象

小结

pwa应用在国内的应用环境还不是很好。很麻烦的一件事情是弹出prompt事件，现在无法通过代码控制，显示及隐藏事件是浏览器判断及用户行为所致。

这边文章主要介绍，更改图标的用法，其实这也并不是pwa应用的爆发点。