Himself AppStor
Habrostrozhilary can remember the clock Synchron , which once was already discussed in Habré .
A lot of water has flowed away from the day the idea was conceived: the clock had time to go on as a screen saver, and as a widget, in a word, through many reincarnations.
')
The turn has reached the mobile platform. One way or another, the goal was iOS.
As you know, the modern way to this platform lies through Xcode and the AppStore, which requires certain mental and financial investments.
However, if we recall the troubled time of the release of the first (or rather, the second) “PDA” from the apple company (just in case, the iPhone 1), then we will recall a heated discussion about how it is possible for the applications for it to be anything but simple web applications - the usual jumble of HTML / CSS / JS and the like. Just what we need!
Action
Initial data:
index.html - what can I say, usual HTML5;
sinchron.js - the essence of the entire application - the clock “Synchron” is written in JavaScript and Canvas (there was also a version in SVG).
The styles are set up in index.html, there are few of them, so there is no need to create separate CSS. We connect above mentioned sinchron.js, and we write start of hours at once on loading of the page.
We open it in Safari, test it, see if everything works as it should.
Order ?! Then go to the porting. To get a full application, you should take a few steps.
First, it is necessary that the application works without the Internet.
For this we will use the data storage mechanism on the client. We need to create a manifest (manifest) with a list of resources that need to be saved in the application cache. After the first download of such an application, the resources described in the Manifesto will later be accessed from the cache without accessing the server.
There are a number of requirements for manifests:
- They must be of type text / cache-manifest (web server setup required)
- The first line should be the text "CACHE MANIFEST"
- Subsequent lines can be either comments or URLs of required resources.
- Comments must be on one line and begin with #
- URL can be either absolute or relative
- The HTML file itself, which defines the manifest, automatically gets into the application cache, so adding it is not necessary.
Our manifesto:
CACHE MANIFEST
# five o'clock
sinchron.jsSave it in “cache.manifest”, in the same place where we have the rest of the files.
Connecting the manifest is simple:
<html manifest="cache.manifest">So, the first step is passed. Go ahead.
Secondly, we will deal with the appearance, well, what kind of application is this, when we see browser elements from everywhere. So do not go, we want beauty!
Safari supports a number of meta tags that define the look and feel of the browser.
Add to our HTML a couple of such instructions:
Let the application open in "full screen mode" (let's get rid of the address bar and navigation bar):
<meta name="apple-mobile-web-app-capable" content="yes" />Next, we will make the status panel to the beat of the main background of the application, and we have it black.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />Useful, in our case, exactly, will be setting the browser window size equal to the screen width of the device itself.
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />Download all this (HTML, JS, Manifest) to the server. Take the iPhone / iPad / iPod.
Let's see what happened on the device. And nothing! As before, the address bar is in place, and even this white socket. But do not rush to get upset. All you need to do is tell Safari to add the current page to the home screen (Home Screen), where all the applications are (click on the arrow icon on the Safari navigation bar, the one in the middle in the middle). As a result, our application will appear in the list of applications. Open and voila - no hints on the web-page, full screen, black status bar, everything is like the big ones!
We are switching to airplane mode (turning off the Internet) and launching ... It works and does not ask for it on the Internet!
Bonus
As you know, the screen can be both in portrait and landscape orientation, well, we will add support. To do this, implement the behavior on the event
onorientationchange .window.onorientationchange = function() {
//
}That's all.
Have a beautiful time and interesting applications!
http://bit.ly/isinchron
Bibliography
Source: https://habr.com/ru/post/112820/
All Articles