pwas | Proteome-Wide Association Study

The problem is the capture attribute.

According to MDN:

capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.

Also, the value of the accept attribute seems to be wrong (according to MDN). If it doesn't work try accept="image/*" instead.

As I know, C# Razor Framework is a Server Rendering framework(SSR), so in any request from browser to server, html is returned. This feature is the opposite of PWA (Client side rendering (CSR)), in which just the first request from browser to server returns html. Consecutive request are performed to the related rest-api or microservice which returns only json

So, in Razor, if you manage to avoid html creation at server layer (which is the core of server rendering frameworks) and perform the forms creation and other UI tasks with pure javascript (like react, angular, vue, etc) instead Razor features, you could convert it to a pwa, adding the classic manifest, service-worker and other required files for a basic pwa application.

If you choose that, you could ask this to your self: Why I'm using a backend (c#) framework just to generate a minimal index.html instead of using the powerful Razor features?

Maybe it is time to move from classic web server frameworks which use server languages (c#, java, python, ruby, etc) to latest javascript frameworks like : react, angular, vue, aurelia, linkstart, etc

Check this resources:

• Server Rendering vs Client side Rendering

A quick and dirty way to do this would be a simple regex to grab the config portion of your string and load() it into Json.

Do web notifications work for PWAs in the background?

Yes, they work in background, even when the website is closed, thanks to service workers.

When a push signal is received, the service worker is activated and a JavaScript callback is invoked.

are web notifications a good enough substitute for push notifications

Web notifications, together with the W3C Push API, that delivers the messages in background, are real push notifications, that can be delivered even when a website is closed.

is it that Web notifications cannot be triggered by a server and thus push notifications are still necessary?

Yes, web push notifications can be triggered in background, from your server, using the Push API and WebPush protocol.

does it mean that they work if the iPhone user is using Chrome?

Currently (Q1 2021), iPhone doesn't support web push on any browser.

• For the first exception:-

  Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed

You get this exception when any files which you have mentioned in your cache list return a 404 response. So make sure the all the resources are giving 200.

• For the 2nd error:-

  start_url does not respond with a 200 when offlineThe start_url did respond.

In your case as files are not getting cached(due to first exception) you are getting this error and also make sure to cache root index file in your cache list.

Try adding ignoreURLParametersMatching: [/^source$/] to your workbox-config.js. This will tell workbox-precaching that the ?source=pwa query parameter can be ignored when looking for a matching URL in the cache.

By default, anything starting with utm_ or the parameter fbclid is ignored, so if you wanted, another approach would be to change your start_url to something like /?utm_source=pwa.

Here's a few use cases that can help illustrate the difference. Also keep in mind that as of Feb. 2021, the Background Sync is only available in Chrome and Chromium-based browsers, and Periodic Background Sync is only available in Chrome after a progressive web app has been installed.

The use case is retrying a failed update/upload operation (usually a POST or a PUT) "in the background" at a regular interval, until it succeeds. You could imagine, for instance, trying to upload a new photo to a social media site, but your network connection is down. As a user, you'd want that upload retried at some point in the future.

The API only provides the mechanism for triggering an opportunity to re-attempt the network operation, via a sync event in the web app's service worker. It's up to a developer to store information about the failed request (usually in IndexedDB) and actually resend it, and indicate whether the sync was successful or if it failed again.

(The workbox-background-sync library can help with the implementation details, if you'd rather not deal with everything yourself.)

The use case is refreshing caches "in the background" so that the next time a user opens your web app, the data is fresher than it otherwise would be. You could imagine an installed news progressive web app using periodic background sync to update its cache of top headlines each morning.

Under the hood, this works by invoking a periodicsync event in your service worker, and inside that event handler, you'd normally make a GET request to update something stored in the Cache Storage API or IndexedDB.

Moving this from the comments to the answer section so that it's more visible:

What seems to work is to get the scope and start_url the same viz. scope = "/path1" and start_url = "/path1". I just tried it and seems to work and downloads both with different icons etc.

The scenario you describe—where a failed XHR originating from a page that's already loaded should trigger an "error page"—is probably best addressed via client-side code in the window context, rather than via service worker logic. I think that's more in keeping with how service workers are "meant" to be used, and would result in a better user experience.

The code to do this would look something like;