workbox-broadcast-update does not work inside android webview

[heitorpr]

Library Affected: workbox-broadcast-update (v6.3.0)

Browser & Platform: Webview for Android

Issue Description: I have a PWA application that is also inside an android webview in my app, and the broadcast update plugin does not send the update event with the StaleWhileRevalidate strategy. The exactly same build of PWA app with react performs diferently inside the webview and directly on chrome (on Chrome it works just fine).

    navigator?.serviceWorker?.addEventListener('message', async event => {
      if (event.data.meta === 'workbox-broadcast-update') {

        /* eslint-disable */
        if (confirm(`New app update is available!. Click OK to refresh`)) {
          window.location.reload();
        }
      }
    });

I added just a confirm call to test and on chrome it is been called but inside the webview it is not called. The confirm is just an extra test, The usual was to update the views with the new data, that works on chrome browser too, but also not in webview

The code to register the route is this one:

registerRoute(
  ({ url }) => url.pathname.startsWith('/my-url/v1/something'),
  new StaleWhileRevalidate({
    plugins: [new BroadcastUpdatePlugin()]
  })

I don't know if there is an issue at all, or the webview part is bad configured perhaps? But the service-worker and offline caching working just fine, only the broadcast update is not performing well.

On android side is just a webview

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

        webview.settings.javaScriptEnabled = true
        webview.settings.domStorageEnabled = true
        webview.settings.setGeolocationEnabled(true)
        webview.settings.mediaPlaybackRequiresUserGesture = false
        webview.loadUrl(url)

[jeffposnick]

CC: @andreban, my colleague whom I normally turn to for questions related to Android & the web. He might have some idea as to what's going on.

[heitorpr]

Hello! updating the issue with the working example problem, these both are public repos in my account:

• pwa: https://github.com/heitorpr/react-cra-shell
• android: https://github.com/heitorpr/androidwebviewstaletest

PWA published in firebase hosting: https://react-cra-shell.web.app/

the api is updating the message bellow the button

"Practicality beats purity."

It is the zen api from github.

If you open the link you will see the workbox being stalling after that the request to zen api, if you quick again it will start to use the local cache instead of api response, when the response from backend changes the interface changes too to another message "O texto foi atualizado"

Unfortunatelly to test you will have to build the app locally, I should publish it on app-store testing, but it take some time...

Running it on webbroswer the broadcast update works just fine. But inside the app the text "O texto foi atualizado". Never appears, which indicates the webview is not receiving the workbox-broadcast-update event...

[andreban]

🇧🇷 Oi Heitor!

I can see the message when using the example PWA you shared using WebView implementation in this gist: https://gist.github.com/andreban/40b22d321e4fc2de3f05f7753b8cd927.

The sample is a bit more involved than the one you shared, as it implements onRenderProcessGone(), which enables the app to recover to a potential WebView crash and also ensures that external links are handled in the user's browser.

However, I think that what may be making the difference here is the call to webSettings.setDatabaseEnabled(true);. Can you try this one out in your Android sample?

[heitorpr]

Still not working for me, I even copyed the entire jist in a new activity and tried it 😢 . I'm trying to figure out why

[heitorpr]

Maybe a missing permission?

[andreban]

Maybe a missing permission?

The only permission added to the Android Manifest is:

<uses-permission android:name="android.permission.INTERNET"/>

I have added the full Android Manifest to the gist, just in case.

Can you share details on the device model / WebView version?