ios-pwa-wrap

⚠️ Take a look at PWABuilder first ⚠️

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

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

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 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

Example web app you can find here

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

khmyznikov / ios-pwa-wrap Goto Github PK

ios-pwa-wrap's Introduction