Enable PWA support for iOS about kapowarr HOT 17 CLOSED

Requires adding a logo (favicon) first because that becomes the icon on your home screen.

from kapowarr.

Thanks @DaveAlton and @kleivadas for your help. I've added support for PWA. I tried it on my android phone via Chrome, and it worked very nice. I don't have an Apple device, so I can't test if the Apple HTML tags work, but I just copied exactly what I found online.

It was a bit more complicated to add than expected because of the base URL. The "start_url' and "src" for the icon require a URL, but the URL depends on the base URL. So I had to write some extra code that automatically edits the manifest.json file to change those keys appropriately when the base URL is changed or removed. I tested it and it should work just fine :)

Support for PWA will be included in the next release, which is expected to be in a few days.

from kapowarr.

Looks great!

from kapowarr.

Requires adding a logo (favicon) first because that becomes the icon on your home screen.

Maybe something like this?

from kapowarr.

Looks awesome!! Maybe replace BOOM with KAPOWARR? If that fits? If it's too long, maybe put it in the white circle or something. You're obviously better at this than I am😁

from kapowarr.

Looks awesome!! Maybe replace BOOM with KAPOWARR? If that fits? If it's too long, maybe put it in the white circle or something. You're obviously better at this than I am😁

Hell yeah! On it :)

from kapowarr.

You could even leave it out entirely like the other arr apps

from kapowarr.

Oh yeah that's true I think that's an even better idea

from kapowarr.

Oh yeah that's true I think that's an even better idea

Sounds good, I'll do that!

from kapowarr.

Bit of extra cleanup. Maybe like this!

from kapowarr.

Looks great! Can you send it as an SVG to [email protected]?

from kapowarr.

Looks great! Can you send it as an SVG to [email protected]?

Sent! :D

from kapowarr.

@DaveAlton It's not very clear to me what I have to do to achieve what you want. The link you gave doesn't work. When I open the web-ui in google on my phone, I can add it to my home screen just fine and open it.

I can't find any documentation on the html tags for this or anything. Seems like I have to include an html tag to say how I want to page to open (standalone, in the browser) but I can't find the actual name of the tag or any other related tag to PWA support.

Does anyone know any links where I can find what I need to achieve what you ask?

from kapowarr.

Unfortunately I don't know more. I'm not a web developer myself, and I couldn't seem to find any Apple documentation on how to open this.

On iOS, when you add a website to the Home Screen, it can do one of 2 things.

1. It opens in Safari. This isn't ideal because it's just another tab open there.

2. It opens the webpage like an app. This is great because users can use it like an app and you don't ever have a different tab open for each time you tapped the Home Screen icon.

Sonarr, Radarr, Prowlarr, and Readarr all do this. Have you incorporated the shared code from them? It may also save you some development time by using their shared code. I think each is a fork on Sonarr.

from kapowarr.

Yeah indeed the problem is that I can't find any documentation. But good idea to check out what Radarr and such have done.

from kapowarr.

from kapowarr.

hello when im developing react webapps, the code i see that is used is the following.

on index.html

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

and a manifest.json file

{
  "short_name": "short name of the app",
  "name": "name of the app",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

and just put the icon in the public folder. (favicon.ico, logo192.png, logo512.png)

that should do the job.

from kapowarr.