maskable | Create and preview maskable icons in the browser | Icon library

I am building a vue 3 ts project. Running vite no problem, when build vite build --debug the project get error.

The error message show like this .

This question will need someone from vercel team or sveltekit team as it is related to pwa app that I published to vercel: 1- I placed a minifest1.js file in the "static" folder 2- I placed testserviceworker.js file in the "SRC" folder.

When I run my app locally using my laptop by "npm run build" and "npm run preview", vite registers my serviceworker, my cache is populated and the app is installable as pwa.

When I deploy the same code to vercel, vite fails to register the serviceworker. To experiment I added the serviceworker file to the static folder and added a register button in index.svelte to register the file manully when I press the button.

When I press the button, the serviceworker is registered, I'm able to verify it in dev tools, application tab, cache and able to install my app but my lighthouse report showing pwa part as failed.

So my question is regarding vite registering serviceworker by default upon starting the site. Do I need to add a function in load or onMount with "navigator.serviceWorker.register('testserviceworker.js" or there is some kind of magic configuration in vercel or svelte.config.js to point vite to where the serviceworker.js so it register it upon starting the app?

I added the files for manifest and serviceworker here but I don't think they're relative to my question as it is a configuration issue not code issue:

manifest file:

I'm trying to make an installable PWA with Angular.

Following the docs, I ran ng add @angular/pwa to make my app a PWA. It worked fine. Then I built it with ng build and served the build using http-server.

The service worker seems to be working fine, it caches assets, keeps working when I disable the internet, etc.

However, at this point I expected it to ask if the user wants to install the app, but it doesn't. I checked the MDN guide and the app seems to meet all the requirements. On the other hand, this web.dev page says one of the install criteria to be met is to meet a given user engagement heuristic.

So I have no idea for which reason the install hint is not showing, it can be anything between:

• Messed up installation
• I'm testing it from a desktop browser, on http://localhost
• I have to meet the engagement criteria

In case it helps, here are some of the related files:

manifest.webmanifest

We are trying to host a PWA nuxt and the service worker will register on localhost:3000 only using

I've got an asp.net Application that uses an manifest.json to be "installed" localy on android devices.

In this manifest I've added: "display":"standalone and "orientation": "landscape"

But it is still rotating 180° if I flip the phone upside down, even if "Screen rotation" is turned off on all these decises. The Problem is, that Those devices have a scanner on top that is used to scann barcodes. So if you flip the phone upside down to scan something the whole webpage turns around and you can't read it anymore when you flip it back up. you eighter have to hold is straight up again, or "shake" it a bit to get it flipping back again.

Edit 20211110: It's a Website, that is running on our local IIS. The Web-page uses a MANIFEST.JSON so that chrome, Firefox and safari promt the user to "install" the Website. This creates a Shortcut on the Main Launcher that opens the website like an Android App. (It's like Twitter, when you brose their website on your andorid Phone it promts you to install the app, but in reality it only creates a shotcut to the website)

I'm trying to use imagemagick to generate PNG images from an SVG for use in a PWA. I'm having trouble working out which image is used when by the PWA. To debug this I'd like to annotate each generated PNG image with an index so I can tell which image the PWA uses in several different scenarios.

Below is an example of the command I'm using to create a 128x128 maskable PNG (10% margin) with white background from a source SVG.

I'm using angular to make PWA app.

• Angular: 12

What is going on is:

• I go to my app (online mode) -> The web app can display properly
• Turn on developer console and change connectivity to OFFLINE
• Press F5 to reload the application

What happens:

• The below image is what it displays on the screen when I hit reload:

This is my ngsw-config.json

I'm trying to use workbox-webpack-plugin.InjectManifest and all the examples I find look something like the code below, but I can't find an example of what src/sw.js is supposed to look like. I tried searching for example's of service worker files and feel like I might be starting a goose chase learning way more about service workers that I need to without actually getting an example. All I'm trying to do is include my manifest settings with my service worker. I thought I would be able to do this, considering the name of the function is called InjectManifest

This question may seem quite essential. However, I could not find an answer in any of the official Progressive Web Application (PWA) documentation.

The manifest.json of my PWA contains quite a bit of icons and even a fairly large screenshot.png that are not essential to the core of the PWA.