I have a "scoped" PWA application with a manifest.json file like:
{
...
"start_url": "/my-pwa/",
"scope": "/my-pwa/",
"display":"standalone"
...
}
When installed as PWA, it works as expected:
It opens all urls from scope inside the PWA window (eg: /my-pwa/sub-path1, /my-pwa/..., etc)
It opens non scoped urls in diferent browser window (eg: /other-path, /other-path2/..., etc)
When installed as TWA (created using bubblewrap, with the corresponding assetlinks.json), the problem appears:
It opens all urls from the domain inside the TWA window, even the non scoped urls (eg: /other-path) that should be opened in diferent window, like urls from other domains.
Is this a bug or is this the expected behavior? Do you know any workaround to force non scoped urls to open in diferent window?
Related
I am about to deploy a React app using react-router in our intranet. I am using Kestrel without a reverse proxy.
When I start browsing the site by typing https://myserver/, the page gets served and I can click links which take me to https://myserver/subpage, but subpage does not exist inside wwwroot, only react-router uses this to determine the contents to display. Now if the user presses the browser's reload button, a 404 is returned.
Should I configure Kestrel to serve index.html in case the requested resource is not found? If so, yes? Or is there a more elegant solution?
In my webpack config I have the publicPath set like so:
publicPath: '/js'
This way it points to public/js. Also in my index.pug file, which is loaded by the server and not in the public folder I have this:
extends layout
block content
main#app
script(src="/js/bundle.js")
Unfortunately, this enables people accessing my site to visit example.com/js/bundle.js. Is there a way to prevent this?
If /js/bundle.js is a script file you are using in your web page, then there is NO way to prevent the browser from going directly to http://example.com/js/bundle.js. That's the exact URL that the browser uses to load the script from your web page so that URL has to work.
ALL Javascript that runs in your web page is openly available to the public. You cannot change that. That's the architecture of the web and browsers.
Unfortunately, this enables people accessing my site to visit example.com/js/bundle.js. Is there a way to prevent this?
No. You cannot prevent it.
I want remove hashtag(#) from urls, but also i need to save no-reload mode. Can i do that?
I have: page.com/#/home
I want: page.com/home
I tried mode: 'history', but page reloads with it.
UPD: Is it possible to create SPA app without page reloading and with normal URLs?
When activating the history mode, you need to first configure your server according to the documentation. The reason for that is, that the history mode just changes the URL of the current page. When the user actually reloads the page, he'll get a 404 error, because the requested URL is not actually there. Reconfiguring the server to serve always the main index.html of your SPA resolves this issue.
When using a # in the URL (no history mode), the browser tries to navigate to the element with the ID, which was given after the # (within the same document). This was the original behavior of the fragment identifier. Therefore, if you add a link to your HTML with such a fragment identifier, the browser won't reload the page but actually look for the ID inside the document. The vue-router watches this change and routes you to the correct route. This is the reason it works with hashes. If you just add a regular URL to the HTML, the browser's native behavior is to actually navigate to this page (hard-link). This leads to your experienced reload effect.
The way to handle this, is, to never use regular links to route within a Vue Single-Page-Application. Use the tag <router-link> for routing between one page and another (but only within the SPA). This is the way to go, no matter if the browser allows the navigation with # without reloading or not. Here is the documentation for the recommended routing tag: link
You can also route from one route to another programmatically. Use $router.push() for that. Here is the documentation for that: link
We have a CMS that powers over 2000 school websites. The admin sites for each of those websites are all under the same root domain, e.g. *.myadmin.com. We are working on integrating OneDrive File Picker on multiple pages in all of those admin sites.
We have an issue with the Redirect URLs in the API Settings. We tried to set the Root domain field to myadmin.com by setting Redirect URLs: to https://myadmin.com. In JavaScript, we initialize the File Picker like this:
WL.init({
client_id: window.OneDrive.clientId,
redirect_uri: ''
});
WL.fileDialog({
mode: "open",
select: "single"
});
That results in a popup window saying:
We're unable to complete your request. Microsoft account is experiencing technical problems. Please try again later.
In the address bar of the popup window, there's a further error description(url decoded):
error_description=The provided value for the input parameter 'redirect_uri' is not valid. The expected value is 'https://login.live.com/oauth20_desktop.srf' or a URL which matches the redirect URI registered for this client application.
Putting a specific url, like https://subdomain.myadmin.com/homepage, in the API Setting would make the Picker work on that specific page, but not on other pages. Looks like it's looking for an exact match. Obviously it's not practical for us to create a separate app for each page that uses OneDrive.
The problem can be solved by disabling Enhanced redirection security on the API Settings page. That option existed a few weeks ago when we created an app for development, but was marked as deprecated. Today when we created a new app for production, it wasn't there anymore, which I think is now enabled for all new apps.
We had a similar issue with Dropbox Drop-ins Chooser, but we were able to solve the problem by setting myadmin.com as the domain of the app.
Is there any work around for this problem?
Thanks for your help and suggestions.
The only way I could get this to work was
Make sure the exact single web page on a single domain is configured and working for one drive (the url running OneDrive needs to be correctly configured in Microsoft account Developer Center
Then use this page inside an iframe (even if it is a completely different domain)
then use postMessage to pass the data back to the parent iframe to utilise
a working copy (link may be removed at any time )
Testing OneDrive in an iframe
Other pertinent urls
browser support for postMessage
Browser support for postMessage on stackoverflow
postMessage documentation
Some example usage of postMessage
example usage of postMessage
another example of use of postMessage
You can add multiple Redirect URLs as long as all of them are in the same subdomain. Each redirection URL needs to be specified explicitly:
The bug with the Microsoft developer console mention is resolved if you put the root domain you want first, then the 2 sub domains.
Add 3 entires:
1. domain.com
2. sub1.domain.com
3. sub2.domain.com
I have an application that loads a web page in the browser and saves it to custom local folder (images, html, css). In the process the "src" attribute of images (in html) and "background-url" property (in css) need to be changed to reflect the locally saved files rather than the original ones. This generates extra web traffic as changing them forces the browser to download the files from modified locations (the browser does this by resolving the uri of the page with the value of element's "src" attribute - the same for "background-url" property ) and as a result, it generates lots of 404 Not Found requests.
I'm using nsIIOService interface to go offline before saving the page (the page is fully loaded and all network activity so far has been stopped) and then back online after the saving is complete. But then the browser displays an alert box "This document cannot be displayed while offline. To go online, uncheck Work Offline from the File menu." whenever I try to change the aforementioned attributes/properties.
Is there any way to prevent such message from appearing or to make the browser not validate the images because of modified "src" values?
I tried to use DOMWillOpenModalDialog on both the browser and the xul application window, but it seems it's of no use - the dialog still appears. The application is not an user application, so it's difficult when such "built-in" messages appear.
Use preventDefault to stop the modal dialog:
document.getElementById(‘content’).contentWindow.addEventListener(‘DOMWillOpenModalDialog’,function(e){ e.preventDefault(); }, true);
As an alternative, try using disablePrivilege, sandbox, redefining the prompt service, or overriding window.alert.