vincent15000's avatar

PWA application and back button on the smartphone

Hello,

I have created a PWA application with Livewire 3 (previously with Livewire 2) and it works pretty fine.

The application is for sharing recipes with my friends. I can display the list of my recipes, I click on a recipe to display a recipe and I have a button to go back to the recipes list.

My son is used to use the back button of his smartphone instead of any back button in the view. By using the button of the smartphone instead of the button in the view, he gets back to the previous page, but it's then impossible to do anything on the application : the pagination doesn't work any more, impossible to click on the checkboxes, ... the application is simply broken.

I have thought about the possible problem and I think that the livewire scripts aren't loaded when I use the smartphone's button.

Well ... my question is : how is it possible to allow the users to use the smartphone's button to go back instead of the button in the view without breaking the application ?

Thanks for your help.

V

0 likes
4 replies
vincent15000's avatar

I have noticed that in fact it's not related to the PWA application and the error doesn't always occur immediately, sometimes it occurs only the second or third time I click on the back button.

And I get this error in the console.

Uncaught (in Promise)

This error is related to this code in livewire.js on line 574.

async function sendRequestToServer() {
    prepareCommitPayloads();
    await queueNewRequestAttemptsWhile(async () => {
      let [payload, handleSuccess, handleFailure] = compileCommitPayloads();
      let options = {
        method: "POST",
        body: JSON.stringify({
          _token: getCsrfToken(),
          components: payload
        }),
        headers: {
          "Content-type": "application/json",
          "X-Livewire": ""
        }
      };
      let succeedCallbacks = [];
      let failCallbacks = [];
      let respondCallbacks = [];
      let succeed = (fwd) => succeedCallbacks.forEach((i) => i(fwd));
      let fail = (fwd) => failCallbacks.forEach((i) => i(fwd));
      let respond = (fwd) => respondCallbacks.forEach((i) => i(fwd));
      let finishProfile = trigger("request.profile", options);
      trigger("request", {
        url: updateUri,
        options,
        payload: options.body,
        respond: (i) => respondCallbacks.push(i),
        succeed: (i) => succeedCallbacks.push(i),
        fail: (i) => failCallbacks.push(i)
      });
      let response = await fetch(updateUri, options);
      let mutableObject = {
        status: response.status,
        response
      };
      respond(mutableObject);
      response = mutableObject.response;
      let content = await response.text();
      if (!response.ok) {
        finishProfile({ content: "{}", failed: true });
        let preventDefault = false;
        handleFailure();
        fail({
          status: response.status,
          content,
          preventDefault: () => preventDefault = true
        });
        if (preventDefault)
          return;
        if (response.status === 419) {
          handlePageExpiry();
        }
        return showFailureModal(content);
      }
      if (response.redirected) {
        window.location.href = response.url;
      }
      if (contentIsFromDump(content)) {
        [dump, content] = splitDumpFromContent(content);
        showHtmlModal(dump);
        finishProfile({ content: "{}", failed: true });
      } else {
        finishProfile({ content, failed: false });
      }
      let { components: components2 } = JSON.parse(content);
      handleSuccess(components2);
      succeed({ status: response.status, json: JSON.parse(content) });
    });
  }

I don't know if it's a bug in the new Livewire version or if I only don't do something well.

vincent15000's avatar

I don't have solved this problem yet.

I have found this page in the Livewire documentation.

https://livewire.laravel.com/docs/navigate#script-evaluation

As wire:navigate only simulates a new page, but for Livewire it's always the same page, but with another content, it doesn't reload the scripts.

I don't have any scripts added to my pages, except to load TailwindCSS and the base app.js file.

What happens when I use the back button on the browser ? It does really go to the last page via the history stack. But it seems to not reload the page and then Livewire is not reloaded well.

I don't know if both wire:navigate and history can perturb each other.

And I think that the Livewire script isn't reloaded when using the back button of the browser.

What do you think about ?

Do you have any idea ?

sbakirov's avatar

I also encountered this and have not yet found an answer.

1 like

Please or to participate in this conversation.