Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/foumart/js.13kgames
Progressive Web App starter pack for JS13k games
https://github.com/foumart/js.13kgames
javascript js13k js13kgames pwa
Last synced: 4 months ago
JSON representation
Progressive Web App starter pack for JS13k games
- Host: GitHub
- URL: https://github.com/foumart/js.13kgames
- Owner: foumart
- License: mit
- Created: 2016-08-02T21:37:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-27T14:43:19.000Z (6 months ago)
- Last Synced: 2024-10-14T02:40:46.169Z (4 months ago)
- Topics: javascript, js13k, js13kgames, pwa
- Language: JavaScript
- Homepage:
- Size: 755 KB
- Stars: 29
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JS13kGames Progressive Web App starter pack
JS13K Games Competition website: https://js13kgames.com/
This template targets the compo's **Mobile** category by providing a convenient way to build Progressive Web Apps.
PWAs at minimum need a service worker script, web manifest and icon files, which increases the final archive size by around a kilobyte.
The template also uses a sophisticated Gulp process to parse JS code with Google Closure Compiler and to pack it along with any CSS into a single minified HTML file. Additional compression is achieved utilizing Roadroller JS packer. Once successfully built the game will be opened in the default browser with BrowserSync live-reload enabled. Any modification in src/ folder will invoke a game reload on the localhost.
## Installation
Run **`npm install`** to install build dependencies.
## Tasks
**`npm build`** builds the game, reports archive size and serves locally with browser sync live reload enabled.
**`npm debug`** builds the game without any minifying for easier debugging. Includes detailed console logs.
**`npm test`** repacks the contents of the public folder to report archive filesize.
**`npm sync`** rebuilds the game and refreshes the browser, automated via BrowserSync.
## Build task parameters
*`--pwa`* instructs to build a Progressive Web App - will add 842 bytes when zipped.
*`--roadroll`* instructs to use a JS packer to achieve up to 15% compression on top of the ZIP/gzip.
*`--mobile`* adds some HTML tags regarding mobile and iOS icons - increases the ZIP filesize with 42 bytes.
*`--social`* adds some HTML tags for SEO and social media (Twitter) - will add around 100 bytes, depending on description length.
## Template Structure
```
root/
├── resources/
│ ├── externs.js - externs for Closure Compiler
│ ├── mf.webmanifest - needed for the PWA functionality
│ ├── service_worker.js - PWA
│ └── sw_init.js - PWA
├── src/
│ ├── index.html - template ("rep_css" and "rep_js" should be kept intact)
│ ├── ico.svg - PWA
│ ├── scripts/ - should contain all JS scripts
│ ├── styles/ - should contain all CSS styles
│ └── assets/ - should contain any images the game needs
├── public - output folder
├── zip - output ZIP archives
└── package.json - check Setup
```
## Setup
Setup is done in the **`package.json`**. Variables you have to modify:
- name - *used for generating the cache name in the service_worker.js file*
- version - *used for generating the cache name in the service_worker.js file*
- title - *populated in the title tag of the HTML, in the webmanifest file and in the social meta tags*
- description - *used only if social option is turned on*
- keywords - *used only if social option is turned on*
- orientation - *populated only in the webmanifest file*
- icon extension - *needed for the HTML's icon link tag, used in the webmanifest file and in the service_worker.js file*
- icon type - *needed for the HTML's icon link tag, in the webmanifest file and in the service_worker.js file*
- icon size - *used in the webmanifest file*
## Filesize overview:
Currently the ZIP output of the default *`npm:build`* is 3.34 KB (3,430 bytes), of which:
- 1,312 bytes are occupied by the interactive demo (ship.png 612 bytes + scripts)
- 842 bytes for PWA functionality (serviceworker + webmanifest + initialization scripts)
- 256 bytes for ico.svg (an icon is needed for PWA functionality)
- 900 bytes for an index.html with a default basic structure
Regarding the icon - it needs to be at least 144x144 pixels in size minimum. Using the PNG format will provide no less than 500 bytes image, so the SVG format remains best in terms of compression.