Make your site an app on the phone
A website can be added to the home screen and open full screen, even offline. No store needed.
A progressive web app (a PWA) is a website that can be installed on a phone's home screen. It opens full screen and can work without internet. There is no store and no review.
The four parts
Manifest
A small file with the app's name, colours and icons.
Icons
A 192 and a 512 pixel square icon, plus a maskable one.
Service worker
A script that saves your files so the app opens offline and loads faster.
HTTPS
Needed for install and offline. Vercel gives you HTTPS automatically.
Steps
- Add a manifest with name, short name, start address, display set to standalone, theme colour and the icons.
- Link it in the page head and add a theme colour tag.
- Add a service worker file and register it when the page loads.
- Put the site online (Vercel gives HTTPS).
- Open it on your phone. On iPhone use Share, then Add to Home Screen. On Android use the install prompt or the browser menu.
- Turn on airplane mode and open it again to check that offline works.
Ask your AI tool to do it
Turn this website into an installable PWA. Add a web app manifest with name, short name, standalone display, theme colour, and 192, 512 and maskable icons. Add a service worker that caches the app shell, uses network first for pages and falls back to the cached page when offline. Register it on load. Do not cache API calls or anything with a login. Tell me how to test install and offline on iPhone and Android.Honest limits
- On iPhone, push messages need iOS 16.4 or newer, and the app must be added to the Home Screen first.
- A PWA cannot do everything a store app can. Deeper phone features and store visibility need a real app.
- Test on a real phone. A computer browser does not show everything.
Now try it
Make a website in the Studio: pick a business, change the words and colours, and get your site.