wickeyappstore

v2.20.6

Published

3 years ago

The first AppStore for Progressive WebApps.

Downloads

0High
0Medium
0Low

wickeym

twickey

angular wickeyappstore wickey app store appstore app store pwa progressive webapp

WickeyAppStore

The first AppStore for Progressive WebApps.

Docs, Demo, & Developer Portal

DOCS: https://wickeyware.github.io/wickeyappstore/

DEMO APP: https://wickeyappstore.com/app/airhorn and corresponding repo: https://github.com/wickeyware/was-tutorial/

DEV PORTAL: https://wickeyappstore.com/app/developer-portal

App Store

WickeyAppStore

Progressive Web App Store

WickeyAppStore is the first App Store for PWA web-apps. A PWA makes use of new Web and JavaScript API to deliver an experience similar to a native app on the web. Reach the next One Billion users with lightweight, platform independant, full featured, web-apps.

Apps on the WickeyAppStore must meet quality and security requirements:

Safety - must be served via HTTPS to ensure that the real content has not been tampered.
Responsive - can fit all resolutions like desktop, tablet and mobile.
Progressive- work in all modern browsers because they use progressive enhancement concepts.
Connectivity independent - need to work on any type of connection, including offline.
Engageable - using push notifications, "add to home" feature to be more app-like.

Benefits

Trust - each app is vetted and approved manually. Only high quality apps are featured on the WickeyAppStore.
Single Sign On - you do not need to sign into apps you do not know or trust. Your WickeyAppStore SSO is all you need.
Monetization - we provide monetization tools including in-app purchases and ads.
Traffic - we feature unique and cool apps, and all apps benefit from being under one umbrella.

Submit your app

Create your app in the dev portal and use it to add meta data, in-app purchases, and so on. Here's a link to get started: Developer Portal

QuickStart (Angular)

Prerequisite: nodejs needs to be installed on your pc.

Clone our starter project Airhorn.

Where mywasapp is the name of your app, replace with whatever is desired.

git clone https://github.com/wickeyware/was-tutorial.git mywasapp

Change to that directory

cd mywasapp/

Install project dependencies and run.

with npm.

NOTE: npm will already be installed if node is already installed.

npm install
npm run build:lib
npm run start

with yarn

yarn
yarn run build:lib
yarn run start

Now visit localhost:4204

To build your app in preparation for deployment to the WickeyAppStore.

npm run build

yarn run build

The output dist/ directory is what will be selected to deploy on: developer.wickeyappstore.com

QuickStart (Manual Angular Integration)

To install this library, run: (NOTE: Install all dependencies)

npm install wickeyappstore --save

Import Material theme in global styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// Import Wickey AppStore
import { WickeyAppStoreModule } from 'wickeyappstore';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    FormsModule,
    // Specify as an import
    WickeyAppStoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once WickeyAppStoreModule is imported, you can use its components, directives and pipes in your Angular application:

<!-- Add the Wickey Appstore to top of the bootstrapped component -->
<wickey-appstore></wickey-appstore>

<!--Now your app. Thats it.-->
<div class="myapp">
  <h1>Welcome to my app!</h1>
</div>

QuickStart Other (JS)

Example index.html: NOTE: Make sure to add the dependencies to the header, then add the tag and the wickeyappstore.js script in the body.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom WAS Test Page</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="src/favicon.ico">

  <!-- WickeyAppStore css -->
  <link rel="stylesheet" href="elements/styles.css">
</head>
<body>
  <wickey-appstore></wickey-appstore>
  <script type="text/javascript" src="elements/wickeyappstore.js"></script>
  <script>
    const wickeyappstore = document.querySelector('wickey-appstore');
    wickeyappstore.addEventListener('open', (event) => {
      console.log('WAS button opened');  // can pause game here.
    });
    // https://wickeyware.github.io/wickeyappstore/injectables/UserService.html
    const userService = window.WAS.userService;
    // https://wickeyware.github.io/wickeyappstore/injectables/WasDataService.html
    const dataService = window.WAS.dataService;
    userService.user.subscribe(usr => {
      console.log('userServiceOut user.subscribe', usr);
    });
    userService.loginChange.subscribe((_isLogged) => {
      console.log('loginChange: loggedin: ', _isLogged);
      // This is a good place to call dataService.restore again, to get the logged in user's data.
    });
    // Check if purchased (where 10 is your purchase item id).
    userService.checkIfPurchased(10).subscribe(isPurch => {
      console.log('checkIfPurchased', isPurch);
      if (!isPurch) {
        // Check if purchased (where 10 is your purchase item id).
        const _inapp = userService.getInapp(10);
        userService.openpayjs(_inapp).subscribe(isSuccessful => {
          if (isSuccessful === true) {
            console.log('purchase was successful');
          } else if (isSuccessful === false) {
            console.log('purchase was NOT successful');
          } else {
            console.log('purchase was canceled');
          }
        });
      }
    });

    // Opens review popup, if logged in, else first logs in.
    // userService.leavereviewjs();

    // Example of how to pass in own save conflict mapping function.
    // Default mapping will choose the newest save.
    function onSaveConflict(localSave, cloudSave) {
      let keepSave = localSave;
      if (localSave && cloudSave) {
        if (cloudSave.highScore > localSave.highScore) {
          keepSave = cloudSave;
        }
      }
      return keepSave;
    }
    dataService.restore(onSaveConflict).subscribe(mydata => {
      console.log('wasDataService.restore', mydata);
      // // WasDataService is now loaded and restored (ready for use).
      // dataService.get('highScore');
      // dataService.save('highScore', 3000);
      // // Then after the session (or game level), persist to cloud
      // dataService.persist();

      // // Show leaderboard
      // userService.showLeaderboardjs();

      // // Add score to leaderboard
      // userService.addToLeaderboardjs(this.highScore);
    });
  </script>
</body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

WickeyAppStore

Docs, Demo, & Developer Portal

App Store

Progressive Web App Store

Benefits

Submit your app

QuickStart (Angular)

QuickStart (Manual Angular Integration)

QuickStart Other (JS)

License