ios-pwa-wrap

Makes possible of publishing PWA to Apple Store like TWA from Google. Supports work with push notifications from JS code, handle auth providers by redirect URL, handle external links, print page support, and loading animation. Firebase cloud messaging are used for Push Notifications.

Supports everything that can do Safari (like Location, Media, Share, Pay, and other Web APIs) and more (like Push, Print, and everything you added on top) with native callbacks.

This project has grown from the internal development of Hostme App.

The iOS part of PWA Builder project forked this repository as a template and it's should develop faster, so take a look at it first.

Gallery

Launch process	Native Push API request	MSAL Auth Redirect

Handle Push content in JS	MacOS support

Quick start

Install Pods references

Install CocoaPods to the system

Go to Repo folder and do in terminal pod install

Open file pwa-shell.xcworkspace

Generate Firebase keys

Go to https://console.firebase.google.com/

Create new project

Generate and download GoogleService-Info.plist

Copy it to /pwa-shell folder

Generate APNS key

Go to https://developer.apple.com/account

Under "Certificates, IDs & Profiles", click on "Keys"

Click "+"

Give your key a name, and enable "Apple Push Notifications service (APNs)"

Click continue, then register. Download the .p8 key file.

Upload the APNS key to firebase

Go to https://console.firebase.google.com/

Under your project, create an iOS app if you haven't already. Ensure the bundle ID is correct.

Go to the iOS app settings

Click on the "Cloud messaging" tab

Under "Apple app configuration", upload your APNS key.

Change to your website

This app was setup to my website just for example. You should change this settings to yours. Don't forget about WKAppBoundDomains in Info.plist

JS Features

Push permission request

if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers['push-permission-request']) {
  window.iOSPushCapability = true;
}
pushPermissionRequest = function(){
  if (window.iOSPushCapability)
    window.webkit.messageHandlers['push-permission-request'].postMessage('push-permission-request');
}
window.addEventListener('push-permission-request', (message) => {
  if (message && message.detail){
    switch (message.detail) {
      case 'granted':
        // permission granted
        break;
      default:
        // permission denied
        break;
    }
  }
});

Push permission state

pushPermissionState = function(){
  window.webkit.messageHandlers['push-permission-state'].postMessage('push-permission-state');
}
window.addEventListener('push-permission-state', (message) => {
  if (message && message.detail){
    switch (message.detail) {
      case 'notDetermined':
        // permission not asked
        break;
      case 'denied':
        // permission denied
        break;
      case 'authorized':
      case 'ephemeral':
      case 'provisional':
        // permission granted
        break;
      case 'unknown':
      default:
        // something wrong
        break;
    }
  }
});

Push notifications handle

window.addEventListener('push-notification', (message) => {
    if (message && message.detail) { 
        console.log(message.detail);
        if (message.detail.aps && message.detail.aps.alert)
            alert(`${message.detail.aps.alert.title} ${message.detail.aps.alert.body}`);
    }
});

Push topic subscribe

if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers['push-subscribe']) {
  window.iOSPushCapability = true;
}
mobilePushSubscribe = function(topic, eventValue, unsubscribe?) {
  if (window.iOSPushCapability) {
    window.webkit.messageHandlers['push-subscribe'].postMessage(JSON.stringify({
      topic: pushTopic, // topic name to subscribe/unsubscribe
      eventValue, // user object: name, email, id, etc.
      unsubscribe // true/false
    }));
  }
}

Print page dialog

if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.print) {
  window.iOSPrintCapability = true;
}
printView = function() {
  if (window.iOSPrintCapability)
    window.webkit.messageHandlers.print.postMessage('print');
  else
    window.print();
}

HTML Features

Viewport

don't forget to use viewport meta tag in your webapp

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, shrink-to-fit=no">

TO DO:

More ellegant solution for toolbar and statusbar

pietrobs / ios-pwa-wrap Goto Github PK

ios-pwa-wrap's Introduction