• Resolved i0n1ca

    (@i0n1ca)


    Hello,

    First of all, I would like to thank you for your time to create this awesome, simple and effective plugin.

    Earlier this week Apple launched iOS 16.4 with Push API support in Safari Webkit (plus Notifications and Service Workers in Experimental section from Settings-Safari), which means that every iPhone and iPad that are running iOS 16.4/iPadOS 16.4 could receive notifications from Safari Web Service.

    I have just installed Perfecty on my wordpress, subscribed to it from my MacBook and it works perfectly, but I can’t subscribe from my iPhone.

    Is there anything to activate, modify in order to have Perfecty able to send notifications on iPhones and iPads?

    Many thanks,
    ionica

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • In my case, it worked immediately.

    There are a few important things to keep in mind:

    • web app manifest required (you can also use plugins)
    • Users must add your site to their Home Screen
    • Users must launch at least once from Home Screen to opt-in notifications

    More Info: https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/

    Thread Starter i0n1ca

    (@i0n1ca)

    My site https://www.isay.ro was saved to HomeScreen but is not working on my iPhone or iPad. Both have iOS 16.4. I think that is because of the manifest json file that probably does not exist. I will try to look on your mentioned links to see how can I create one.

    Thread Starter i0n1ca

    (@i0n1ca)

    I have managed to change the css and make the plugin work with new Apple Push API. Thanks.

    Hi @i0n1ca,

    Can you elaborate on the CSS changes you made? I think it will be helpful for people who are interested in this topic like me.

    Thanks!

    Thread Starter i0n1ca

    (@i0n1ca)

    Hi @zztalano1zz

    I have changed the box, buttons, shapes to fit my website, but it is really simple CSS tricks that can be made through Chrome Dev Tools.

    This is the /public/css/perfecty-push-public.css file. I have created a backup file with my code bellow and everytime the plugin will be updated I have to manually add this code again.

    
    text/x-generic css_backup ( ASCII text )
    /* Dialog control */
    
    .perfecty-push-dialog-container {
      position: fixed;
      top: 0;
      left: 5px;
      right: 0;
      display: none;
      z-index: 100000;
    }
    
    .perfecty-push-dialog-box {
      display: inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      width: 24em;
      background: white;
      padding: 2px;
      border-radius: 10px;
      box-shadow: 0px 7px 30px 0px grey;
      margin: 3px;
      text-align: center;
    }
    
    @media only screen and (max-width: 370px) {
      .perfecty-push-dialog-box {
    	width: 97%;
    	flex-wrap: nowrap;
    	
      }
    }
    
    @media only screen and (min-width: 370px) and (max-width: 430px) {
      .perfecty-push-dialog-box {
    	width: 97%;
    	flex-wrap: nowrap;
      }
    }
    
    .perfecty-push-dialog-box .perfecty-push-dialog-icon {
      width: 55px;
      margin: 15px;
    }
    
    .perfecty-push-dialog-container .perfecty-push-dialog-form .perfecty-push-dialog-title {
      margin-left: 18px;
    }
    
    .perfecty-push-dialog-container .perfecty-push-dialog-form button{
      margin: 5px 10px;
      font-size: 1em;
      -webkit-appearance: none;
      -moz-appearance: none;
      border: none;
      border-radius: 10px;
      color: #fff;
      cursor: pointer;
      font-weight: 600;
      letter-spacing: 0.0222em;
      line-height: 1.25;
      opacity: 1;
      padding: 0.2em 0.1em;
      text-align: center;
      text-decoration: none;
      transition: opacity 0.15s linear;
    }
    
    .perfecty-push-dialog-container .perfecty-push-dialog-form #perfecty-push-dialog-cancel {
      background-color: #ffffff;
      color: #ff3300;
      width: 50%;
    }
    
    .perfecty-push-dialog-container .perfecty-push-dialog-form #perfecty-push-dialog-subscribe {
      background-color: #3858f6;
      color: #ffffff;
      width: 50%;
    }
    
    /* Settings control */
    
    .perfecty-push-settings-container {
      z-index: 100000;
      display: none;
    }
    
    .perfecty-push-settings-container #perfecty-push-settings-form {
    display: none;
    border: 1px solid rgb(221, 221, 221);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    }
    
    .perfecty-push-settings-container #perfecty-push-settings-form label{
      display: inline;
    }
    
    .perfecty-push-settings-container {
      position: fixed;
      bottom: 10px;
      left: 10px;
    }
    
    .perfecty-push-settings-container #perfecty-push-settings-open {
      height: 56px;
      width: 56px;
      background-color: transparent;
      border: 0px;
      margin: 0px;
      padding: 0px;
      outline: 0px;
      box-sizing: border-box;
      box-shadow: none;
    }
    
    .perfecty-push-settings-container #perfecty-push-settings-open svg {
      color: #ffffff;
      padding: 16px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #f77924;
      transition: padding .1s ease-in-out;
      cursor: pointer;
      fill: #fff;
      outline: none;
      box-sizing: border-box;
    }
    
    .perfecty-push-settings-container #perfecty-push-settings-open svg:hover,
    .perfecty-push-settings-container #perfecty-push-settings-open svg:focus {
      padding: 12px;
    }

    Here are some pictures https://www.isay.ro/vrei-sa-primesti-notificari-push-pentru-isay-ro-atunci-cand-scriu-articole-noi/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Apple Push API in iOS 16.4. How to enable it for iPhone / iPad?’ is closed to new replies.