Giter VIP home page Giter VIP logo

xtools-at / ios-pwa-wrapper Goto Github PK

View Code? Open in Web Editor NEW
328.0 18.0 93.0 867 KB

An iOS Wrapper application to create a native iOS App from an offline-capable Progressive Web App.

Home Page: https://www.leasingrechnen.at

License: GNU General Public License v3.0

Swift 100.00%
ios ios-swift wrapper ios-pwa-wrapper ios-wrapper offline offline-first offline-capable pwa progressive-web-app

ios-pwa-wrapper's Introduction

iOS-PWA-Wrapper

An iOS Wrapper application to create a native iOS App from an offline-capable Progressive Web App.

Drafted for the iOS App of my Leasing Calculator Web App using React, Redux, Materialize.css and a lot of Offline-First love over at leasingrechnen.at.

Looking for Android or Desktop?

Check out my other projects:

Prequisites

For bringing offline-capabilities to your Web App on Safari and iOS' embedded WebKit browser, you have to use AppCache. Service Worker API is not yet supported in WebKit, so you might want to use something like Appcache Webpack Plugin to make your PWA offline-accessible on iOS in a somewhat easy way.

Why would I use a wrapper?

I know, using a Wrapper-App to display a Website can feel a bit odd. But there are a few good reasons why you'd package your Web App like this.

  • If you've got a very sophisticated UI already, it might make sense not to rebuild it from scratch for multiple platforms, especally if it's a Single Page Application already, that doesn't "feel" like a Website.
  • There might be as well less competition for a given niche on App Stores, in comparison to Google directly. With leasingrechnen.at, I've got easily into the Top 10 Apps on Google Play for my country, whereas Google Search put me on page 9 as the Site is relatively new.

What it does

  • Provides a native iOS navigation header.
  • Sets up a WKWebView instance just the way PWAs/SPAs like it.
  • Provided your Web App is Offline-capable, it only needs an Internet connection on the first startup. If this fails, it shows a native refresh widget.
  • Opens all external URLs in the device's Browser / 3rd party apps instead.
  • Automatically fetches updates of your Web App.

How to build your own

  • Clone/fork repository and open in Xcode
  • Head over to Constants.swift and
    • add your app's name and the main URL to fetch
    • set the host you want to restrict your app to
    • add your custom Javascript string to open your Web App's menu.
      • this is injected into the site when the "Menu" button is pressed. This wrapper assumes you're hiding your Web App's header in favor of the native App navigation and show/hide your menu via Javascript.
    • customize the colors
    • tweak the other options as you prefer
  • Put your own App icons in place in Assets.xcassets
    • Remember, 1pt equals 1px on 1x-size. E.g., if you have to provide a 20pt icon of 3x-size, it has to be 60x60px.
    • iOS doesn't like transparency, use background colors on your icons.
    • I like using App Icon Maker, but any other similar service will do it as well.
    • Don't forget the launcher icon!
  • In the Project Overview
  • Build App in Xcode

I don't accept Feature Requests, only Pull Requests :)

License

GNU General Public License v3.0 - if you use it, we wanna see it! Other licensing options are available on inquiry.

ios-pwa-wrapper's People

Contributors

nvitius avatar xtools-at avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ios-pwa-wrapper's Issues

Disable zooming

IMHO you should allow disabling the zoom / pinch gestures.

- class ViewController: UIViewController {
+ class ViewController: UIViewController, UIScrollViewDelegate {

Add to setupWebView

    // Disable zooming
    webView.scrollView.delegate = self
    webView.navigationDelegate = self

Add extra func:

func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
    scrollView.pinchGestureRecognizer?.isEnabled = false
}

Remove menu

how can i remove the menu?
does anyone have a modified fork?

thanks.

You are offline issue

When I am trying to build PWA using iOS PWA Wrapper it shows "You are offline"
you are offline error. I have run this code in XCode 9.2. will it cause this error?

Change license to LGPL?

I see that you're using GPL but I don't think that's the license you want based on:

" if you use it, we wanna see it! Other licensing options are available on inquiry."

I think you want LGPL.

It MIGHT be interpreted that if you use this package, that the code in your MAIN app is forced to be GPL.

It's debatable though... LGPL would clean up this confusion.

To clarify we have no problem contributing back ;)

Using the GPL is going to discourage people from using this project but LGPL would get you the best of both worlds.

LGPL would allow you to force changes to be opened without requiring the users entire app to also become GPL

Wrapped apps launch popup windows

Hey there! I am experiencing an issue where upon loading the app, Google auth screen (which I otherwise include in the app) is launched. Here is the URL in question: https://www.dateswiper.com - so you can verify yourself. There is one other site which launches Stripe payment popup instead in the same fashion.

Let me know what you think!

Disable bounce effect?

Is there a way to disable the bounce effect (overscroll) when scrolling down while at the top of the page? The page keeps scrolling down about 50-100px more and a white space shows up.

Visual examples:

image

image

This wrapper isn't working offline..

I tried with offline :

1- Opened the app with my website PWA
2- Turn Airplane Mode ON
3- Kill PWA Wrapper APP
4- Reopened PWA Wrapper App
5- The PWA isn't loaded

Did i missed a step ?

When app launches access goes to browser

When app launches access goes to browser and my pwa app runs there in browser as simple website.

Actually I want it to run it in our wrapped app. Why it redirecting me to browser if I wrap my website into app.

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.