PWA：让网页成为应用

发布于 2022-11-15  1076 次阅读

PWA 指的是使用指定技术和标准模式来开发的 Web 应用，这同时赋予它们 Web 应用和原生应用的特性。

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Introduction

1.清单文件

可安装网站需要满足以下条件：

  • 一份网页清单，填好正确的字段
  • 网站的协议必须是安全的（即使用 HTTPS 协议）
  • 一个在设备上代表应用的图标
  • 一个注册好的 Service Worker，可以让应用离线工作（这仅对于安卓设备上的 Chrome 浏览器是必需的）

清单文件 (Manifest)

离线访问的关键在于一份网页清单，它通过 JSON 形式列举了网站的所有信息。

它通常位于网页应用的根目录，包含一些有用的信息，比如应用的标题、在移动设备操作系统上显示的代表该应用的不同大小的图标（例如主屏图标）的路径，和用于加载页或启动画面的背景颜色。浏览器需要这些信息来安装 web 应用并使其在主屏上显示。

js13kPWA 的 js13kpwa.webmanifest 文件包含在 index.html 文件的 <head> 段，如下行所示：

<link rel="manifest" href="js13kpwa.webmanifest">

备注： 这类清单文件有一些曾经常被使用的扩展名：manifest.webapp 在 Firefox OS 应用清单中很流行，而许多人使用 manifest.json 作为网页清单（因为内容是 JSON 格式的）。但是，.webmanifest 扩展名是在W3C 清单规范中显式指定的，所以这里我们使用这个扩展名。

文件的内容是这个样子的：

{
    "name": "js13kGames Progressive Web App",
    "short_name": "js13kPWA",
    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
    "icons": [
        {
            "src": "icons/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        // ...
        {
            "src": "icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/pwa-examples/js13kpwa/index.html",
    "display": "fullscreen",
    "theme_color": "#B12A34",
    "background_color": "#B12A34"
}

大部分字段无需解释，但是我们还是详细解释一下为妙：

  • name: 网站应用的全名。
  • short_name: 显示在主屏上的短名字。
  • description: 一两句话解释你的应用的用途。
  • icons: 一串图标信息：源 URL，大小和类型。多包含几个图标，这样就能选中一个最适合用户设备的。
  • start_url: 启动应用时打开的主页。
  • display: 应用的显示方式；可以是 fullscreen、standalone、minimal-ui 或者 browser。
  • theme_color: UI 主颜色，由操作系统使用。
  • background_color: 背景色，用于安装和显示启动画面时。

一份网页清单最少需要 name 和一个图标 (带有 src, size 和 type)。最好也要提供 description、short_name、和 start_url。除了上述字段，还有一些其它的字段供您使用，请查看网页应用清单参考获取详细信息。

2.注册service worker

if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
};

3.sw.js

// 安装PAW
self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open("缓存版本")then(cache => {
      // 缓存内容
    })
  );
});

// 发送请求的时候处理请求，如果有缓存走缓存，没有再去网络请求，实现静态加载
self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request);
    })
  );
});

欢迎欢迎~热烈欢迎~