Create a manifest.json
A web app manifest file is a JSON file that determines how your app looks and behaves once installed on a user's desktop or mobile device. It contains metadata such as the name, description, icons, and color scheme of your web application.
Your files must include display property set to standalone and Schema property
You can use this simple example:
{
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
"name": "Your awesome web app",
"short_name": "Notification",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
You have to reference the manifest file on your web as below:
<link rel="manifest" href="manifest.json"/>
Web SDK integration
In order to perform the integration for Safari on iOS, it is necessary to implement Sdk integration and Safari Browser
User interaction
The user has to add or share your website from safari on your home screen:
Then the user can click on the icon from the home screen to open your website. The user has to accept the reception of push notifications so previously you need to prepare the permission message.
Permission notification
In order to perform the integration for Safari, it is necessary to implement a subscription button to request the permission to receive notifications.
It is important to ensure that users can easily find this button and they can subscribe to your web push notifications. The user has to click on this button before receiving the permission notification for web pushes.
Here's an example code:
<script>
var indigitallParams = {
appKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
workerPath: '/indigitall/worker.min.js'
};
function onIndigitallLoaded(){
indigitall.init(indigitallParams);
if(indigitall.isSafariPushNotificationSupported() && !localStorage.getItem('indigitall.repository.PUSH_TOKEN')){
var button = document.createElement("span");
button.innerHTML = `<div id="indigitall-button" onclick="indigitall.launchNotificationPermissionForSafari();document.getElementById('indigitall-button').remove();" style="position: fixed; bottom: 15px; left: 15px; z-index: 999; transition: .2s ease;">
<a style="display: block; border-radius: 50%; border: 1px solid #74d227; width: 50px; height: 50px; color: #fff; background: linear-gradient(to bottom,#89da3e 1%,#6dbf37 100%); text-align: center; vertical-align: middle; line-height: 60px; cursor: pointer; box-shadow: 0 0 3px #000; transition: .35s ease; transition-property: all; font-size: 20px; text-shadow: 0 0 2px rgba(0,0,0,.5); position: relative;">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#f5f5f5" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
</svg>
</a>
</div>`;
document.getElementsByTagName("body")[0].appendChild(button);
}
}
</script>
<script src="/indigitall/sdk.min.js" onload="onIndigitallLoaded()"></script>
App Key
Don't forget to replace the App Key with your project data.