Service Worker with external links - javascript

I´ve got a project that have external URLs and internal URLs too. It´s build with React but the Service Worker seems to cache all internal links and that is ok, but when i want to go to the external URLs it doesn´t navigate to that links, not even when it´s working online.
Is there any way to do service worker functions with external URLs?
Thank you
Edit:
I found this on github made by GoogleChromeLabs that have the answer itself... Just have to install sw tools and use the options they give https://github.com/GoogleChromeLabs/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxroutergeturlpattern-handler-options

Related

404 error when accessing website with parameters (vuejs)

I am working on a website using VueJS and just figured out how to do url parameters, which works well on my local machine. I can navigate to a page, and copy the full link including parameters in my browser and the page loads the same way.
Example: I type localhost:8080 to load the index site, navigate to localhost:8080/param1/param2 to go to another site, everything works fine. I can even type in localhost:8080/param1/param2 DIRECTLY (without going to index page first) and it works too.
However, after a build and upload to my web hosting provider, I can not type in the url with parameters DIRECTLY, it only works when navigating from index page.
I can the following error:
404 Error
I have almost no experience with routing and web hosting and even after extensive research could not find a solution online. Any help would be greatly appreciated.
Additional information based on comments I've received:
Web host:
I have a login to Plesk where I can manage my settings. There I have "Apache & nginx" settings which look like this:
Apache Settings
nginx Settings
This is due to the fact that SPA's do not have different HTML pages for different URL's like conventional pages. So, you have to either redirect all the requests to the index.html page in the server settings or set the history property to this history: createWebHashHistory().
Let me know if this works.
P.S: Sorry I don't know how to configure the settings for this in Apache or Nginx

NextJS calling dynamic page on production redirects to root

What I want
User enters https://www.example.com/test, user gets content of NextJS dynamic route /test/index.js.
This works locally.
What happens
User enters https://www.example.com/test, user gets content of root page (index.js).
The browser still shows https://www.example.com/test but it's not the content of /test/index.js. This only appears on production.
Infos
Deploying to Firebase Hosting.
The root of the problem was, that I was exporting the NextJS application and using the output as source files for Firebase. The solution for my specific problem was, to set up Firebase functions to really enable serverside rendering instead of displaying served static files. This also solved my routing problem.
I found tutorials to be very misleading, once everyone uses different folder structures and ways to deploy the application.
If you are facing the same problem, feel free to check out my repository. It is a combination of the Firebase config, package.json and server file working together - taking in account different folder paths for exporting for development and production.
These resources were helpful to me:
Overall Tutorial: https://itnext.io/deploying-next-js-app-to-firebase-functions-eb473791d79e - This is missing some steps regarding function names.
Great for understanding what each file does: https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs
Nice for understanding ways of rendering: https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2
This made me understand how to use Firebase function names correctly: https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting

cordova/phonegap app - load js css and html from server

I'm developing an cordova app for Android which has a lot of logic (js) and design (html/css) same as my web application. I want to share these assets among web app and android app. Now I had compiled all these js and css in apk, but when some code is changed, I have to prepare an update and put in the play store. If it would be possible to load code and css from server after app started, it would reduce need for upgrading. Is there any way?
I'm considering loading shared resources via ajax and dynamically creating stylesheets and scripts in DOM, but maybe there is better approach, isn't it?
You could download the files from server every time, but i think that is not what you want because it would not be availibe offline at all and if the app it big and the connection bad it will take much time to download.
a better way is to download the files if they change. you can do that with FileTransfer.download() yourself or use a ready solution like the cordova-standalone-hydration
BUT your app will not be accepted by for example Apple because they deny an app with code they can not check
I found a plugin where you can update all your files in the WWW folder on startup or later.
Link: https://www.npmjs.com/package/cordova-plugin-dynamic-update

Cordova - Access device functionality from remote HTML

I have a Cordova application that waits for the deviceready event and, when that event fires, sets the window.location.href to a remote site, say, http://foo.bar.com/lander.html. From that page, I have several links to other pages - say page1.html and page2.html. I want to put a button in page1.html that calls Cordova's navigator.notification.vibrate function.
I have the above set up and everything appears to work, except that navigation.notification is undefined when I click the button in page1.html to try to get the device to vibrate. I have copied cordova.js onto foo.bar.com and am referencing it from page1.html. Do I have to include other javascript source files on foo.bar.com? Will this approach ever work?
Would it work if instead of changing the window location I were to get the content by AJAX and put the content in a div container in the index.html page that underlies the Cordova app?
This is all on iOS if that matters. I included the dialogs and vibration plugins only. I am receiving the deviceready event in the Cordova app and successfully redirecting to the remote site. Please let me know if there are other factors which I need to take into consideration. Thanks.
UPDATE 1: I got vibration working from the Cordova app's local index.html by using navigator.vibrate instead of navigator.notification.vibrate. Changing this on the remote site did not help. I also tried including copies of vibration.js, Cordova.js and cordova_plugins.js from the remote page - still no luck.
UPDATE 2: I found in the Cordova docs where what I'm asking about is discussed: Invoking Cordova JavaScript functions from a remotely-loaded HTML page (an HTML page not stored locally on the device) is an unsupported configuration. This is because Cordova was not designed for this, and the Apache Cordova community does no testing of this configuration. While it can work in some circumstances, it is not recommended nor supported. There are challenges with the same origin policy, keeping the JavaScript and native portions of Cordova synchronized at the same version (since they are coupled via private APIs which may change), the trustworthiness of remote content calling native local functions, and potential app store rejection.
The display of remotely-loaded HTML content in a webview should be done using Cordova's InAppBrowser. The InAppBrowser is designed so that JavaScript running there does not have access to the Cordova JavaScript APIs for the reasons listed above. Please refer to the Security Guide.
Based on this, it sounds possible but like we'd be out on our own. Still, if anybody is successfully doing this, we'd like to give it a try.
I thinhk what you are looking for is a push notification. There is a plugin for this.
http://ngcordova.com/docs/plugins/pushNotifications/
You need a task running on your app though.
Hope this is helpfull.

Cloudflare - PHP and Javascript Includes not Working

Since implementing Cloudflare some of my includes aren't working.
One specific example: Inside the includes folder, I have a sub folder "texter". Here I have a php page that references a Javascript library in the same folder. The page receives a GET request with variables, then parses on the parameters to an external 3rd party API.
When Cloudflare is disabled/paused the mini app works.
I'm using Page Rules to disable Cloudflare activity for my includes folder but it's still not working.
e.g. Pattern: *mysite.com/includes/* - With all rules and chache set to disabled.
How can I get my web app running while Cloudflare is also running? Am I on the right track? Thanks in advance.
Edit: I'm using htaccess to limit direct access to these directories... could this cause an issue?
Hmmm...this goes away with us paused? Do you have something like Rocket Loader turned on in your performance settings (can potentially impact jQuery or JavaScript).
Do any error messages appear at all?

Categories

Resources