Develop Reference

'React-Native-Share' Library fails to compile on Web

I've been creating react-native app to share text or images to social platforms.
I've used React-Native-Share library to serve the purpose of my application.
This library is working fine for iOS & Android but when I'm running it on Web.
I'm facing compiling failed error (Syntax Error). It seems like React-Native-Web cannot parse the syntax used by this library.
As far as I researched on it. I think I need to setup webpack.config.js for this to work, but as I've never did this before so not sure how it works and how to set it up.
Please see the attached screenshot
Syntax Error
Thank you in advance :)

How do I use AVIF images in React Single page Web App

Final Update
For most practical purposes, this question is obsolete as both firefox and chrome have native support for avif through the standard picture html tag with a source marked as type="image/avif". See https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/ . Fire fox still likes to hang and often forces a control F5 to bypass caches and requires sending the correct content type from the server. Hopefully will be fixed soon.
Here is the commit where I got avif support working: https://github.com/quackack/quackack-comics/commit/f1a98ed1f40b6a22584d61bc338bd91df3232fa5#diff-e25b0950ce48f4e928f98e0a6fbb694c . Note that it contains many unrelated changes and in fact avif is barely mentioned, only as a content type and a file extension.
Original Question
I am trying to change a website where I host web comics from using jpegs to the newer avif image format. It is much smaller and seems to be the new image format with the most widespread support. Unfortunately, web browsers don't properly support the new format yet. So I was planning to use this package: https://github.com/Kagami/avif.js to allow my comics to be rendered. Some basic tests showed that AVIF would give the same quality as jpeg for less than half the space.
Unfortunately, after more than 5 hours of time spent on this, I am unable to get this to work with my react framework. You can see my website at the time of writing at 'https://github.com/quackack/quackack-comics/tree/cda4c3893d8477192c4ff3aa78d00096b7621ff7'.
I tried using npm install to install avif.js and then added
require("avif.js").register("/avif-sw.js");
to index.js . But I get error
Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/avif-sw.js’. Must be a JavaScript MIME type
And avif files are still not able to load. I think the requests are getting rerouted to index.html instead of the javascript package. It seems like the appropriate thing to do is something like
import * as avif from 'avif.js';
avif.register('avif.js/avif-sw.js');
But this fails too with the same error, as do many other similar variations.
At this point I am inclined to wait for proper browser support for avif, as I don't get enough traffic to worry about data costs anyway. If this could easily be fixed, then I would love to have the improvements from avif. I just want smaller file sizes and widespread browser support.
Update
Okay, I found that I could get this to work if I changed from the default react bundler (which I believe to be webpack) to Parcel. Then it does work exactly as you expect... until I try to deploy the project.
There is an issue where I cannot load the service worker when i try to deploy my single page webapp to AWS as a single page web app. There it makes a request to my url with avif-sw.js where there is not actually a js file. I believe the issue is closely related to https://github.com/parcel-bundler/parcel/issues/670
So the first key is to use Parcel to build your web app. But Parcel still does something wrong with deployment it seems. I will continue to investigate this in a few days.
Here is the almost working version using parcel: https://github.com/quackack/quackack-comics/tree/parcel
Update 2
My earlier update was incorrect. I only thought it was working because of a cached service worker. My final solution is in the answer below.

It doesn't seem to be a problem now. Simply convert your images to avif with tools like https://avif.io/ and use them as the image source or background source via typical CSS. As Chrome and Firefox now support it (even though users still have to enable it on Firefox), everything goes well. Even works on mobile now! :)

