wordpress-playground icon indicating copy to clipboard operation
wordpress-playground copied to clipboard

Reflect the current URL in the browser navigation bar

Open adamziel opened this issue 2 years ago • 2 comments

At the moment, the top URL bar only says index.html, and all the navigation happens inside of an iframe. It would be great to have a feature that would update the top-level navigation, perhaps via pushState. It needs to be optional because updating top-level navigation doesn't make sense in contexts like runnable code examples.

adamziel avatar Sep 21 '22 23:09 adamziel

It needs to be optional because updating top-level navigation doesn't make sense in contexts like runnable code examples.

Yes, that would definitely make sense only in the context of the npm run dev where you don't have any other way to change the URL. Actually, that was my primary issue – I wanted to navigate to a specific URL.

gziolo avatar Sep 22 '22 06:09 gziolo

I wanted to navigate to a specific URL.

This is now easy with wordpress-browser.html that has an address bar widget.

It could also work in a seamless mode via pushState(), but the service worker would have to be smart about page refreshes. At the moment, it would attempt to forward the request to WordPress, but it wouldn't find any instance. WordPress only lives as long as a tab with wordpress.html open.

The ServiceWorker would have to be smart about handling different types of requests:

  • Iframe-originating requests: forward to a running WordPress instance
  • Top-level requests: Create a new HTML page where a new WordPress instance would be started, use it to handle the original request

adamziel avatar Oct 17 '22 06:10 adamziel

It has been done in this commit:

https://github.com/bloqifi/wordpress-wasm/commit/352190cd69387f9ecf3a572ad3550153dbe2ec45#diff-92f163a9d50e1c25a44764089df3a996a8ce10e7315f7f9ebe5d89554d52e245

krishenriksen avatar Nov 05 '22 19:11 krishenriksen

@krishenriksen good explorations! One tough nut to crack there is handle page refreshing. I haven't actually tested that commit, but I noticed it doesn't alter the service worker code, which means that refreshing the page or sending someone the link will display an error page – see my previous comment in this issue. Do you have any ideas how to approach that?

adamziel avatar Nov 06 '22 07:11 adamziel

@adamziel I am looking into page refresh, but an obstacle we / I must overcome first, is storing the db in indexeddb, so any page refresh will maintain changes.

krishenriksen avatar Nov 06 '22 11:11 krishenriksen

@krishenriksen I’d say data persistence is a separate issue from refreshing the page after pushState. Definitely worth addressing, too! Using IDBFS instead of the currently used MEMFS could help with that one.

adamziel avatar Nov 06 '22 17:11 adamziel