cocosCreator导出PWA包

渐进式 Web 应用 (PWA) 是使用 Web 技术生成的应用程序，可以从一个代码库安装并可在所有设备上运行。
PWA 在支持设备上为用户提供类似于本机的体验。它们适应每个设备支持的功能，还可以在 Web 浏览器（如网站）中运行。

今天尝试着将我们用cocosCreator开发的游戏也达成一个PWA包，让其可以在三端运行。

前言

如果对WPA这个概念不太清楚的，可以先去了解一下。渐进式 Web 应用(PWA)概述，可以先跟着里面的教程走一遍。很简单，走通之后直接移植到cocosCreator即可。本文介绍也就是分享下我创建的过程和踩的一些坑。

设置cocosCreator项目为Web平台

个人理解，WPA本质上就是一个web程序，所以我们首先要做的就是将cocosCreator导出为web平台，我这里导出的是web-mobile。

配置PWA所需的文件

PWA需要一些特定的文件和配置，我这里就用到了2个，有了这两个基本上就可以了，但是你有其他的需要，则需要其他的一些文件。

创建 Web 应用清单

Web 应用清单是一个 JSON 文件，其中包含有关应用的元数据，例如其名称、说明、图标及其使用的各种操作系统功能。有关详细信息，请参阅使用 Web 应用清单将 PWA 集成到 OS 中。

在项目的build/web-mobile文件夹内，创建一个名为manifest.json的文件。该文件包含应用的基本信息，如名称、图标和主题色。示例代码如下：

{
  "lang": "en-us",
  "name": "My Cocos Creator Game", 
  "short_name": "Game",  
  "description": "A fun game built with Cocos Creator",
  "start_url": "/",     
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

name 和 short_name：你的应用名称。
start_url：用户打开应用时加载的URL，通常是根目录。
display：设置为 standalone 可以让应用以类似原生应用的方式打开，没有浏览器的UI。
icons：你需要为 PWA 提供不同尺寸的图标，以便在设备上显示。

在导出的index.html中添加下面代码

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

添加服务辅助角色

服务辅助角色是一项关键技术，可帮助使 PWA 快速且独立于网络条件。

服务辅助角色是一个专用的 Web 辅助角色，可以截获来自 PWA 的网络请求，并启用如下方案：

脱机支持，包括间歇性连接。
高级缓存。
运行后台任务，例如接收 PUSH 消息、向应用图标添加锁屏提醒或从服务器提取数据。
PWA 无需为 Microsoft Edge 提供服务辅助角色即可安装应用。但是，我们建议将服务辅助角色添加到 PWA，使其更快，并使 PWA 更可靠，例如，当设备具有间歇性网络连接或脱机时。

服务辅助角色在应用加载的 JavaScript 文件中定义。若要向项目添加服务辅助角色，请执行以下操作：

创建sw.js文件，写入下面基础代码：

const CACHE_NAME = `temperature-converter-v1`;

// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    try {
      // 缓存资源
      await cache.addAll([
        '/',
        '/index.3b8cf.js',
        '/style.f76d1.css',
        "/application.72606.js"
      ]);
    } catch (e) {
      console.error('Failed to cache resources during install:', e);
    }
  })());
});

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);

    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      return cachedResponse;
    } else {
      try {
        // 如果缓存中没有资源，尝试从网络获取
        const fetchResponse = await fetch(event.request);

        // 将网络请求的资源缓存起来并返回
        cache.put(event.request, fetchResponse.clone());
        return fetchResponse;
      } catch (e) {
        // 网络请求失败时，返回一个离线页面或备用资源
        console.error('Failed to fetch resource:', e);
        return caches.match('/offline.html'); // 需要提前准备好 offline.html
      }
    }
  })());
});

再在index.html中引入下面代码：

<script>
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js', { scope: '/' }).then((registration) => {
    console.log('Service Worker registered with scope: ', registration.scope);
  })
  .catch((error) => {
    console.error('Service Worker registration failed: ', error);
  });;
  }
  </script>

做完上述步骤后，整个接入步骤就已经完成了。

验证

在web-mobile文件夹下打开终端，开启本地服务器，方法：
方法1：使用python

1	python3 -m http.server 8080

方法2：使用Node.js

1	npx http-server

使用上面两种方法都可以，然后在浏览器打开网站http://localhost:8080，就可以访问自己的网页了。

1、如果是在电脑端，最简单的方式就是看浏览器有没有安装的图标，如果有就是成功了。如下

2、打开浏览器开发者工具，查看sw.js是否生效，如下图

3、查看sw.js中设置的缓存资源路径下的资源是否有缓存，如下图

踩坑

1、个人在整个过程中，踩的最多的坑就是文件路径的问题，然后基本上所有的问题都是文件路径设置不对的原因。
因为我在开发过程中是在自己电脑上使用的本地服务器，然后正式测试的时候是将web包上传到CDN上测试的，index.html的索引路径不一样。
2、在手机上安装后，icon显示的不对
我在手机上使用谷歌浏览器打开的，提示我安装后，桌面icon右下角会加上一个谷歌浏览器的icon。原因：manifest.json设置的icon尺寸不对。