Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
3
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
5
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
3
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
3
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/02/loading-script-files.html
https://vanillawebdev.blogspot.com/2025/02/offline-first-experience-setup.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025
2025
February
17
05:50 AM
How to make your web app installable.
Files:
.
├── index.html
└── manifest.jsonCreate A Manifest File
The following settings are the minimum required for the installation banner (or chips) to shows up. The icon is a Blogger hosted pixel cat image that I've used for almost half a decade for mocking PWAs.
![]() |
manifest.json
{
"name": "My App",
"icons": [
{
"src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmE38-ckZSxizmsxGvWCQWE2UxLcwcHWIH4kGJ_MidDbh0pCHParoHMs6f920gqLK6wSMcd1VYHOup9eHHJe-acIz4sjJm8TJ0X7GdfH_UUVDXIL0vNg7R4BAVkPIyF4v4pKEaFSAMqXc/s192-c-rw/2021-11-03+23_23_36-Untitled+%25282%2529+-+Windows+Photo+Viewer.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "./",
"display": "standalone",
"background_color": "#202020",
"theme_color": "#202020"
}Self-Hosted App Icon
You can also host your own icon. A minimum of 144x144px image is required for the installation icon. One of the supported format is PNG.
"icons": [
{
"src": "images/192.png",
"type": "image/png",
"sizes": "192x192"
}
],HTML
Not required but may be essential:
viewport: to make your site fit on smaller screen.
charset: set character encoding of the page. Generally good to prevent character display issues.
Required:
link to manifest file.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Web App</title>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<!-- PWA manifest -->
<link rel="manifest" href="manifest.json"/>
</head>
<body>
<!-- ... -->
</body>
</html>***
Part of the usual setup:
https://www.blogger.com/comment/fullpage/post/8166404610182826392/6246909595894311607 true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
https://vanillawebdev.blogspot.com/2025/02/loading-script-files.html
https://vanillawebdev.blogspot.com/2025/02/offline-first-experience-setup.html
https://vanillawebdev.blogspot.com/
