HOWTO: Native iPhone/iPad apps in JavaScript

Что это такое

JavaScript — скриптовый язык программирования. Работает в обозревателе пользователя. Делает сайты функциональными. На его основе пишется динамическая составлявшая современных сайтов.  Рассмотрим подробнее, как активировать яваскрипт в Айфоне.

Changing the phone status bar

You can also change how the phone’s status bar is displayed with a meta tag.

You can make it white, black or translucent:

The values for content are default,
black and black-translucent.

Creating a home screen icon

To add a home screen icon, create a 114×114 .png file, and then
link to it in the header:

Creating a native «objective-c» app

If you want to publish your app in the app store,
you’ll need to write it in Objective-C.

Fortunately, Cocoa includes a UIWebView class, which is
just the Mobile Safari browser without its chrome.

So, you can actually bundle your HTML/CSS/JavaScript app up natively
by wrapping it in a few lines of canned Objective-C.

Creating a splash screen

To add a splash screen during loading, create a 320×460 .png file,
and then link to it in the header:

Detect double tap on ipad or iphone screen using javascript

var tapped="";
function dbtapper(elem=false,arg1, arg2, arg3, timer=1400){
    if(tapped==""){
        //Here is single tap

        tapped = setTimeout(function(){tapclean()}, timer)
        lastclick = elem;
        //variable lastclick is to prevent double clicking from happen
        //when clicking different object with double-click listener.

    } else if(lastclick==elem){
        //Here is double tap, if you want more (triple&beyond),
        //add doubletap/tripletap checker variable into tapclean().
        //and set it to true here!, example included.
        //you could also add more setTimeout to var-tapped so user will
        //have more time to do triple&up taps.

        tapclean();
        //doubletapped=true;
        mypersonalfunc(arg1, arg2, arg3);
    } else {
        tapped = setTimeout(function(){tapclean()}, timer);
        lastclick = elem;
}
}
function tapclean(){
    clearTimeout(tapped);
    tapped="";
    //doubletapper=false;
}

Without element pointer: dbtapper(false,yourarguments)
With element pointer: dbtapper(document.getElement*******,yourarguments)
Alternatively, you can use an unique elem arg for each element:
                    dbtapper('omega',yourarg) or dbtapper(69,yourarg)
Though this is not recommended if you have a huge amount of double tapping elements.

Detecting iphone os

You might want your app to behave a little differently depending on where it’s run.

I used the following JavaScript to detect if the app is running inside
an iPhone, an iPod Touch or an iPad:

Detecting rotation events

If you want to take an action when the phone is rotated, listen
for onorientationchange events on the body
tag.

The current orientation is in window.orientation, and it
is encoded as the angle (in degrees)

Example: medical logging application

The medical logging app is a nice example because it caches much
of itself locally, resorting to the network only for synchronization
via PHP scripts that interact with a database.

And, it’s been a major quality-of-life improvement for me and my wife.

Download the medical logging app source code.

Example: multi-touch graph navigation

I wrote an app that creates a full screen canvas and then lets
you zoom in and out of the graph of f(x) =
sin(x)
using the pinch-to-zoom gesture.

This runs well on my iPad and in the simulator, but it’s a little
choppy on my first-gen iPhone.

Feel free to poke around and modify the code: graph.html.

Gocoedit

Видно, что редактор GoCoEdit писал программист для программистов. Дизайн приложения довольно своеобразный, зато есть ряд фич, отсутствующих в других редакторах.

Общий вид редактора. Обратите внимание на дополнительную строку с символами в верхней части клавиатуры. Принцип работы как у Textastic, описанного выше. Отличие в том, что если у Textastic кнопка пятипозиционная, то здесь только трех: центр, право, лево.

Окно работы с файлами

Во встроенном броузере есть возможность подключить FireBug Lite.

Стоит 349 рублей в российском AppStore.

‎inspect browser

Ipad quirks

Creating native iPad web apps is almost identical to creating
native iPhone web apps.

The biggest changes are that your start-up image must be exactly
1004×768.

Other than that, it’s mostly the same.

Javascript приложение под ipad. пара советов

Mimicking iphone os components

