Nativefier: WhatsApp Web stopped working around 2018-11-30 - Asks for Google Chrome ≥ 36

[prashant-shahi]

Description

WhatsApp Web was working so well until few days back. Now when the application is started, it says the following:

WhatsApp works with Google Chrome 36+
To use WhatsApp, update Chrome or use Mozilla Firefox, Safari, Microsoft Edge or Opera.

Update Google Chrome

Steps to reproduce issue

$ nativefier --name "WhatsApp Web" https://web.whatsapp.com
$ ./whatsapp-web-linux-x64/whatsapp-web

Details

• Are you nativefying a public website? Yes.
• Feature request? No.
• Full nativefier command used to build your app: nativefier --name "WhatsApp Web" https://web.whatsapp.com
• Version of Nativefier (run nativefier --version): v7.6.8
• Version of node.js (run node --version): v8.10.0
• OS: Ubuntu 18.04.1 LTS - Bionic
• Error message / stack trace (if any): None.

[ronjouch]

@coolboi567 just update Nativefier and re-package the app. Yes we know we should do a better job at communicating this to users, see https://github.com/jiahaog/nativefier/issues/556; contributions welcome.

[bitlab-code]

same issue with vers. 7.6.8
I think this issue need to be open

[ronjouch]

@bitlab-code Nativefier 7.6.8 ships with a default Electron version of 3.0.3, based on Chrome 66. Are you sure you did re-package your app with it, by re-running the nativefier command used to package it? If yes, then inside your nativefied app can you pop open the inspector (Ctrl/Cmd+Shift+I) and in the console type navigator.userAgent . What does it output?

[bitlab-code]

@ronjouch command + log

[ronjouch]

@bitlab-code thanks, your setup looks good indeed.

WhatsApp must be doing some kind of new userAgent sniffing / feature detection that results in blocking Nativefier. Patches welcome.

[lima-eduardo]

As a "workaround" you can go to 'edit > clear app data' and rescan the QR code.

[saulocastelo]

As a "workaround" you can go to 'edit > clear app data' and rescan the QR code.

Better "workaround"

Steps:

• Open DevTools (Ctrl+Shift+i)
• Application
• Service Workers
• Bypass for network
• Reload (Ctrl+r)
• Close DevTools

Or inject this code

if (document.body.innerText.replace(/\n/g, ' ').search(/whatsapp works with.*to use whatsapp.*update/i) === 0)
    navigator.serviceWorker.getRegistration().then(function (r) { r.unregister(); document.location.reload() });

[lipe1966]

sorry for the noob question.
Where should i Inject the above code?

[vip9]

"Bypass for network" works for me only once.

[shvchk]

@lipe1966 create file whatsapp-fix.js with inject code from @saulocastelo comment, then nativefier -n "WhatsApp" --inject whatsapp-fix.js "https://web.whatsapp.com"

[roccomuso]

I ran it clean using the container to build a new bin and worked. So what's going on exactly?
I had that error with Chrome 66. (does it apply only with old existing sessions?)

[Birkenstab]

It does not work for me, even with a new session. But if I open multiple instances of the app at the same time, one usually works.
With the fix saulocastelo it works all the time, as far as I can tell right now. Thanks @saulocastelo :)

[roccomuso]

I'm having the same issue on electron, but that @saulocastelo 's fix doesn't work. in the promise result r is undefined for me.

[eaorak]

As a "workaround" you can go to 'edit > clear app data' and rescan the QR code.

This only works once. @shvchk's solution worked for me.

[roccomuso]

Related: https://github.com/meetfranz/franz/issues/1185
Hopefully someone will find a stable fix

[lipe1966]

Found this snap that works perfectly https://snapcraft.io/whatsdesk

[FcoMarcosMAbreu]

Hello! I hope I can contribute with my suggestion. You could enable the right click and show the element inspector option, among others. Through the element inspector, the user can define a user agent supported by WhatsApp Web. I am looking forward to using Nativefier. Success to all!

[copyme]

@lipe1966 create file whatsapp-fix.js with inject code from @saulocastelo comment, then nativefier -n "WhatsApp" --inject whatsapp-fix.js "https://web.whatsapp.com"

This hack works for me. Thanks!

[FcoMarcosMAbreu]

@lipe1966 create file whatsapp-fix.js with inject code from @saulocastelo comment, then nativefier -n "WhatsApp" --inject whatsapp-fix.js "https://web.whatsapp.com"

Thank you very much! This works for me too.

[prashant-shahi]

Surprisingly for me, CTRL+SHIFT+I and after the DevTools appear CTRL+R is resolving the issue temporarily.

