Have a back button

[romu70]

• [X ] I have read this document: https://miniflux.app/opinionated.html#feature-request

I’m a long time Miniflux user. Recently, I changed my way of using it on my phone, and use the « WPA way » (= having an icon to tap to directly get to my feeds).

In this mode, the browser contrôles are hidden, and more viewport space is available to show the content, which is nice. But as soon as you’ve begun to dig into the feeds (by taping a category or an individual link) there is no simple way to get back.

If the entry is pretty long, you’ve to go back to the top of the Miniflux page to find a way to get « back ». A quick proposal (may be needs more work) could be this:

<< Back             < Previous    Next >

[danilax86]

Hey, @romu70!

Do default phone controls work? «Go back» with a gesture or a system button tap?

[romu70]

Hey.

• No gesture working
• No system button available in WPA mode.

In this mode, the whole screen is available for the app.

[hksthff]

Same here. I'm new to Miniflux, but have the same issue like @romu70: I miss the "back"-button in WPA mode. :)

[fguillot]

In Miniflux's settings, you can change the PWA display mode to minimal instead of standalone. That should show a back button according to https://developer.mozilla.org/en-US/docs/Web/Manifest/display#minimal-ui

[hksthff]

That works. Everybody following this solution: you have to delete the PWA app from your screen and install it again to make changes come into effect.

[romu70]

Any way to update the Docker image with this settings?

[fguillot]

Any way to update the Docker image with this settings?

This option has been there for almost 4 years :)

Commit: https://github.com/miniflux/v2/commit/0d935a863ff4e53b98c23d2956fc5e8beac1853d

[romu70]

My bad, sorry. I thought it was an obscure settings hidden in an obscure file. Thanks @fguillot.

It doesn't change anything on iOS, but that may come from the far from perfect PWA support by Apple.

[fguillot]

It doesn't change anything on iOS, but that may come from the far from perfect PWA support by Apple.

You need to remove the icon from the home screen, and add it again to see the change.

[romu70]

Thanks (and sorry for the delay).

[sloria]

sorry to resurrect this, but I'm a soft +1 for adding a back button to the UI. iOS doesn't support display: minimal-ui and falls back to display: browser, which opens the app in Safari.

this is quite a usability impact for me, as i use Safari's private browsing. this puts me between two bad choices:

1. display-mode: minimal-ui -> app opens in Safari and I have to log in every time
2. display-mode: standalone -> no back button

so adding a back button to the UI would be a major improvement for your iOS users, though i totally understand if you don't want to add a workaround for what is a ultimately an issue caused by Apple.

[sloria]

i implemented a workaround using custom CSS and JS:

/* Style the back button like the pagination links */
.pagination button {
  background: none;
  border: none;
  color: var(--pagination-link-color);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.pagination button:hover {
  text-decoration: none;
}

.pagination button:focus {
  outline: 0;
  text-decoration: none;
  outline: 1px dotted #aaa;
}

.pagination-back::before {
  content: "« ";
}

/* Layout the pagination controls */
.pagination {
  display: flex;
  gap: 10px;
}

.pagination-backward,
.pagination-forward {
  display: flex;
  white-space: nowrap;
  gap: 8px;
}

.pagination-back {
  flex: 1;
  white-space: nowrap;
}

/* Reduce spacing between pagination links to make more room for "Back" */
.pagination > div.pagination-backward > div {
  padding-right: 5px;
}

.pagination > div.pagination-forward > div {
  padding-left: 5px;
}

JS:

/** Add "<< Back" buttons to the pagination containers **/
document.addEventListener('DOMContentLoaded', function() {
  const paginationContainers = document.querySelectorAll('.pagination');
  
  paginationContainers.forEach(container => {
    const backButtonDiv = document.createElement('div');
    backButtonDiv.className = 'pagination-back';
    
    const backButton = document.createElement('button');
    backButton.textContent = 'Back';
    backButton.type = 'button';
    backButton.className = 'back-button';
    const label = 'Go back to previous page';
    backButton.title = label;
    backButton.setAttribute('aria-label', label);
    
    backButton.addEventListener('click', () => {
      window.history.back();
    });
    
    backButtonDiv.appendChild(backButton);
    container.insertBefore(backButtonDiv, container.firstChild);
  });
});

Desktop screenshot:

Mobile screenshot:

but would love to see a cleaner solution added to miniflux proper