The webkit rendering engine supports a lot of CSS extensions, and
you can use these to simulate native Cocoa components; for example,
buttons are easy:

More resources

On top of the information below, I can recommend a few other resources:

Preventing scaling

If you pinch on a web app, it still responds like it’s in a browser and zooms in.

This can be a giveaway that the app isn’t native.

If you want to prevent scaling, use the viewport meta tag:

‎scriptable

Textastic

Редактор Textastic. Серьезный редактор, в котором хорошо продуман процесс разработки.

Общий вид редактора.

Обратите внимание на верхний ряд клавиш с кнопками, в которых по середине стоит один символ и еще 4 по краям. Это гениальное изобретение. Если вы пользуетесь iOS — вы знаете, что для доступа к символам $, _ и т.д. необходимо переключаться в другой «экран» клавиатуры. Это очень сильно осложняет набор и замедляет процесс ввода.

Как работают этот ряд специализированных клавиш: вы «тыкаете» в кнопку — происходит ввод символа по центру. Если вы «тыкаете» в центр и смещаете палец в сторону одного из краев кнопки — происходит ввод символа из соответствующего угла. Поверьте — это очень удобно.

Можно настроить вид редактора в широких пределах

Также есть интеграция с программой Working Copy (о ней ниже), которая позволяет работать с git-репозиториями, а также с GitHub и Bitbucket.

Выбираете в качестве источника Working Copy

После окончания работы файл можно будет закомитить с помощью Working Copy в удаленный репозиторий.

Стоит 479 рублей в российском AppStore.

‎touchpad

Working copy

Программа Working Copy не является редактором в классическом смысле. Это скорее полноценный клиент по работе с git-репозиториями. Аналоги:iOctocat, Git2Go

Все эти приложения позволяют подключать как самостоятельные git-репозитории, так и интегрироваться с GitHub и BitBucket. Поддерживают ветки, просмотр коммитов, diff-ов и т.д. Как правило все эти программы имеют бесплатную функциональность на работу с репозиториями в режиме просмотра. Если вы хотите комитить свои изменения — придется выложить от 7 до 10 долларов.

Добавляем репозиторий

Как я писал выше — есть полноценная интеграция с редактором Textastic.

Стоимость — бесплатно, но для полноценной работы необходимо разблокировать функции.

А нужно ли это

На яваскрипт создаются: кнопки, переключатели, модальные окна, слайдеры. Поэтому при работе в сети, активируйте JavaScript, иначе сайты будут некорректно работать.

Использование текстового терминала

Предположим, у вас есть удаленный сервер и на нем настроен Vim. Vim по своей природе предполагает работу только с клавиатурой, поэтому идеально ложится на паттерн использования внешней клавиатуры. Про гибкость настройки Vim можно найти тысячи статей в интернете — скажу лишь, что немного допиленный Vim по удобству не уступает редакторам от JetBrains, продуктами которой я так же активно пользуюсь.

В качестве терминала можно либо использовать навороченный vSSH, в котором можно настроить вообще все, либо более хипстерский Prompt. У Prompt плохо то, что у него часть экрана отдана под разные вспомогательные элементы, что уменьшает рабочую область, зато более приятная цветовая гамма и разные «фишечки».

Prompt:

Prompt — 7.99$vSSH — 279 руб.

Использование удаленного доступа к стационарному компьютеру / ноутбуку.

Я пробовал TeamViewer и какой-то из VNC клиентов с пробросом VPN в домашнюю сеть. В целом мне показалось, что они не особо учитывают реали того, что работа идет под iPad и, как следствие, удобство работы оставляет желать лучшего.

Когда несколько лет назад вышел Parallels Access — у меня оказалась в руках бесплатная годовая лицензия, которая шла в комплекте с Parallels Desktop. Из того что я пробовал — это наиболее вменяемый продукт, но который тоже не лишен недостатков.

Самый большой недостаток — это переодические сообщения «Slow internet connection» и «залипания» интерфейса, хотя и iPad и ноутбук находятся в сети 70 Мбит/с. К счастью происходит это не так часто и с этим можно жить. Сейчас годовая подписка стоит 649 руб / год.

