渐进式Web应用

发布于 2022/04/22 - 修改于 2022/04/22 - 大约需要 3 分钟 - 1360 字

前言

最近不知为何，突然对PWA，也就是渐进式Web应用开始感兴趣。也许是对于各种小程序厌倦了，觉得不如投向真正的HTML5的标准。

渐进式Web应用，首先是Web，也就是它本身是标准的HTML5的网站。其次是渐进式，因为功能都是可选的，不影响旧版本浏览器的用户访问。也就是说，旧版本用户正常访问的同时，新版本用户享受新版本浏览器的额外功能。最后则是应用，因此新版浏览器允许我们将这样的网站像应用一样安装到操作系统上。理论上只要有浏览器就可以享受到PWA，而不需要额外再安装Electron（当然也会缺失一些Electron提供的功能）。

要说好处嘛，大概是可以缓存所有的页面吧。话说我这整个站点才3兆不到，缓存全部也不过分吧（笑）。因此这里便记录一下将博客PWA化的过程，将来如果我有什么应用，恐怕也是第一时间先开发PWA版应用吧。

所有内容均可在MDN找到参考。对于使用基于Chrome浏览器的开发者而言，开发者工具中的Lighthouse工具可以帮助检查需要完善的地方。

如果只是想体验下，可以参考的PWA应用有少数派（注：只支持移动端）和Squoosh。 Chrome的桌面端和手机端、火狐的手机端均支持（火狐的桌面端需要特殊方式才能支持安装PWA）。

图标

首先一个比较重要的点在于对于PWA来说，图标不再是可有可无的了。因此有钱的可以找一个设计师设计一个好看的图标，没钱的大概只能像我这样用自动生成的图标了。

为了让苹果用户在IOS上可以安装我们的页面，我们需要添加一个apple touch icon： <link rel="apple-touch-icon" href="/example.png">。具体对于图标的要求请寻找对应的文档。

Manifest

我们需要提供一个清单，让浏览器了解一些基本信息。主要可以参考MDN的文档

我们需要提供一个清单，包含应用名称以及一些图标的链接。参考favicon.io生成的文件site.webmanifest，并添加了些其他内容：

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ],
    "start_url": "/index.html",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

值得注意的是我对两个图标都声明了maskable，具体含义可以参考Web Dev文档。这取决于具体的图标。

同时我们也要把指向这个清单的链接加入网页，例如<link rel="manifest" href="site.webmanifest">。

Service Worker

Service Worker能提供包括缓存、拦截访问并用缓存替换在内的一系列功能。对于Chrome系来说它是必要的，但是对于火狐移动端并不必要。不论如何我们还是要加上。

首先要做的是创建这么一个js程序。之后要在页面上安装这个程序。内容如下：

if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js');
};

可以看到它会根据浏览器是否提供该项功能来决定是否安装Service Worker。这也就是所谓的渐进式。同时注意Service Worker放在网站根目录下，因为Service Worker所在路径决定了它能控制的范围。

它的更新是自动的，浏览器会比较内容来决定是否需要更新。同一时刻只能有一个Service Worker在工作，所以新的要等到老的结束对客户端的控制，也就是所有相关页面都被关闭。

总结

我的Service Worker尚未完成，但到此处为止大致的PWA化已经完成。浏览器已经可以提示安装此网站。待日后再更新Service Worker离线化网站。