/ios-pwa-wrap

Makes possible of publishing PWA to Apple Store like TWA from Google.

Primary LanguageSwiftThe UnlicenseUnlicense

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
Launch process Native Push API request Auth Redirect Example
Handle Push content in JS MacOS support
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

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