使网站支持PWA

本教程可以引导您修改您的网站，使您的网站可以触发浏览器 PWA 安装。

效果图

PWA 简介

以下内容来自 ChatGPT

要将您的网站转换为 PWA，需要遵循以下步骤：
创建一个基本的网页模板：您需要将您的网站转换为 PWA 应用，因此必须首先创建一个基本的网页模板。
添加 Web App Manifest：Web App Manifest 是一种 JSON 文件，用于描述 PWA 应用的各种元数据，例如名称、图标、主题颜色、启动 URL 等。您需要在网站根目录中创建一个 manifest.json 文件并填写相关信息。
添加 Service Worker：Service Worker 是一种 JavaScript 文件，用于管理 PWA 应用程序的离线缓存和网络请求。您需要将 Service Worker 文件添加到您的网站，并为其编写逻辑代码。
添加应用程序图标：您需要为 PWA 应用程序添加一组应用程序图标，以便在各种设备和平台上正确显示。您需要为不同大小的图标创建不同的版本，并将其添加到 Web App Manifest 文件中。
测试和部署：一旦您完成了上述步骤，就可以在本地测试 PWA 应用程序，并将其部署到您的网站上，以便其他人也可以访问它。
From ChatGPT

教程

首先，在 HTML 页面上插入一个清单标签。

<link rel="manifest" href="/manifest.json">

manifest.json 的内容大致如下：

{
  "name": "HCat",
  "short_name": "HCat Client",
  "description": "Javascript client of HCat",
  "icons": [
    {
      "src": "img/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "img/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "img/icons/icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "img/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "img/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "img/icons/icon-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "img/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff"
}

请注意，经过实践得知，start_url 需要为绝对路径而不是相对路径。

接着，你需要创建一个 service worker，可以是完全空白的，所以接下来你可以创建一个叫 service-worker.js 的文件，里面是一片空白的。

补充一下有关 service worker 的信息。

Service Worker 作为一个后台线程，主要有以下作用：
缓存和离线访问：Service Worker 可以拦截网络请求并将响应缓存到浏览器的本地存储中，以便在离线时提供访问。这可以提高应用程序的可靠性和性能。
推送通知：Service Worker 可以接收服务器发送的推送通知，并在用户离线时显示通知。
后台同步：Service Worker 可以在后台周期性地与服务器通信，以便在数据更新时更新应用程序的缓存或本地存储。
代理网络请求：Service Worker 可以拦截所有的网络请求，使得您可以通过 Service Worker 进行筛选、修改或代理。
安全增强：Service Worker 可以通过提供对 HTTPS 的支持，为您的网站提供额外的安全性保护，同时可以使您的应用程序避免受到网络攻击的影响。
通过使用 Service Worker，您可以创建出具备离线访问、实时推送通知、后台同步、数据代理等功能的 Progressive Web Applications（PWA）。PWA 与原生应用程序相比，可以更快地加载、提供更好的用户体验，并且可以在所有设备上无缝运行。
From ChatGPT

然后，在 HTML 中插入以下用于注册 service worker 的 JavaScript 代码。

// 注册 Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

// 安装和激活 Service Worker
self.addEventListener('install', function(event) {
  console.log('Service Worker installed');
});

self.addEventListener('activate', function(event) {
  console.log('Service Worker activated');
});

最后，刷新 HTML 页面，就可以看到浏览器右上角提示安装 PWA 了，如果还是不行，可以尝试右键检查使用 Lighthouse 测评您的页面，Lighthouse 会给出 PWA 无法启用的原因。

页面

分类

使网站支持PWA

效果图

PWA 简介

教程