MarkBind · Harjun751 · Dec 17, 2025 · Dec 18, 2025 · Dec 18, 2025 · Dec 18, 2025
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -98,5 +98,14 @@ module.exports = {
         "import/no-extraneous-dependencies": "off",
       },
     },
+    {
+      // Suppress no-restricted-globals in service workers, since eslint does not allow `self` keyword,
+      // which is standard in service workers.
+      // See: https://github.com/airbnb/javascript/issues/1632
+      "files": ["**/sw.js"],
+      "rules": {
+        "no-restricted-globals": "off",
+      },
+    },
   ],
 };
diff --git a/docs/_markbind/layouts/userGuide.md b/docs/_markbind/layouts/userGuide.md
@@ -36,6 +36,7 @@
   * [Redirecting to a Custom 404 Page]({{baseUrl}}/userGuide/redirectingToACustom404Page.html)
   * [Adding Navigation Buttons]({{baseUrl}}/userGuide/addingNavigationButtons.html)
   * [Templates]({{baseUrl}}/userGuide/templates.html)
+  * [Progressive Web Apps]({{baseUrl}}/userGuide/progressiveWebApps.html)
 * References :expanded:
   * [CLI Commands]({{baseUrl}}/userGuide/cliCommands.html)
   * [Reader-Facing Features]({{baseUrl}}/userGuide/readerFacingFeatures.html)

diff --git a/docs/userGuide/cliCommands.md b/docs/userGuide/cliCommands.md
@@ -59,6 +59,9 @@ Usage: markbind <command>
 * `-t`, `--template` <br>
   When initialising MarkBind, change the template that you start with. See [templates](templates.html).
 
+* `-p`, `--pwa` <br>
+  Initializes MarkBind with the files and configuration needed for a Progressive Web App. See [Progressive Web Apps](progressiveWebApps.html)
+
 {{ icon_examples }}
 * `markbind init` : Initializes the site in the current working directory.
 * `markbind init ./myWebsite` : Initializes the site in `./myWebsite` directory.

diff --git a/docs/userGuide/progressiveWebApps.md b/docs/userGuide/progressiveWebApps.md
@@ -0,0 +1,53 @@
+{% set title = "Progressive Web Apps" %}
+{% set filename = "progressiveWebApps" %}
+
+<span id="title" class="d-none">{{ title }}</span>
+
+<frontmatter>
+  title: "User Guide: {{ title }}"
+  layout: userGuide.md
+</frontmatter>
+
+<span id="link" class="d-none">
+<md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
+</span>
+
+# {{ title }}
+
+<div class="lead" id="overview">
+
+MarkBind can initialize sites with basic PWA functionality.
+</div>
+
+During initialization, add the `--pwa` flag to tell MarkBind to bundle PWA requirements. For example:
+
+```
+markbind init --pwa
+```
+
+After doing so, update the `manifest.json` and `sw.js` files to achieve desired functionality.
+
+## Adding PWA functionality to an existing app
+
+For an already-existing app, the following steps add PWA functionality:
+
+1. Set **"pwa": true** in the site's configuration file (`site.json`) at the root-level:
+```json {.line-numbers highlight-lines="6[:]"}
+{
+  "baseUrl": "/myproduct",
+  "faviconPath": "myfavicon.png",
+  "titlePrefix": "FooBar Dev Docs",
+  "titleSuffix": "FooBar",
+  "pwa": true,
+  ...
+}
+```
+2. Add a manifest file named **manifest.json** in the **root folder** of the site.
+3. Populate the manifest with required values. See MDN's guide [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) for more info.
+4. Optionally, add a service worker named **sw.js** in the **root folder** of the site.
+
+<box type="warning">
+  <markdown>
+Note: The file names and directory structure of **manifest.json** and **sw.js** should strictly be adhered to. MarkBind currently does not support multiple service workers.
+  </markdown>
+</box>
diff --git a/docs/userGuide/siteJsonFile.md b/docs/userGuide/siteJsonFile.md
@@ -20,6 +20,7 @@ Here is a typical `site.json` file:
   "faviconPath": "myfavicon.png",
   "titlePrefix": "FooBar Dev Docs",
   "titleSuffix": "FooBar",
