micro-app

micro-app

(<5kb) [📱iOS] Create Progressive Web App Dynamically.

Try it now

• Open https://micro-app.github.io/ in Safari.

Getting started

$ npm install micro-app

Demo

$ npm cd node_modules/micro-app/
$ npm install
$ npm run demo

How to use

1. Declare feature on the script tag which has an attribute "micro-app".

<script micro-app src="micro-app.min.js" capable></script>

2. Select the script tag which has an attribute "micro-app" then set feature by "setAttribute".

<script micro-app src="micro-app.min.js"></script>
<script>
    document.querySelector('script[micro-app]').setAttribute('capable', true);
</script>

3. Assign feature on the global namespace "microApp".

<script src="micro-app.min.js"></script>
<script>
    microApp.capable = true;
</script>

Features

• If you assign a null, that means remove the feature.

capable

• microApp.capable = true;

<meta name="apple-mobile-web-app-capable" content="yes">

status-bar-style

• microApp.statusBarStyle = 'black-translucent';
• Both microApp["status-bar-style"] and microApp.statusBarStyle are same.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

title

• microApp.title = 'title';

<meta name="apple-mobile-web-app-title" content="title">

icon

• microApp.icon = 'icon.jpg';
• Support multiple.

<link rel="apple-touch-icon" href="icon.jpg">

splash

• microApp.icon = 'splash.jpg';
• Support multiple.

<link rel="apple-touch-startup-image" href="splash.jpg">

Multiple

Use Array and Object to set multiple icon and splash. @see /demo/jquery/entry/index.js

Methods

filter( name: String, handler: Funtion )

• Define a filter, filter the url about icon and splash.

Argument	Description
String	filter name
Function	filter handler

Return values
microApp

Filters

#precomposed

• Set the attribute rel="apple-touch-icon-precomposed".

#autosize

• Set sizes or media after computed.

License

MIT

Changelog

1.0.1

• Correct the version.