[DocBox12]

Hi everyone!

I decided to create "fix" for WhatsApp which will build the application correctly. This is a simple bash script, which download JS script and execute build app with nativefier including JS file. I know is it not resolved bug, but at least the application works correctly.

https://github.com/DocBox12/WhatsApp-nativefier-fix

[saulocastelo]

I'm having the same issue on electron, but that @saulocastelo 's fix doesn't work. in the promise result r is undefined for me.

Are you still facing this problem? Maybe I can help you, send me a message using Google Hangout or an E-mail with the details ([email protected])

[saulocastelo]

As a "workaround" you can go to 'edit > clear app data' and rescan the QR code.

This only works once. @shvchk's solution worked for me.

You have to activate on every session, that's the reason that i make the js code

[saulocastelo]

Hello! I hope I can contribute with my suggestion. You could enable the right click and show the element inspector option, among others. Through the element inspector, the user can define a user agent supported by WhatsApp Web. I am looking forward to using Nativefier. Success to all!

The nativefier has an option('-u') to set the useragent but didn't work

[bitlab-code]

I'm having this problem now (Electron), did you find her solution?

Occasionally it happens, When it happens I always resolve with this:

As a "workaround" you can go to 'edit > clear app data' and rescan the QR code.

[Jodanzuki]

@saulocastelo 's solution worked for quite some time, but as of yesterday, only Clearing App Data has been doing the trick. But I don't want to rescan the code everytime.

[roccomuso]

@Jodanzuki agree, stopped working again yesterday. Clean app required now. too bad.

[saulocastelo]

@saulocastelo 's solution worked for quite some time, but as of yesterday, only Clearing App Data has been doing the trick. But I don't want to rescan the code everytime.

I will see this problem again soon as possible and I will get back to you!

[saulocastelo]

@Jodanzuki agree, stopped working again yesterday. Clean app required now. too bad.

Please always add me to the conversation when this has any failure, will be easier for me to see your problem. 😉🖖🏻

[boban-dj]

Same here:
when using your whats-app-linux-64/whats-app executable it's possible to enter dev tools on chromium: ctrl+shift+I, then in Applications -> Bypass for network: check, ctrl+ r to reload then it works. But need to do it everytime when start.
Do you have solution?

[saulocastelo]

Heeeey guys whaaaaat are you waiting foooooor

if (document.body.innerText.replace(/\n/g, ' ').search(/whatsapp works with.*to use whatsapp.*update/i) !== -1) navigator.serviceWorker.getRegistration().then(function (r) { r.unregister(); document.location.reload() });

just replace === 0 to !== -1 and be happy!

[saulocastelo]

Hi everyone!

I decided to create "fix" for WhatsApp which will build the application correctly. This is a simple bash script, which download JS script and execute build app with nativefier including JS file. I know is it not resolved bug, but at least the application works correctly.

https://github.com/DocBox12/WhatsApp-nativefier-fix

@DocBox12 Check the pull request!

[DocBox12]

@saulocastelo I accepted pull request. Thanks!

[fabionogueira]

This is work for me:

mainWindow.webContents.on('dom-ready', function(e) {
        let script = `
            window.onunload = () => {

                navigator.serviceWorker.getRegistrations().then(
                    function(registrations) {
                        for(let registration of registrations) {
                            registration.unregister();
                        }
                    }
                )

            }
            `
        mainWindow.webContents.executeJavaScript(script)
    })

[saulocastelo]

This is work for me:

mainWindow.webContents.on('dom-ready', function(e) {
        let script = `
            window.onunload = () => {

                navigator.serviceWorker.getRegistrations().then(
                    function(registrations) {
                        for(let registration of registrations) {
                            registration.unregister();
                        }
                    }
                )

            }
            `
        mainWindow.webContents.executeJavaScript(script)
    })

This is a great way to do but will always remove the workers even if there's no need. But will avoid the reload on startup. Another issue could be if you need to kill the app (unresponsive) ... the window.unload will not be called and then you will have the problem again.

Tell me if you are able to solve this 2 questions. It's really better avoid the reload when start.

Thank's for sharing this. :)

[chriskyfung]

Did WhatsApp update again?
It keeps asking for Google Chrome 36+, no matter I refresh the page manually or programmingly.

[raulcraveiro]

Now It's asking for me again, to update for Chrome 49+. Tried a lot of fixes that I saw here but nothing works. :(

[MauricioGlz]

I have to second this, the issue is back, whatsapp is asking for something already has. No big deal having to do the developer tools stuff, but it's frustrating to do it every single time I open the app.