Okay, I finally got it working. Unfortunately, mobile devices don't seem to be able to handle the large file sizes so I had to keep using jpeg anyway. It worked on my laptop though.
Here is the commit that got everything to work: https://github.com/quackack/quackack-comics/commit/75e75307e688f0e515b4bbc9eb22eef290d2c209
What I had to do:
Switch to Parcel.
Copy the contents of the avif.js library into source before building. I used the command:
copyfiles -f node_modules/avif.js/*.js .
Put this specifically into reg.js:
require("avif.js").register("./avif-sw.js");
navigator.serviceWorker.register("./avif-sw.js", undefined);
What the last two steps do is trick parcel into actually keeping a copy of "avif-sw.js" around that can actually be loaded as a service worker. Probably with a bit more tinkering you can get this to work without using parcel at all, just by copying local and then registering. No requires required. But I stopped investigating after I found this solution can't work on mobile.
This was exceptionally hard to debug because service workers are cached by the browser and I had to clear broswer data after every edit. It was also hard to debug because the source files are cached to so I had to delete my projects cache and build frequently too.
You might also want to use npm module "http-server-spa", or similar, to test how your built SPA will act when deployed.

netbeans project doesn't start web server

I have 2 HTML5 projects.
One runs on http://localhost:8383 when I click on run.
The other runs on file:/// and (correctly) shows a "Cross origin request" error when loading a json file.
Both projects are relatively simple html+css+vanilla javascript projects.
I compared both projects carefully. Specifically, I compared the project properties. "Sources", "JavaScript" and "Run" appear to be identical. Both projects are set to "With Netbeans Connector", "Chrome", but I tested both with the embedded Webkit Browser as well.
Whatever I try, when I click on "Run", one projects starts as http://, as it should, the other insists to start as "file:///".
Does anyone have an idea where I should look?
EDIT:
Things I tried:
Triple-checking Run configuration settings
Restarting Netbeans
Starting one project first, then the other
Testing both projects with Chrome and the embedded Webkit browser
Thanks in advance.

I faced a similar issue and solved it. I created an HTML5 project using an Oracle JET template.
The issue is with the template which is being used while creating the project. Re-created the project by attaching a different template (older version of oracle jet library) and also created another without attaching any template and it works successfully.
It looks like some compatibility issue between netbeans and the attached template!

My solution was to create a new project and copy all source files over.
Now the play button calls the web service.

Copy entire website to iPad

I've created a website for a client's salesforce to use in hospitals, where they can't use wifi to access the internet as it can interfere with sensitive medical equipment. The website uses HTML, CSS and Javascript and does not require any form of server to work, which is fine when run locally on a laptop. However, they now want to use iPads and I've been trawling the Net for a simple solution in which I could copy the entire site to an iPad, while maintaining the site's directory structure, and then launch it locally with the browser. Nothing that I've found seems to be able to do this, although it seems such a ridiculously straightforward thing.
The best I've been able to do is to email the zipped site to my iPod, and then use the FileManager app to unzip and run the site in its own browser. It's useable but not great (every time you tap something you get an overlay at the top of the page) and there's no way I can find of adding a shortcut to the desktop - is there a better way of doing this?

You can look into something like React Native which allows you to write javascript HTML applications and deploy them as native iOS and Android applications. It shouldn't require too much work to move it over enough to just compile it and run it as you do currently.
https://facebook.github.io/react-native/

Cordova to package it in to an app https://cordova.apache.org/

Screen orientation information generated by Javascript won't display in Android emulator

I'm learning Android development using Pro Android Web Apps (Apress, Auths: Damon Oehlman & Sebastien Blanc). I ran into a snag in the second chapter (not a good sign if I'm having trouble already). I couldn't find any help from the Apress site on the book, so I'm hoping you guys can help me out here.
The chapter has me build an html, css, and js file that are supposed to detect and display the orientation of the device as the user rotates it (rotates the device, that is :) ).
When I run the code in an Android emulator running on my local WAMP server, the page displays ok (I don't think the css is quite right, but that's no big deal), but the data regarding the orientation isn't being displayed at all. I made sure the link to the js file is correct, and I've even downloaded all three files from the Apress site to see if it's something in my code, but those won't work either. The book's code is written for v2.1.
I have posted the code for the three files here. Since I'm working through the book using a local WAMP server, I don't really know how to make it easier for someone to take the files and test them his/herself. Sorry.
I really hope someone can take a look at the code and help me out. I'd really appreciate it, so I can continue on working through the book!
Thanks!
[Edit]
I just figured out how to change the orientation in the emulator and the display does rotate, but again, the output that the js is supposed to generate isn't displaying after the bulleted items.

I can't help too much but recommend that you use an actual device for things like this. If you still wish to use the emulator, make sure you choose Android 2.1 for the OS. You can also debug using the equivalent of System.out.println by using Log.d("tagname","line to be displayed"); which will display lines onto DDMS (which if you're using Eclipse can be seen by selecting Window -> View Perspective -> Other -> DDMS which will really help you debug this problem more!