The short answer: a PWA is a normal website with two things added: a small file that describes it (the manifest) and, if you want it to work offline, a background program (the service worker). With that, the browser offers “install”, and the site opens with an icon on the screen, without the address bar. It needs https. It is not an app-store app: it is the same website.
The minimum for the browser to offer “install”
| 1 |
The site must be on https. If it is not yet, see HTTP or HTTPS.
|
|
| 2 |
Create the manifest, a manifest.webmanifest file in the main folder of the site, with this content (change the names and icons):
{
"name": "The full name of your site",
"short_name": "Your site",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#d60037",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
|
|
| 3 |
Make the two icons, square, 192 and 512 pixels, as PNG, and put them at the paths you wrote.
|
|
| 4 |
Link the manifest to the page, inside the <head> tag: <link rel="manifest" href="/manifest.webmanifest">. On WordPress, a PWA plugin does this for you: check the result instead of trusting it.
|
|
| 5 |
Check in Chrome: F12, the Application tab, the Manifest section. Errors show up there, with the cause.
|
|
And working offline
The manifest only gives the icon and the window without a bar. For the page to open when there is no connection you need a service worker: a JavaScript file registered with navigator.serviceWorker.register('/sw.js') that decides what to store and when. It is the hard part, because it is code of yours and because it stores files on the visitor’s device.
| What you want |
What you need |
| Just the icon on the screen and a clean window |
The manifest and the icons. Nothing more. |
| Opening without a connection |
A service worker, carefully: what it stores has to be refreshed. |
| To be in the app stores |
Something else: a PWA does not appear there by itself. |
|
A badly written service worker makes the visitor see the old version of the site forever, even after you change it. It is the same problem as Visitors still see the old CSS or logo, but worse, because the cache is on their device and your server cannot clear it. Start without a service worker and only add one if you truly need offline mode.
|
|
On iPhone the installation is done from the share button, with “Add to Home Screen”, not from a browser prompt. The site works the same. For heavy sites, start by making the site lighter: a slow PWA is still slow.
|
|
Want to know whether your site is ready to be installed? Open a ticket with the address and what Chrome showed.
Open a support ticket
|
RECOMMENDED PRODUCT Web hosting with cPanel Domain and SSL included, daily backups and the panel you already know. from $5.36/mo (3-year plan, with coupon) See plans |
Português
English