PHPStorm, запущенный на ноутбуке

В целом, можно сказать что это рабочий вариант, при условии что вы сидите на быстром интернет-канале. Из плюсов — полное рабочее окружение на iPad.

Как включить в обозревателе safari

В Сафари откройте меню, перейдите:
Чтобы включить JS, активируйте в браузере пункт:
Чтобы включить JS, активируйте в браузере пункт:

Как включить на iphone

Настройка обозревателя Safari происходит не в программе, а в настройках системы. Как это сделать? На Айфоне откройте настройки. Вверху экрана найдите поисковую форму, далее:
Прокрутите вниз список настроек, перейдите:
Прокрутите вниз список настроек, перейдите:
Установите переключатель в активное положение.

Как есть средства отладки javascript-скриптов для айфонов / айпадов?

Как определить ipad pro как ipad с помощью javascript?

function isDeviceiPad(){ return navigator.platform.match(/iPad/i); } 

navigator.platform = 'MacIntel'; navigator.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15)'; 

function isIOS() { if (/iPad|iPhone|iPod/.test(navigator.platform)) { return true; } else { return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform); } } function isIpadOS() { return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform); } 

var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document; 

function isIpadPro() { var ratio = window.devicePixelRatio || 1; var screen = { width : window.screen.width * ratio, height : window.screen.height * ratio }; return (screen.width === 2048 && screen.height === 2732) || (screen.width === 2732 && screen.height === 2048) || (screen.width === 1536 && screen.height === 2048) || (screen.width === 2048 && screen.height === 1536); } 

(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0) || navigator.platform === 'iPad' 

window.screen.height window.screen.width 

Нативные ios приложения

Если суммировать способы работы с файлами (зависит от редактора):

— SFTP— WebDAV— iCloud— Dropbox— встроенный web-сервер— синхронизация через iTunes— интеграция через GitHub / Bitbucket— интеграция с Amazon S3, DreamObjects

Все редакторы позволяют работать с несколькими одновременно открытыми файлами.

У всех редакторов очень ограничена поддержка горячих клавиш при работе с клавиатурой. В интервью создатель GoCoEdit говорил что сама Apple сильно ограничивает разработчиков в этих вопросах. Т.е. забудьте о биндингах на каждое действие — в лучшем случае это Cmd-C / Cmd-V

Ни у одного редактора нет встроенной поддержки git, но есть возможность интеграции со сторонними приложениями, реализующими эту функциональность.

Определить ipad / iphone webview через javascript

Заключение

iPad можно использовать для полноценной разработки. Я использую внешнюю клавиатуру, если есть возможность ее куда-то поставить и экранную клавиатуру если надо сделать что-то на бегу. Экранная клавиатура не увеличивает габариты устройства и позволяет использовать его на ходу, но закрывает половину и так маленького экрана.

Кроме того — набор текста с большим количества спецсимволов, расположенных на разных «экранах» клавиатуры, делает ввод текста медленным. Внешняя клавиатура требует размещения, зато оставляет свободным экран и позволяет набирать со скоростью настольного компьютера.

Если вы разрабатываете только backend-приложение, не требующее тестирования в броузере — я бы рекомендовал связку SSH-клиент VIM tmux на сервере.

Если вы разрабатываете что-то на frontend и у вас достаточный интернет-канал — рекомендую связку Parallels Access редактор полноценный Google Chrome с консолью.

Нативные редакторы находятся в довольно зачаточном состоянии. До прихода серьезных игроков на этот рынок и шагов со стороны Apple по более продвинутому использованию внешней клавиатуры — это не более чем резервный вариант на случай если у вас нет интернета.

Все редакторы заточены на работу с одним файлов, а не проектом целиком. Надеюсь, что с появлением iPad Pro ситуация улучшится и мы получим полноценные редакторы. Если совсем фантазировать — хотелось чтобы Apple разрешила подключать MagicPad и показывать курсор на экране, чтобы не приходилось постоянно «тыкать» в экран.

Вывод

Мы рассмотрели, как активировать поддержку JavaScript на iPhone. Включите ее в телефоне, чтобы сайты корректно отображались.