Skip to content

Commit 3a44e77

Browse files
committed
Blog: link the site's own install button source in the install button post
1 parent 2b99dce commit 3a44e77

1 file changed

Lines changed: 11 additions & 2 deletions

File tree

  • blog/2026-10-06-install-button-for-websites

‎blog/2026-10-06-install-button-for-websites/index.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,19 @@ What is easy to get wrong:
108108
| Desktop | Firefox | No | Not supported; the app only runs in a tab |
109109
| Mac | Safari | No | File → "Add to Dock" (macOS Sonoma and later) |
110110

111+
## A working example: this blog
112+
113+
This site uses the same technique - in a Chromium browser the [homepage](/) shows an "Install app" button. It is a Docusaurus site, so the pieces are spread over React instead of living in one file, and the [source is public](https://github.com/Codeuctivity/codeuctivity.github.io):
114+
115+
- [`static/manifest.webmanifest`](https://github.com/Codeuctivity/codeuctivity.github.io/blob/main/static/manifest.webmanifest) - the manifest, linked through `headTags` in [`docusaurus.config.ts`](https://github.com/Codeuctivity/codeuctivity.github.io/blob/main/docusaurus.config.ts)
116+
- [`src/clientModules/installPrompt.ts`](https://github.com/Codeuctivity/codeuctivity.github.io/blob/main/src/clientModules/installPrompt.ts) - catches `beforeinstallprompt` as soon as the bundle runs, because the event usually fires before React has hydrated
117+
- [`src/components/InstallButton/index.tsx`](https://github.com/Codeuctivity/codeuctivity.github.io/blob/main/src/components/InstallButton/index.tsx) - the button, rendered only while an install offer exists
118+
- [`e2e/install.spec.ts`](https://github.com/Codeuctivity/codeuctivity.github.io/blob/main/e2e/install.spec.ts) - a Playwright test for it
119+
120+
It deliberately has no service worker, so the installed blog needs a connection, like the site itself.
121+
111122
## Summary
112123

113124
A manifest and a 20-line event handler make a website installable with one click on Android and on desktop Chromium. Nothing but a deployment stands between `git push` and the user's home screen.
114125

115-
The source of this blog, including this post, is on GitHub: [Codeuctivity/codeuctivity.github.io](https://github.com/Codeuctivity/codeuctivity.github.io).
116-
117126
For questions or feedback, contact us at [Codeuctivity@gmail.com](mailto:Codeuctivity@gmail.com).

0 commit comments

Comments
 (0)