push-notificationnotificationsfirebase-cloud-messagingweb-hosting

Images are not shown in Notifications (FCM) on ios & android


What I want: Attach a static image to a notification. The image is already served statically on my webserver and can be opened in the browser. https://example.org/static/images/test_image.png

The problem I have: Even though the image is served on my Server, it is missing in the notification. If I try an image that is, for example, hosted by google, then it works.

What I tried: Serve an image that is working on my server and make sure that all headers are exactly how google sets them.

Ps: I actually solved this problem now and since it took me weeks to find the solutions for this, I figured that I post this Question so I can answer it for others to find


Solution

  • I finally fixed the issue!

    It was a certificate issues. How can this be, if everything worked in the browser? Browsers trust the Certificate that was used by the authority that signed my certificate. However, web crawlers do not trust this intermediate certificate!


    If you want to see if you have the same mistake I did , then go to:

    https://www.digicert.com/help/

    Now you can check the certificates of you site.

    If it shows something like:

    TLS Certificate is not trusted The certificate is not signed by a trusted authority (checking against Mozilla's root store). If you bought the certificate from a trusted authority, you probably just need to install one or more Intermediate certificates. Contact your certificate provider for assistance doing this for your server platform.

    Then you have the same issues that I had and it is easy to fix!


    It turns out that the issue was how I served my certificate. My certificate is issued by Let’s Encrypt and I need to also serve the R3 and X1 certificate that are used by Let’s Encrypt in the keychain of my certificate.


    The solution is to concatenate your certificate with the two certificates from Let’s Encrypt.

    Just paste the Let's Encrypt certificates below yours:

    -----BEGIN CERTIFICATE-----
    MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
    MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
    DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
    TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
    .........
    -----END CERTIFICATE-----
    -----BEGIN CERTIFICATE-----
    gIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADAACVSDFRFEHELELHELH/
    NpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMTMSQwIgYDVQQKExtEaWdpdGFsIF
    MB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1owDkRTVCBSb290IENBIFgz
    BAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2VhTzELMAkGA1UEBhMCVVMxKTAnBgNV
    .....
    -----END CERTIFICATE-----
    

    Good news! If you use certbot, then you do not have to do this at all! Simply use the fullchain.pem that is generated by certbot automatically.

    Just change the certificate in your nginx.conf:

    ssl_certificate       /etc/letsencrypt/live/your.domain.com/fullchain.pem;
    

    I really hope this helps someone!