The first AppStore for Progressive WebApps.
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
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:
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
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
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>
Example index.html:
NOTE: Make sure to add the dependencies to the header, then add the tag
<!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>
MIT © WickeyWare, LLC