+  "pwa": true,
   "style": {
     "bootstrapTheme": "bootswatch-cerulean",
     "codeTheme": "light",
@@ -109,6 +110,10 @@ Note: `baseUrl` does not support [live preview](glossary.md#live-preview) as the
 
 **The suffix for all page titles.** The separator `-` will be inserted by MarkBind.
 
+#### **`pwa`**
+
+**Indicates whether MarkBind should treat this site as a Progressive Web App (PWA).**
+
 #### **`style`**
 
 _(Optional)_ **The styling options to be applied to the site.** This includes:

diff --git a/packages/cli/index.js b/packages/cli/index.js
@@ -37,6 +37,7 @@ program
   .command('init [root]')
   .option('-c, --convert', 'convert a GitHub wiki or docs folder to a MarkBind website')
   .option('-t, --template <type>', 'initialise markbind with a specified template', 'default')
+  .option('-p, --pwa', 'add Progressive Web App (PWA) functionality to a MarkBind website')
   .alias('i')
   .description('init a markbind website project')
   .action((root, options) => {

diff --git a/packages/cli/src/cmd/init.js b/packages/cli/src/cmd/init.js
@@ -35,6 +35,10 @@ async function init(root, options) {
       process.exitCode = 1;
     }
   }
+
+  if (options.pwa) {
+    await template.addPwaFunctionality();
+  }
 }
 
 module.exports = {

diff --git a/packages/cli/test/functional/test.js b/packages/cli/test/functional/test.js
@@ -4,13 +4,14 @@ const { execSync } = require('child_process');
 
 const { compare } = require('./testUtil/compare');
 
-const { cleanupConvert } = require('./testUtil/cleanup');
+const { cleanupConvert, cleanupConvertPwa } = require('./testUtil/cleanup');
 
 const logger = require('../../../core/src/utils/logger');
 
 const {
   testSites,
   testConvertSites,
+  testConvertPwaSites,
   testTemplateSites,
   plantumlGeneratedFilesForTestSites,
   plantumlGeneratedFilesForConvertSites,
@@ -72,6 +73,23 @@ testConvertSites.forEach((sitePath) => {
   cleanupConvert(path.resolve(__dirname, sitePath));
 });
 
+testConvertPwaSites.forEach((sitePath) => {
+  console.log(`Running ${sitePath} tests`);
+  const nonMarkBindSitePath = path.join(sitePath, 'non_markbind_site');
+  const siteName = sitePath.split('/')[1];
+  try {
+    execSync(`node ../../index.js init ${nonMarkBindSitePath} -c -p`, execOptions);
+    execSync(`node ../../index.js build ${nonMarkBindSitePath}`, execOptions);
+    const siteIgnoredFiles = plantumlGeneratedFilesForConvertSites[siteName];
+    compare(sitePath, 'expected', 'non_markbind_site/_site', siteIgnoredFiles);
+  } catch (err) {
+    printFailedMessage(err, sitePath);
+    cleanupConvertPwa(path.resolve(__dirname, sitePath));
+    process.exit(1);
+  }
+  cleanupConvertPwa(path.resolve(__dirname, sitePath));
+});
+
 testTemplateSites.forEach((templateAndSitePath) => {
   const flag = templateAndSitePath.split(',')[0];
   const sitePath = templateAndSitePath.split(',')[1];

diff --git a/packages/cli/test/functional/testSites.js b/packages/cli/test/functional/testSites.js
@@ -1,5 +1,6 @@
 const testSites = [
   'test_site',
+  'test_site_pwa',
   'test_site_algolia_plugin',
   'test_site_special_tags',
   'test_site_table_plugin',
@@ -10,6 +11,11 @@ const testConvertSites = [
   'test_site_convert/test_navigation_convert',
 ];
 
+const testConvertPwaSites = [
+  'test_site_convert_pwa/test_basic_convert_pwa',
+  'test_site_convert_pwa/test_navigation_convert_pwa',
+];
+
 const testTemplateSites = [
   'minimal,test_site_templates/test_minimal',
   'default,test_site_templates/test_default',
@@ -46,6 +52,7 @@ const plantumlGeneratedFilesForTemplateSites = {
 module.exports = {
   testSites,
   testConvertSites,
+  testConvertPwaSites,
   testTemplateSites,
   plantumlGeneratedFilesForTestSites,
   plantumlGeneratedFilesForConvertSites,

diff --git a/packages/cli/test/functional/testUtil/cleanup.js b/packages/cli/test/functional/testUtil/cleanup.js
@@ -20,6 +20,19 @@ function cleanupConvert(siteName) {
   });
 }
 
+function cleanupConvertPwa(siteName) {
+  cleanupConvert(siteName);
+
+  const filesToRemove = [
+    path.join(siteName, 'non_markbind_site/manifest.json'),
+    path.join(siteName, 'non_markbind_site/sw.js'),
+  ];
+  filesToRemove.forEach((filePath) => {
+    fs.removeSync(filePath);
+  });
+}
+
 module.exports = {
   cleanupConvert,
+  cleanupConvertPwa,
 };
diff --git a/packages/cli/test/functional/test_site_convert_pwa/test_basic_convert_pwa/expected/404.html b/packages/cli/test/functional/test_site_convert_pwa/test_basic_convert_pwa/expected/404.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 6.0.2">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Page not found</title>
+  <link rel="stylesheet" href="/markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="/markbind/css/codeblock-dark.min.css">
+  <link rel="stylesheet" href="/markbind/css/markbind.min.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-tree/markbind-plugin-tree.css">
+
+  <link rel="stylesheet" href="/stylesheets/main.css">
+  <link rel="manifest" href="/manifest.json">
+</head>
+<script>
+  const baseUrl = ''
+</script>
+
+<body>
+  <div id="app">
+    <header sticky>
+      <navbar placement="top" type="dark">
+        <template #brand><a href="/index.html" title="Home" class="navbar-brand">
+            <i class="fa-solid fa-house"></i></a></template>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <template #right>
+          <li>
+            <form class="navbar-form">
+              <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+            </form>
+          </li>
+        </template>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <overlay-source id="site-nav" tag-name="nav" to="site-nav">
+        <div class="site-nav-top">
+          <div class="fw-bold mb-2" style="font-size: 1.25rem;">Contents</div>
+        </div>
+        <div class="nav-component slim-scroll">
+          <site-nav>
+            <overlay-source class="site-nav-list site-nav-list-root" tag-name="ul" to="mb-site-nav">
+              <li class="site-nav-custom-list-item site-nav-list-item-0">[[Home]]</li>
+              <li class="site-nav-custom-list-item site-nav-list-item-0">[[Page-1]]</li>
+            </overlay-source>
+          </site-nav>
+        </div>
+      </overlay-source>
+      <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
+
+        <p>
+        <div class="text-center">
+          <p style="font-size: 10rem">404</p>
+        </div>
+        <div class="text-center">
+          <p style="font-size: 1.5rem">File not found<br>Click <a href="/">here</a> to go back to the home page.</p>
+        </div>
+        </p>
+      </div>
+      <overlay-source id="page-nav" tag-name="nav" to="page-nav">
+        <div class="nav-component slim-scroll">
+        </div>
+      </overlay-source>
+      <scroll-top-button></scroll-top-button>
+    </div>
+    <footer>
+      Custom footer.
+    </footer>
+  </div>
+</body>
+<script src="/markbind/js/bootstrap-utility.min.js"></script>
+<script src="/markbind/js/polyfill.min.js"></script>
+<script src="/markbind/js/vue.global.prod.min.js"></script>
+<script src="/markbind/js/markbind.min.js"></script>
+<script src="404.page-vue-render.js"></script>
+<script>
+  MarkBind.setupWithSearch()
+</script>
+<script>
+if ('serviceWorker' in navigator) {
+   navigator.serviceWorker.register("/sw.js");
+}
+</script>
+
+</html>
diff --git a/packages/cli/test/functional/test_site_convert_pwa/test_basic_convert_pwa/expected/Home.html b/packages/cli/test/functional/test_site_convert_pwa/test_basic_convert_pwa/expected/Home.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 6.0.2">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="/markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="/markbind/css/codeblock-dark.min.css">
+  <link rel="stylesheet" href="/markbind/css/markbind.min.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-tree/markbind-plugin-tree.css">
+
+  <link rel="stylesheet" href="/stylesheets/main.css">
+  <link rel="manifest" href="/manifest.json">
+</head>
+<script>
+  const baseUrl = ''
+</script>
+
+<body>
+  <div id="app">
+    <header sticky>
+      <navbar placement="top" type="dark">
+        <template #brand><a href="/index.html" title="Home" class="navbar-brand">
+            <i class="fa-solid fa-house"></i></a></template>
+        <li><a href="/index.html" class="nav-link">HOME</a></li>
+        <li><a href="/about.html" class="nav-link">ABOUT</a></li>
+        <template #right>
+          <li>
+            <form class="navbar-form">
+              <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+            </form>
+          </li>
+        </template>
+      </navbar>
+    </header>
+    <div id="flex-body">
+      <overlay-source id="site-nav" tag-name="nav" to="site-nav">
+        <div class="site-nav-top">
+          <div class="fw-bold mb-2" style="font-size: 1.25rem;">Contents</div>
+        </div>
+        <div class="nav-component slim-scroll">
+          <site-nav>
+            <overlay-source class="site-nav-list site-nav-list-root" tag-name="ul" to="mb-site-nav">
+              <li class="site-nav-custom-list-item site-nav-list-item-0">[[Home]]</li>
+              <li class="site-nav-custom-list-item site-nav-list-item-0">[[Page-1]]</li>
+            </overlay-source>
+          </site-nav>
+        </div>
+      </overlay-source>
+      <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
+        <p>Welcome to the test-deploy wiki!</p>
+      </div>
+      <overlay-source id="page-nav" tag-name="nav" to="page-nav">
+        <div class="nav-component slim-scroll">
+        </div>
+      </overlay-source>
+      <scroll-top-button></scroll-top-button>
+    </div>
+    <footer>
+      Custom footer.
+    </footer>
+  </div>
+</body>
+<script src="/markbind/js/bootstrap-utility.min.js"></script>
+<script src="/markbind/js/polyfill.min.js"></script>
+<script src="/markbind/js/vue.global.prod.min.js"></script>
+<script src="/markbind/js/markbind.min.js"></script>
+<script src="Home.page-vue-render.js"></script>
+<script>
+  MarkBind.setupWithSearch()
+</script>
+<script>
+if ('serviceWorker' in navigator) {
+   navigator.serviceWorker.register("/sw.js");
+}
+</script>
+
+</html>