#pwa #fullscreen #offlinemode #shortcut
Good news ! Yes it is possible 
I was able to get this done after two full days of monkeying around and jumping through the various hoops.
Not so good news, it’s not straight forward, quite a bit of coding and configuration involved. But it is well worth it. Who wouldn’t want an installable app with faster loading time, that works offline, fullscreen and can be invoked from their homescreen.
Here are the high level steps, at this moment I do not have the time or perks to write a detailed how-to. Will try to do it soon.
step1: manifest.json : WIX does not allow creation of files in the root directory, so use the custom code option to create a dynamic manifest. (search for “PWA dynamic manifest” to know more )
step 2: service worker: use http_functions to create a service worker
step 3: service worker registration: Can be done as part of step1 above, after creating the dynamic manifest, register the service worker in the same custom code snippet. Please note to add a scope while registering the service worker. This will ensure that the right resources are cached for offline mode & also the right url is loaded when launched as an app.
step 4: (Needed only if you want to tailor the “install app” experience to match your site’s overall look and feel) Use a custom element and register for ‘beforeinstallprompt’ eventlistener like so: window.addEventListener(‘beforeinstallprompt’)
Tested in Chrome ( windows and Android )
Hope this helps.
Here are a few screenshots of my mobile “app”
some reference links, that helped in getting this done:
7 Likes
I checked your website on pwabuilder.com and it shows there is no manifest file. You can explain thoroughly the step 1, because it will be useful for everyone and hopefully Wix can notice and make it officially available.
1 Like
This one should be moved to the EXAMPLES-SECTION!
1 Like
Here is my custom code snippet:
<html>
<head>
<meta charset="utf-8">
<title>wring</title>
<link rel="manifest" id="my-manifest-placeholder">
</head>
<body>
<!-- page content -->
</body>
</html>
but your site is not built on wix @prashanthbhaskaran
It shows an error while registering the service worker. How did you handle it?
ERROR
The path of the provided scope (‘/’) is not under the max scope allowed (‘/_functions/’). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.
EDIT:
Issue solved by adding ‘Service-Worker-Allowed’:‘/’ in Headers.
How do made it? Can you explaind in details about service worker, please?
Here’s the code I currently use to make service worker. You need a file named http-functions in backend
let ServiceWorkerjs = `importScripts(‘https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js’);
const filesToCache = [
‘/’
];
const staticCacheName = ‘pages-cache-v1’;
self.addEventListener(‘install’, event => {
console.log(‘Attempting to install service worker and cache static assets’);
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
}).catch(err => {console.log("Error while caching ",err)})
);
});
self.addEventListener(‘fetch’, event => {
//console.log('Fetch event for ', event.request.url);
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
//console.log('Found ‘, event.request.url, ’ in cache’);
return response;
}
//console.log('Network request for ', event.request.url);
return fetch(event.request)
// TODO 4 - Add fetched files to the cache
}).catch(error => {
// TODO 6 - Respond with custom offline page
})
);
});
`
export function get_ ServiceWorkerjs ( request ) {
let options = {
"headers" : {
"Content-Type" : "application/javascript" ,
'Service-Worker-Allowed':'/'
},
"body" : ServiceWorkerjs
};
**return** ok ( options );
}
Then register it using this code in tracking tools
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/_functions/ServiceWorkerjs', { scope: "/" })
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
}
I will soon write a detailed post on how to do it from start to end.. Making your Wix Site a PWA. Stay tuned!
Has anyone else implimented this? and if anyone has, is anyone using Wix-members? I think I’m having trouble with keeping people logged in because the PWA isn’t allowing for engage.wix.apps.net.
1 Like
Hey,
i saw your work and it did really help me to setup my service worker but i dont really understand how u succed to setup your manifest. On your screen we can see => “let manifest = …”. so if i understand u declared it on your http-functions.js but where do you call it and does it appear on the application tab so pwabuilder can acces it ?
thks for your help and hope u will see this message 
(sorry for my english i tried my best ^^ )
Hello, thanks to this post (Your wix site as an installable APP) for a long time I managed to make PWAs for several websites that I have done and users have already downloaded, something a bit simple for a web developer such as making a manifest and configuring the service worker… to achieve that Using wix was a bit too complicated, I had to use custom codes and some other integrations but it worked. Today I realize that all the PWAs that I have developed and delivered no longer have a manifest and the manifest is not detected in the google console. Wix no longer allows this type of configuration in the custom code to make PWAs with the new changes so strange that they have made with the wix studio?
1 Like
Finally, we can turn a Wix Site into a PWA: PWA | Wix App Market | Wix.com
