installkite docs

<script src="https://cdn.jsdelivr.net/npm/installkite@0.1.0/dist/installkite.min.js" data-sw="/sw.js" data-install="auto" defer></script>

# package.json
"scripts": {
  "build": "vite build && npx installkite build"
}

- run: npm run build
- run: npx installkite build --check

{
  "url": "https://site.installkite.local/",
  "mode": "local",
  "checks": [
    {
      "id": "https",
      "title": "Served over HTTPS",
      "status": "info",
      "message": "checked when you run doctor --url against the live site",
      "fix": "Deploy over HTTPS (localhost also works while developing)."
    },
    {
      "id": "viewport",
      "title": "Viewport meta tag",
      "status": "pass",
      "message": "the page sets a viewport"
    },
    {
      "id": "manifest-link",
      "title": "Page links a web app manifest",
      "status": "pass",
      "message": "links /manifest.webmanifest"
    },
    "...": "one entry per rule"
  ],
  "errors": 0,
  "warnings": 1,
  "installable": true,
  "offlineReady": true
}

{
  "$schema": "https://kwy404.github.io/installkite/config.schema.json",
  "root": ".",
  "publicDir": ".",
  "base": "/",
  "icon": "logo.svg",
  "iconsDir": "icons",
  "html": [
    "**/*.html"
  ],
  "app": {
    "name": "Acme Bakery",
    "display": "standalone",
    "themeColor": "#e8590d",
    "backgroundColor": "#ffffff",
    "startUrl": "./",
    "scope": "./",
    "screenshots": true,
    "description": "Bread, cakes and coffee, baked every morning.",
    "lang": "en",
    "shortcuts": [
      {
        "name": "Menu",
        "url": "./menu.html"
      },
      {
        "name": "About",
        "url": "./about.html"
      }
    ]
  },
  "runtime": {
    "mode": "local",
    "installButton": "auto",
    "updateToast": true,
    "offlineIndicator": true
  },
  "sw": {},
  "placeholders": {
    "icons/screenshot-wide.png": "02ac7523e15a",
    "icons/screenshot-narrow.png": "7698c19e98aa"
  }
}

<script src="/installkite.js" data-sw="/sw.js" data-install="auto" data-offline="badge" defer></script>

<button class="btn" data-installkite-install hidden>Install the app</button>

:root {
  --installkite-accent: #2b8ff0;      /* buttons */
  --installkite-on-accent: #ffffff;   /* text on buttons */
  --installkite-surface: #ffffff;     /* toast, sheet, button bar */
  --installkite-text: #14213d;
  --installkite-surface-dark: #18202f;
  --installkite-text-dark: #eef2f8;
}

// installkite.js from the script tag defines window.installkite.
// With a bundler: import installkite from 'installkite/runtime'; installkite.init();

installkite.on('installable', () => {
  document.querySelector('#install').hidden = false;
});

document.querySelector('#install').addEventListener('click', async () => {
  const outcome = await installkite.install(); // accepted, dismissed, instructions (iOS)
  console.log('install:', outcome);
});

installkite.on('installed', () => console.log('Welcome to the home screen'));
installkite.on('update', ({ apply }) => showMyBanner('New version', apply));
installkite.on('offline', () => document.body.classList.add('is-offline'));
installkite.on('online', () => document.body.classList.remove('is-offline'));

// Save pages for offline reading.
await installkite.cache(['/articles/one/', '/articles/two/']);

installkite.init({
  text: {
    install: 'Instalar app',
    iosTitle: 'Adicione a Tela de Inicio',
    iosStep1: 'Toque em Compartilhar na barra',
    iosStep2: 'Toque em Adicionar a Tela de Inicio',
    iosStep3: 'Toque em Adicionar',
    update: 'Nova versao disponivel',
    refresh: 'Atualizar',
    offline: 'Voce esta offline',
    online: 'Conectado de novo',
  },
});

/* Service worker generated by installkite 0.1.0: https://kwy404.github.io/installkite/
 * Run "npx installkite build" after every site build to refresh the precache list. */
self.__INSTALLKITE__ = {
  "version": "8e1ebe2623",
  "precache": [
    ["about.html","ec810b41b7a8"],
    ["apple-touch-icon.png","821006243b6d"],
    ["favicon-32x32.png","4e48f2b8460a"],
    ["favicon.ico","5fc5d0cfdb3f"],
    /* 9 more files, each with its content hash */
  ]
};
/* the bundled strategies follow, about 7 kB */

import { applyPlan, doctorLocal, generateIcons, loadIconSource, planBuild, planInit } from 'installkite';
import { readFileSync } from 'node:fs';

// The same as npx installkite init --yes, from a script.
const plan = planInit(process.cwd(), { name: 'Acme Bakery', themeColor: '#e8590c', postbuild: false });
for (const file of plan.files) if (file.diff) console.log(file.diff);
applyPlan(process.cwd(), plan.files);

// After a site build:
applyPlan(process.cwd(), planBuild(process.cwd()).files);

// Only the icons, in memory:
const source = loadIconSource(readFileSync('logo.svg'), 'logo.svg');
const { files } = generateIcons(source, { background: '#ffffff' });

const report = await doctorLocal(process.cwd());
if (!report.installable) process.exitCode = 1;