Giter VIP home page Giter VIP logo

vsf-mobile-wrapper-ios's Introduction

Vue Storefront iOS Mobile Wrapper

Vue Storefront iOS PWA wrapper

An iOS Wrapper application to create a native iOS App from Vue Storefront PWA.

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.

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

  • 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

License

GNU General Public License v3.0

Credits

vsf-mobile-wrapper-ios's People

Contributors

vue-kacper avatar

Stargazers

 avatar  avatar Isma Flippad avatar  avatar Bachir El Khoury avatar Dmitry Schegolihin avatar Sergii Gozhedrianov avatar Piotr Karwatka avatar

Watchers

Piotr Karwatka avatar James Cloos avatar Bartosz Picho avatar  avatar  avatar

Forkers

santiago head77x

vsf-mobile-wrapper-ios's Issues

VSF - Wrapper doesn't allow payment with Apple Pay

Hi everyone, I have a problem with Stripe integration on VSF.
I have integrated the payment via Stripe on a VSF project, the payment via Google Pay and Apple Pay works fine.

The problem arises when I go to generate the application for iOS via wrapper using XCode: in this case, the button for payment with Apple Pay does not appear.

I assume the problem may be related to the wrapper running on a browser like Chrome instead than Safari.

Any ideas on how to fix this?

Thanks in advance

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.