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
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 mywasappChange 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 startwith yarn
yarn
yarn run build:lib
yarn run startNow visit localhost:4204
To build your app in preparation for deployment to the WickeyAppStore.
npm run buildyarn run buildThe 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 --saveImport 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>License
MIT © WickeyWare, LLC