Skip to content
/ ios-pwa-wrap Public template

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

License

Notifications You must be signed in to change notification settings

khmyznikov/ios-pwa-wrap

Repository files navigation

ios-pwa-wrap

This template is used in PWABuilder service, and you can get pre-generated customized project for your Web App from there.

Makes possible of publishing PWA to Apple Store (works in EU) 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 most things you can do in Safari (like Location, Media, Share, Pay, and other Web APIs) and more (like Push, Print, Download 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

For Apple M Silicon: (More options here)

# Uninstall the local cocoapods gem
sudo gem uninstall cocoapods
# Reinstall cocoapods via Homebrew
brew install cocoapods
  • Go to Repo folder and do in terminal pod install
  • Open file pwa-shell.xcworkspace
  • xcode should support iOS15+

Generate Firebase keys

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 webapp just for example. You should change this settings to yours.

  • WKAppBoundDomains in Info.plist
  • Settings.swift
  • URL Types at Info tab
  • Associated Domains at Signing & Capabilities
  • Adjust Capabilities at Signing & Capabilities (leave only required for your app)

JS Features

Push events and permissions

push component sample

Apple In-App Purchase

iap component sample

Print page, file download, alerts

common component sample

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