Next.js: next 9.5.2 Router not working on ionic webview

[Cow258]

Bug report

Describe the bug

When using v9.5.2 on ionic webview,
next/router not working at all,

• Router.push('/login')
• <Link href="/login">

No error message
No response to click

The ionic webview is using ionic://localhost/,
maybe v9.5.2 unable to working on ionic://localhost/.

To Reproduce

I hope the description enough to explain where are the problem,
It take time to create a demo repo,
I will create it if must.

Expected behavior

1. Universal links
   Using Router.push('/login') to redirect,
   Scan url QR code, auto open the app, then nothing happen.
   It should redirect.

2. Link tag
   Click on the <Link>, then nothing happen.
   It should redirect.

Screenshots

System information

• OS: iOS 13.6
• Browser Safari Ionic Webview 5.0
• Version of Next.js: 9.5.2
• Version of Node.js: 12.16.3

[timneutkens]

Feel free to investigate and fix / post back here with the investigation.

[Janpot]

probably because of https://github.com/vercel/next.js/blob/5dbe0d0215bb9a02ce9f71b1d152640ec897c18b/packages/next/next-server/lib/router/utils/parse-relative-url.ts#L26
you don't see any warnings in development?

[Cow258]

probably because of

https://github.com/vercel/next.js/blob/5dbe0d0215bb9a02ce9f71b1d152640ec897c18b/packages/next/next-server/lib/router/utils/parse-relative-url.ts#L26

you don't see any warnings in development?

I think you found the root of the problem. 👍🏻

Unfortunately,
Here are no way to run development mode on mobile side,
Required production static export for using ionic://localhost/ and run nextjs inside webview.

Maybe some way to export development static content,
then I can able to test it on mobile.

Also,
Development mode required using http://192.168.0.200 with same Wifi network to connect to dev server for remote debug on mobile side.

Also,
Device log and console log didn't show any error.

Thanks

[paulobarcelos]

Happy to see that this issue was reported, I found the same problem (and narrowed it down parse-relative-url.ts).

On my case this was completely broken our app (NWJS), since that is served with the chrome-extension:// protocol.

@timneutkens would it be possible to extend this function (parseRelativeUrl), with custom protocols? Or at least extend it with protocols like ionic:// and chrome-extension://?

I don't really know how to get around this - but the issue is serious, currently we can't ship any updates to our production app 👎

[Janpot]

The right solution is probably to also compare the protocol with window.location.protocol in parseRelativeUrl. i.e.

(protocol !== 'http:' && protocol !== 'https:' && protocol !== DUMMY_BASE.protocol)

This should detect a url with the same scheme as the page it is rendered on as relative. It makes sense because the fact that the browser you are using is rendering the app as a webpage implies that the browser is capable of handling the custom scheme.

Not quite sure how we can test this behavior though since the browsers that the next.js tests run on only handle the http and https scheme as webpages