Створюємо Web-додатки завтрашнього дня сьогодні
Найважливіше, що потрібно мати для виконання прикладів з даної статті - це кілька браузерів для тестування. Я настійно рекомендую використовувати для тестів останні версії Mozilla Firefox, Apple Safari і Google Chrome. При роботі над цією статтею я використав Mozilla Firefox 3.6, Apple Safari 4.04 і Google Chrome 5.0.322. Можливо, ви побажаєте перевірити роботу програми в браузерах мобільних пристроїв. Я тестував свій додаток на браузерах, запущених на емуляторах мобільних пристроїв, за допомогою останніх версій SDK для Android і iPhone.
Ви можете завантажити вихідний код прикладів для цієї статті.
Визначаємо підтримувану функціональність
Є старий жарт про те, що Web-розробники витрачають 20% відсотків свого часу на написання коду, а решта 80% на те, щоб він однаково працював у всіх браузерах. Сказати, що розробники звикли до того, що різні браузери працюють по-різному - це не сказати нічого. У зв'язку з новою хвилею інновацій в браузерах ця песимістична точка зору цілком обгрунтована. Функціональність, підтримувана останніми версіями браузерів, постійно змінюється.
Однак позитивний момент полягає в тому, що нові можливості з'являються на основі Web-стандартів, що дозволяє почати їх використовувати вже сьогодні. Можна використовувати прийом поступового розширення (progressive enhancement) - надати базові функції, перевірити підтримку додаткових можливостей і, якщо вони підтримуються, розширити свій додаток новою функціональністю. Спочатку давайте подивимося, як визначити, чи підтримує браузер будь-які з нових можливостей. У лістингу 1 представлений простий сценарій виявлення.
Лістинг 1. Сценарій виявлення
В рамках HTML 5 з'явилася величезна кількість нових можливостей і стандартів. Ми в цій статті зосередимося на кількох досить корисних можливостях. Сценарій, представлений в лістингу 1. визначає підтримку браузером чотирьох можливостей:
Лістинг 2. DOM-структура для виведення результатів роботи сценарію виявлення
У лістингу 2 представлена проста HTML-структура, яка використовується для відображення діагностичної інформації, яка збирається сценарієм. Далі в лістингу 1 ми перевіряємо підтримку геолокації. Тут знову використовується прийом подвійного заперечення, однак тут перевіряється об'єкт geolocation. який повинен бути властивістю об'єкта navigator. Якщо об'єкт geolocation існує, то ми за допомогою його методу getCurrentPosition отримуємо поточне місце розташування. Отримання місця розташування може бути повільним процесом, так як воно зазвичай включає в себе сканування Wi-Fi мереж. На мобільних пристроях ця процедура також може включати сканування веж стільникового зв'язку і опитування GPS-супутників. Так як це може зайняти тривалий час, getCurrentPosition є асинхронним методом, який приймає як параметр функцію зворотного виклику. В даному випадку в якості функції зворотного виклику ми використовуємо замикання, яке просто відображає поля з інформацією про місцезнаходження (за допомогою відповідного стилю CSS), а потім записує значення координат в DOM-структуру.
Наступним кроком є перевірка підтримки бази даних. Ми перевіряємо наявність глобальної функції openDatabase. яка використовується для створення клієнтських баз даних і доступу до них.
Лістинг 3. Можливості різних браузерів
Всі популярні настільні браузери підтримують досить багато нових функцій.
Підтримка геолокації слабо поширена на настільних браузерах, проте в браузерах мобільних пристроїв геолокація підтримується дуже добре. У лістингу 4 показані агреговані результати для мобільних браузерів.
Лістинг 4. Браузери мобільних пристроїв
Зверніть увагу, що iPhone підтримує всі, за винятком робочих потоків. У лістингу 3 показано, що настільна версія браузера Safari підтримує робочі потоки, тому логічно очікувати, що ця функціональність скоро з'явиться і в iPhone.
Отже, ми вміємо визначати, яку функціональність підтримує браузер користувача. Тепер давайте розглянемо приклад програми, що комбінує дану функціональність в залежності від того, чи підтримує її браузер. Ми створимо програму, яка використовує Foursquare API для пошуку популярних місць, розташованих неподалік від поточного місцезнаходження користувача.
Створюємо додаток завтрашнього дня
В даному прикладі ми зосередимося на використанні геолокації на мобільних пристроях, проте не будемо забувати, що Firefox 3.5+ також підтримує геолокацію. Додаток починає свою роботу з пошуку місць (в термінах Foursquare - venues), розташованих поруч з поточним місцезнаходженням користувача. Місцями може бути все, що завгодно, проте зазвичай - це ресторани, бари, магазини і т.д. Так як наш приклад є Web-додатком, на нього діє політика обмеження домену. Браузер не може безпосередньо звертатися до API, наданих Foursquare. Тому ми створимо Java-сервлет, який фактично буде проксіровать виклики браузера. Не обов'язково для цього використовувати Java; подібний проксі можна легко написати на PHP, Python, Ruby або іншою мовою. У лістингу 5 показаний використовуваний в даному прикладі проксі-сервлет.
Лістинг 5. Проксі-сервлет, що працює з Foursquare
використовуємо геолокацію
Спочатку додаток робить виклик для пошуку місць. У лістингу 5 показано, що нам потрібно передати два параметри: geoLat і geoLong. позначають широту і довготу.
Лістинг 6. Робимо виклик для пошуку місць поряд з даними місцезнаходженням
Наведений вище код перевіряє підтримку геолокації в браузері. Якщо геолокація підтримується, додаток отримує інформацію про місцезнаходження і викликає функцію venueSearch. передаючи в неї широту і довготу. У цій функції використовується Ajax (об'єкт XMLHttpRequest для виклику сервлета, показаного в лістингу 5). Як функції зворотного виклику в коді використовується замикання, в якому розбираються дані JSON, отримані від Foursquare, і викликається показана нижче функція buildVenuesTable.
Лістинг 7. Відображаємо інформацію про місця
Структуроване сховище даних
У лістингу 7 демонструється класична стратегія поступового розширення (progressive enhancement). В даному прикладі ми перевіряємо, чи підтримує браузер базу даних. Якщо база даних підтримується, то в додатку з'являється новий елемент призначеного для користувача інтерфейсу, який додає в додаток нову функціональність, для роботи якої використовується база даних. В даному випадку це звичайна кнопка. При натисканні на кнопку викликається функція saveAll. показана в лістингу 8.
Лістинг 8. Зберігаємо інформацію в базі даних
Щоб зберегти інформацію про місця в базі даних, ми спочатку створимо таблицю, в якій ця інформація буде зберігатися. Це досить стандартний синтаксис SQL для створення таблиці. (Всі браузери, які підтримують бази даних, використовують SQLite. Зверніться до документації SQLite, щоб дізнатися про підтримувані типи даних, обмеження і т.д.) SQL-код виконується асинхронно. Викликається функція transaction, в яку передається функція зворотного виклику. Функція зворотного виклику приймає як параметр об'єкт транзакції, за допомогою якого можна виконувати SQL-запити. Функція executeSQL приймає як параметр рядок коду SQL, необов'язковий список параметрів, а також обробники для успішного виконання запиту і для випадку виникнення помилки. Якщо функція-обробник для випадку помилки відсутній, то помилка "проковтує". Для інструкції create table саме так і слід робити. При першому виконанні сценарію таблиця буде успішно створена. При наступних викликах сценарій повинен буде видавати помилку, так як сторінка вже існує. Тому в даному коді ми просто гарантуємо, що таблиця, в яку ми збираємося додавати рядки, існує.
Створивши таблицю, ми в циклі forEach викликаємо функцію saveVenue для кожного місця, отриманого від Foursquare. У цій функції спочатку перевіряється, чи існує вже цей об'єкт в локальній базі даних. Тут ми бачимо в дії обробник успішного виконання запиту. В цей обробник передається результат виконання запиту. Якщо результатів немає або дане місце ще не було збережено локально, викликається функція insertVenue. в якій виконується інструкція insert для додавання цього місця в таблицю.
Після збереження в базі даних всіх об'єктів в функції saveAll викликається функція countVenues. У ній запитується кількість місць, які були додані в таблицю. Тут використовується синтаксис row [ "COUNT (*)"]. за допомогою якого визначається кількість рядків, повернутих в результаті виконання запиту.
Ми дізналися, як працювати з вбудованою в браузер базою даних, якщо вона є. У наступному розділі ми розглянемо використання робочих потоків.
Фонова обробка за допомогою робочих потоків (Web workers)
Давайте повернемося до лістингу 6 і зробимо в ньому невелика зміна. Додамо в нього перевірку підтримки браузером робочих потоків, як показано в наведеному нижче лістингу 9. Якщо підтримка є, ми будемо використовувати робочі потоки для отримання додаткового інформації про кожне місце, отримане від Foursquare.
Лістинг 9. Модифікований пошук місць
Лістинг 10. Сценарій, що виконується робочим потоком, details.js
У цьому сценарії виконується обхід всіх місць. Для кожного місця сценарій робить виклик до проксі Foursquare, щоб отримати детальну інформацію про даному місці. Як завжди, для цього використовується об'єкт XMLHttpRequest. Однак, зверніть увагу що у виклику функції open цього об'єкта, що відкриває з'єднання, ми передаємо третій параметр (true). Це робить виклик синхронним (а не асинхронним, як зазвичай). Так можна робити, тому що ця дія буде виконувати робочий потік, а не основний потік призначеного для користувача інтерфейсу, а, значить, програма не буде зависати на цих викликах. Роблячи виклики синхронними, ми гарантуємо, що до початку кожного наступного виклику попередній виклик вже завершено. Оброблювач просто витягує всі асоційовані з даним місцем підказки і збирає їх для передачі в основний потік призначеного для користувача інтерфейсу. Для повернення даних використовується функція postMessage. яка викликає в робочому потоці функцію зворотного виклику onmessage. як було показано в лістингу 9.
За замовчуванням пошук повертає десять місць. Уявіть, скільки часу може зайняти виконання десяти додаткових викликів для отримання докладної інформації. Подібні завдання має сенс виконувати у фоновому режимі за допомогою робочих потоків.
висновок
У цій статті ми розглянули деякі нові можливості HTML 5, підтримувані сучасними браузерами. Ми дізналися, як перевіряти підтримку цих можливостей і поступово розширювати за рахунок них функціональність свого застосування. Більшість цих можливостей вже широко підтримуються популярними браузерами, особливо на мобільних пристроях. Тепер ви можете створювати інноваційні Web-додатки, використовуючи в них переваги таких технологій, як геолокація і робочі потоки.