Now It's asking for me again, to update for Chrome 49+. Tried a lot of fixes that I saw here but nothing works. :(

[filipegarrett]

I can confirm also that the issue is back. Nativefier is up to date here.

[NikSWE]

Now It's asking for me again, to update for Chrome 49+. Tried a lot of fixes that I saw here but nothing works. :(

Facing the same issue here

[CrazyEasy]

I had the same issue again, since 2 weeks or so.

Hi everyone!

I decided to create "fix" for WhatsApp which will build the application correctly. This is a simple bash script, which download JS script and execute build app with nativefier including JS file. I know is it not resolved bug, but at least the application works correctly.

https://github.com/DocBox12/WhatsApp-nativefier-fix

This fix actually DID still work for me!

[filipegarrett]

I had the same issue again, since 2 weeks or so.

Hi everyone!
I decided to create "fix" for WhatsApp which will build the application correctly. This is a simple bash script, which download JS script and execute build app with nativefier including JS file. I know is it not resolved bug, but at least the application works correctly.
https://github.com/DocBox12/WhatsApp-nativefier-fix

This fix actually DID still work for me!

Worked here as well!

[NikSWE]

Now It's asking for me again, to update for Chrome 49+. Tried a lot of fixes that I saw here but nothing works. :(

Facing the same issue here

updated the electron version to 8.0.0 and its working fine for me

[ronjouch]

I just released Nativefier 8.0.2, which defaults to latest Electron 8.1.1. I don't use WhatsApp, can anyone test it and report if this issue is addressed, and if the fix at https://github.com/jiahaog/nativefier/issues/719#issuecomment-482736304 is still necessary.

[raulcraveiro]

I just released Nativefier 8.0.2, which defaults to latest Electron 8.1.1. I don't use WhatsApp, can anyone test it and report if this issue is addressed, and if the fix at #719 (comment) is still necessary.

I'm trying to install nativefier here and getting an error:

``npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] postinstall:cd app && yarn install --no-lockfile --no-progress --silent`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-03-15T22_51_32_660Z-debug.log```

[ronjouch]

I'm trying to install nativefier here and getting an error:

npm ERR! errno 1
npm ERR! [email protected] postinstall: `cd app && yarn install --no-lockfile --no-progress --silent`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-03-15T22_51_32_660Z-debug.log`

@raulcraveiro what does /root/.npm/_logs/2020-03-15T22_51_32_660Z-debug.log say? What happens if you manually do the postinstall: going in your global lib/node_modules/nativefier folder, then running cd app && yarn install --no-lockfile --no-progress --silent.

Installation works for me, but as user in a user-writable npm_config_prefix, not as root:

~ npm i -g nativefier
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
/home/ronj/.node_modules/bin/nativefier -> /home/ronj/.node_modules/lib/node_modules/nativefier/lib/cli.js

> [email protected] postinstall /home/ronj/.node_modules/lib/node_modules/nativefier/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

> [email protected] postinstall /home/ronj/.node_modules/lib/node_modules/nativefier
> cd app && yarn install --no-lockfile --no-progress --silent

+ [email protected]
added 288 packages from 332 contributors in 14.917s

[raulcraveiro]

This is the result of the debug.log: https://paste.ubuntu.com/p/Q5mZ28673x/

[ronjouch]

This is the result of the debug.log: paste.ubuntu.com/p/Q5mZ28673x

@raulcraveiro thanks. So,

8682 verbose lifecycle [email protected]~postinstall: unsafe-perm in lifecycle false
8683 verbose lifecycle [email protected]~postinstall: PATH: /usr/share/npm/node_modules/npm-lifecycle/node-gyp-bin:/usr/local/lib/node_modules/nativefier/node_modules/.bin:/usr/local/lib/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
8684 verbose lifecycle [email protected]~postinstall: CWD: /usr/local/lib/node_modules/nativefier
8685 silly lifecycle [email protected]~postinstall: Args: [ '-c',
8685 silly lifecycle   'cd app && yarn install --no-lockfile --no-progress --silent' ]
8686 silly lifecycle [email protected]~postinstall: Returned: code: 1  signal: null
8687 info lifecycle [email protected]~postinstall: Failed to exec postinstall script
8688 verbose unlock done using /root/.npm/_locks/staging-3a08f0df5026584d.lock for /usr/local/lib/node_modules/.staging
8689 verbose stack Error: [email protected] postinstall: `cd app && yarn install --no-lockfile --no-progress --silent`
8689 verbose stack Exit status 1
8689 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/index.js:283:16)
8689 verbose stack     at EventEmitter.emit (events.js:189:13)
8689 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
8689 verbose stack     at ChildProcess.emit (events.js:189:13)
8689 verbose stack     at maybeClose (internal/child_process.js:970:16)
8689 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)

At 8684 we're told we're in /usr/local/lib/node_modules/nativefier (as root, right? You ran sudo npm install -g nativefier, correct?). Then cd app && yarn install --no-lockfile --no-progress --silent errors and returns 1, which I don't understand as you're su and previous writes worked. Can you retry this manually?

cd /usr/local/lib/node_modules/nativefier/app
sudo yarn install --no-lockfile --no-progress --silent
# If `yarn` isn't installed globally, please run it wih its fully-qualified path,
# probably /usr/local/bin/yarn or node /usr/local/lib/node_modules/yarn/index.js

[raulcraveiro]

Yes, I ran with sudo.

When I try to cd to this path, It says that the directory doesn't exist D:

[ronjouch]

When I try to cd to this path, It says that the directory doesn't exist D:

@raulcraveiro what's the output of /usr/local/lib/node_modules/nativefier/ ?

EDIT I meant ls /usr/local/lib/node_modules/nativefier/ (I had forgotten ls)

[raulcraveiro]

@ronjouch

bash: /usr/local/lib/node_modules/nativefier/: Arquivo ou diretório inexistente

The directory doesn't exist

[ronjouch]

@raulcraveiro sorry, I meant ls /usr/local/lib/node_modules/nativefier/ . But wait, you say /usr/local/lib/node_modules/nativefier/ itself doesn't exist?! This is weird, as your logs say this is where nativefier got installed:

8684 verbose lifecycle [email protected]~postinstall: CWD: /usr/local/lib/node_modules/nativefier

Can you look around (use find or other filesystem search tools) and look where nativefier got installed?

[raulcraveiro]

@ronjouch The only file named nativefier is on /usr/bin, but there isn't any folder for nativefier.

[ronjouch]

The only file named nativefier is on /usr/bin, but there isn't any folder for nativefier.

@raulcraveiro where does /usr/bin/nativefier point to? Pls ls -la /usr/bin/nativefier

[raulcraveiro]

@ronjouch lrwxrwxrwx 1 root root 41 mar 15 20:19 /usr/bin/nativefier -> ../lib/node_modules/nativefier/lib/cli.js

[ronjouch]

@raulcraveiro so, the link is broken now, right? Resolving the relative symlink gets us /usr/lib/node_modules/nativefier/lib/cli.js, and we said /usr/lib/node_modules/nativefier doesn't exist.

Can you try uninstalling nativefier globally, then retrying? sudo npm uninstall -g nativefier && sudo npm install -g nativefier

[raulcraveiro]

@ronjouch I uninstalled and installed again and I got the same error, and the /usr/local/lib/node_modules/nativefier/ still doesn't exist :/

[ronjouch]

Okay, someone else reported the same at https://github.com/jiahaog/nativefier/issues/923 . Stopping the discussion here to stop polluting the WhatsApp issue, and continuing the discussion at https://github.com/jiahaog/nativefier/issues/923

[raulcraveiro]

@ronjouch Just tried to create the Whatsapp nativefier with the 8.0.4 without the inject code. On the first time that I opened, it worked ok. But If I close the app and open again, the problem continues. :/

[ronjouch]

@ronjouch Just tried to create the Whatsapp nativefier with the 8.0.4 without the inject code. On the first time that I opened, it worked ok. But If I close the app and open again, the problem continues. :/

@raulcraveiro hmmmmm, now we're back to a WhatsApp-specific issue, and here you're on your own, I don't use WhatsApp and don't wish to invest time debugging it. Maybe the serviceWorker-patching inject is still necessary. If not and if someone here finds out a generic change fixing the issue, patch welcome 🙂.

[alexkrass76]

I try to create Whatsapp using nativefier 8.0.4, the problem is the same, I used versions of Electron 8.1.1; 9.0.0-beta.9, used whatsapp-fix.js, no result, requires updating chrome

[alexkrass76]

As a "workaround" you can go to 'edit > clear app data' and rescan the QR code.

Better "workaround"

Steps:

• Open DevTools (Ctrl+Shift+i)
• Application
• Service Workers
• Bypass for network
• Reload (Ctrl+r)
• Close DevTools

Or inject this code

if (document.body.innerText.replace(/\n/g, ' ').search(/whatsapp works with.*to use whatsapp.*update/i) === 0)
  navigator.serviceWorker.getRegistration().then(function (r) { r.unregister(); document.location.reload() });

This method only works if you perform this action with every new start.

[alexkrass76]

I try to create Whatsapp using nativefier 8.0.4, the problem is the same, I used versions of Electron 8.1.1; 9.0.0-beta.9, used whatsapp-fix.js, no result, requires updating chrome

This problem disappeared after running nativefier with the --honest option
Nativefier 8.0.4 Ubuntu 18.04.4 amd64 kernel 5.3.0-050300-generic

[The-Compiler]

Note that the above check for the page's text is language-specific. An alternative which works in any language is checking for a link on that page instead:

if (document.querySelector("a[href='https://support.google.com/chrome/answer/95414']"))

[xavery]

The webapp doesn't work for me regardless of whether I use the extra injected code or not, i.e. it just shows the "update" screen after restarting. The console in developer tools shows this :

init.ts:206 Unable to load preload script: /home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js
(anonymous) @ init.ts:206
init.ts:207 Error: Cannot find module 'loglevel'
Require stack:
- /home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js
    at Module._resolveFilename (internal/modules/cjs/loader.js:798)
    at Function../lib/common/reset-search-paths.ts.Module._resolveFilename (reset-search-paths.ts:40)
    at Module._load (internal/modules/cjs/loader.js:691)
    at Module._load (electron/js2c/asar.js:717)
    at Function.Module._load (electron/js2c/asar.js:717)
    at Module.require (internal/modules/cjs/loader.js:853)
    at require (internal/modules/cjs/helpers.js:74)
    at Object.<anonymous> (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:21)
    at Object.<anonymous> (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:68)
    at Module._compile (internal/modules/cjs/loader.js:968)
(anonymous) @ init.ts:207
/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:46 Uncaught ReferenceError: Cannot access 'INJECT_JS_PATH' before initialization
    at injectScripts (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:46)
    at HTMLDocument.<anonymous> (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:16)

Could that even be a nativefier issue, or is something else seriously wrong?

[dospes]

The webapp doesn't work for me regardless of whether I use the extra injected code or not, i.e. it just shows the "update" screen after restarting. The console in developer tools shows this :

init.ts:206 Unable to load preload script: /home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js
(anonymous) @ init.ts:206
init.ts:207 Error: Cannot find module 'loglevel'
Require stack:
- /home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js
    at Module._resolveFilename (internal/modules/cjs/loader.js:798)
    at Function../lib/common/reset-search-paths.ts.Module._resolveFilename (reset-search-paths.ts:40)
    at Module._load (internal/modules/cjs/loader.js:691)
    at Module._load (electron/js2c/asar.js:717)
    at Function.Module._load (electron/js2c/asar.js:717)
    at Module.require (internal/modules/cjs/loader.js:853)
    at require (internal/modules/cjs/helpers.js:74)
    at Object.<anonymous> (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:21)
    at Object.<anonymous> (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:68)
    at Module._compile (internal/modules/cjs/loader.js:968)
(anonymous) @ init.ts:207
/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:46 Uncaught ReferenceError: Cannot access 'INJECT_JS_PATH' before initialization
    at injectScripts (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:46)
    at HTMLDocument.<anonymous> (/home/daniel/WhatsAppWeb-linux-x64/resources/app/lib/preload.js:16)

Could that even be a nativefier issue, or is something else seriously wrong?

Same problem for me, errors look about the same. The @saulocastelo workaround still works. Anyone have an idea how to fix the injections apparently not loading?

[raulcraveiro]

Note that the above check for the page's text is language-specific. An alternative which works in any language is checking for a link on that page instead:

if (document.querySelector("a[href='https://support.google.com/chrome/answer/95414']"))

This worked for me! Now, instead of reloading dozens of times, It just reloads one and then It work. <3

[aarestu]

function recheck () {
        if (document.querySelector("a[href='https://support.google.com/chrome/answer/95414']")) {
                console.log("reload");
                navigator.serviceWorker.getRegistration().then((registration) => {
                        registration.unregister();
                        document.location.reload();
                });
        }
        setTimeout(recheck, 5000); // callback

}
recheck();

this workaround worked for me

[je-vv]

@aarestu, where to place that code snippet so that it becomes a persistent workaround?

[aarestu]

@aarestu, where to place that code snippet so that it becomes a persistent workaround?

@je-vv just follow @shvchk instruction:

@lipe1966 create file whatsapp-fix.js with inject code from @saulocastelo comment, then nativefier -n "WhatsApp" --inject whatsapp-fix.js "https://web.whatsapp.com"

[renyhp]

Is there a way to inject the code without building the app again?

EDIT: Yes, there is. Simply insert @aarestu's code in resources/app/inject/inject.js.