alexandercerutti / passkit-generator

The easiest way to generate custom Apple Wallet passes in Node.js
MIT License
897 stars 109 forks source link

When opening .pkpasses in Chrome iOS, there is no option to open it in wallet. #124

Closed ya-ya-it closed 1 year ago

ya-ya-it commented 1 year ago

Running OS

MacOS 13.1

Running Node Version

node v19.1.0 Chrome iOS v109.0.5414.83 iOS v16.2

Description

Hello Alexander!

Thank you for the plugin. It works amazingly and is very helpful! I'm running into an issue with opening .pkpasses file in Chrome iOS. When I'm clicking on download it doesn't show the "Add to Apple Wallet" option. Everything works fine in Safari. Maybe you can help me as I wasn't able to find any solution yet!

Expected behavior

When downloading .pkpasses, the "Add to Apple Wallet" option should be visible among other options in the menu.

Here is my code. As I mentioned, it works perfectly fine in Safari iOS and Desktop Chrome/Safari.

` const { wwdr, signerCert, signerKey, signerKeyPassphrase } = await getCertificates();

    let passBundle = [];

    for (const ticket in products) {
        const pass = await PKPass.from(
            {
                model: path.resolve('public/Event.pass'),
                certificates: {
                    wwdr,
                    signerCert,
                    signerKey,
                    signerKeyPassphrase,
                },
            },
            {
                description: 'Wallet pass for the ' + event.title + ' event',
                serialNumber: products[ticket]._id.toString(),
                passTypeIdentifier: process.env.APPLE_PASS_TYPE_ID,
                teamIdentifier: process.env.APPLE_TEAM_ID,
                relevantDate: event.start_date,
            }
        );

        pass.setBarcodes(products[ticket]._id.toString());
        passBundle.push(pass);
    }

    const pkpassesBundle = await PKPass.pack(...passBundle);

    const stream = pkpassesBundle.getAsStream();
    res.setHeader('Content-Type', pkpassesBundle.mimeType);
    res.setHeader(
        'Content-Disposition',
        `attachment; filename=pass.pkpasses`
    );

    stream.pipe(res);`
alexandercerutti commented 1 year ago

Hey there @ya-ya-it! Thanks for using passkit-generator!

Said that Chrome on iOS is still Safari / Webkit underneath, I think that some features are still in charge of developers to be implemented. Others are Safari-only.

In particular, I guess that the app should show the PKAddPassesViewController, but I don't know anything else.

Sadly I don't think there's a way you could fix this. Just to understand better, what "menu" are you talking about?

Let me know!

ya-ya-it commented 1 year ago

Thanks for your reply! Here is the example I’m talking about in chrome. In safari when I click on button to add ticket to Apple wallet it opens Wallet app immediately. Do you know, maybe, is it only .pkpasses bundle issue, or single .pkpass won’t work as well? 97CADD5B-A6B3-4250-8A59-B904236F48E9

alexandercerutti commented 1 year ago

I think it is an issue of the pkpasses file, because they get served with a different mimetype, which is not recognized. I cannot test right now, but if you want, you can try to generate just one .pkpass and see if you can open it through Chrome.

If I remember correctly, WWDC video presenting Pkpasses was stating the support was only in Safari. I don't have the link on hand right now.

Also, I tried again: if I open a .pkpass with Telegram (I opened a saved one), it gets opened successfully. So I think that:

A) there's a private API for .pkpasses that onky Safari has B) the "public" ViewController for passes still does not implement support for then publicly C) there's or there will be a different API that apps have to use.

ya-ya-it commented 1 year ago

Thank you for the update! and great support I will try the single file generation, but for now, I'll resolve this issue.

ya-ya-it commented 1 year ago

Just wanted to leave an update that the single .pkpass file is working in chrome, so it's the issue with the pass bundle only.

alexandercerutti commented 1 year ago

Good to know, thanks for your test and feedback 👍 Here is the video for pkpasses, minute 1:26 https://developer.apple.com/videos/play/wwdc2021/10092/

ingdaeho commented 1 year ago

@ya-ya-it have you found any solution?

4rsal commented 1 year ago

Thanks @alexandercerutti. This issue is, indeed, still ongoing with Chrome in iOS (v 114.0.5735.124)