Nanfeng

Notes on software development, code, and curious ideas

Exporting a Cocos Creator Game as a PWA

In
Turn a Cocos Creator Web Mobile export into an installable Progressive Web App.

A Progressive Web App uses web technologies but can be installed and run across supported devices with an app-like experience. This guide converts a Cocos Creator Web Mobile build into a PWA.

Build the project for Web Mobile, then add a manifest link and theme color to index.html:

1
2
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="manifest.json">

Create manifest.json with the app name, start_url, display: "standalone", colors, and 192×192 and 512×512 icons:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "short_name": "MyGame",
  "name": "My Cocos Creator Game",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {"src":"icons/icon-192x192.png","type":"image/png","sizes":"192x192"},
    {"src":"icons/icon-512x512.png","type":"image/png","sizes":"512x512"}
  ]
}

Register a service worker from the page:

1
2
3
4
5
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(() => console.log('Service Worker registered'))
    .catch(error => console.error('Registration failed', error));
}

Create service-worker.js and add the caching strategy required by your game. Serve the build over HTTPS (or localhost), because production service workers require a secure context. Verify the manifest and service worker in browser DevTools before testing installation.

+