Hexo网站添加PWA

留言

即 在访问时，地址栏出现安装的提示。安装后可以在chrome://apps中看到

渐进式 Web 应用

https://www.google.com/search?q=hexo+PWA%EF%BC%88Progressive+Web+App%EF%BC%89&oq=hexo+PWA%EF%BC%88Progressive+Web+App%EF%BC%89&aqs=chrome..69i57j33i160.1662j0j1&sourceid=chrome&ie=UTF-8

https://senorui.top/posts/bce7.html

https://developer.aliyun.com/article/744051?userCode=okjhlpr5

https://cloud.tencent.com/developer/article/1637656?cps_key=1d358d18a7a17b4a6df8d67a62fd3d3d

我有一个网站dashen.tech，帮我实现能够在地址栏安装后，在chrome://apps能看到我的网站应用


要想在Chrome的应用页(chrome://apps)中看到你的网站，你需要创建一个PWA（Progressive Web App）。以下是创建PWA的基本步骤：

  1. 创建一个manifest.json文件： 这个文件是一个配置文件，用于定义你的应用的一些基本信息，如应用名，图标，启动URL等。这是一个manifest.json文件的例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "short_name": "Dashen Tech",
  "name": "Dashen Technology Website",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}
  1. 在你的HTML文件中引用manifest.json文件： 在你的HTML文件的<head>标签中，添加下面的代码：
1
<link rel="manifest" href="/manifest.json">
  1. 注册Service Worker： PWA需要一个Service Worker来处理离线缓存和资源的更新。你可以在你的JavaScript代码中注册一个Service Worker，如下所示：
1
2
3
4
5
6
7
8
9
10
11
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
  1. 创建一个service-worker.js文件： 这个文件将处理离线缓存和资源的更新。这是一个简单的例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/css/main.css',
        '/js/main.js',
        '/index.html',
        '/',
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});
  1. 验证你的PWA： 验证你的PWA是否正确设置，你可以使用Chrome的工具进行检查。

这只是创建PWA的基本步骤，具体的实现可能会根据你的应用需求有所不同。你可以查看Google的PWA指南获得更多详细信息。