Во блоге Ajaxian и во блоге Mozilla Hacks появились блогозаписи о том, каков будет грядущий Firefox 4.

Главная новость: Firefox 4 станет окончательным номером той альфа-версии браузера, которая была до этого известна нам в качестве Firefox 3.7.

Одна из основных инноваций Firefox 3.7 (а именно, вычленение плагинов в отдельный процесс) ужé выпущена в составе Firefox 3.6.4.

Помимо неё, в Firefox 4 появятся вот какие новинки:

→  Поддержка SVG и MathML прямо внутри HTML5, без необходимости прибегать к строгому XHTML и пространствам имён.

→  Интерпретатор HTML5 в отдельном потоке, поэтому интерфейс браузера не будет тормозить в момент обработки крупных страниц.

→  Интерпретатор HTML5 будет поддерживать HTML5 forms.

→  Вызов innerHTML станет работать быстрее (примерно на 20%).

→  Поддержка WebSockets (вебоприложения получат дуплексную связь с вебосервером).

→  PushState улучшит AJAX-взаимодействия.

→  Новые средства взаимодействия с вебостраницами: жесты, многотык (multi-touch).

→  Улучшенная поддержка CSS3.

→  Редактируемое содержимое страниц (contentEditable).

→  IndexedDB: структурированное JSON-подобное (а не SQLite-подобное, как было прежде) хранилище данных.

→  Интерфейсы для доступа к микрофонам и вебокамерам посетителей сайта.

Вышел FireBreath 1.0. А что это такое, спросите вы.

Целью FireBreath является создание кросс-платформенной архитектуры плагинов, ориентирующейся на:

• NPAPI-браузеры для Windows, Mac и Linux:
  • Gecko/Firefox
  • Google Chrome
  • Apple Safari
• Хосты ActiveX Control:
  • Microsoft Internet Explorer 6, 7 и 8

Можно запустить скрипт да начать кодить новый плагин, и забавно видеть, как народ пользуется этим для внедрения некоторых W3C API, таких как:

Воплощение рабочего черновика Indexed Database API, предложенного W3C Web Applications Working Group.

Новость появилась на новом сайте для разработчиков Firefox 4, предвещая много хорошего для тех из нас, у кого ограничен трафик: интерфейс IndexedDB позволит Веб приложениям работать даже без подключения к сети. Предлагаемый в качестве дополнения стандарт HTML IndexedDB является одним из целой коллекции технических решений, открывающих новые горизонты для программистов и веб разработчиков.

Вечером 30 июня «Мозилла» явилась в Лондон в Англии, чтобы поведать про дополнения («Mozilla Add-Ons») и показать некоторые новые клёвые особенности грядущего Файерфокса 4.

Вероятно, наиболее впечатляющими (если не считать средства создания дополнений «Add-Ons Builder», основанного на «Беспине») оказались следующие будущие возможности Firefox 4:

→  отображение HTML5-видео (<video>)

→  рисование на холсте (<canvas>)

→  манипулирование изображениями на холсте (анализ пикселов, распознавание лиц с помощью opencivitas)

→  технологии «зелёного экрана» (хромакей) в иллюстрациях и видео, достигаемые анализом цвета пикселов

→  HTML5, встраиваемый внутрь SVG (ура!)

→  SVG как <img>

→  SVG как CSS-фон

→  SVG-фильтры, SVG-маски, SVG-контуры обрезки

→  SVG-анимация

→  inline SVG (то есть SVG внутри HTML5)

→  CSS3: селекторы, @font-face, 2D-преобразования (transforms), переходы (transitions), тени, градиенты, вычисления — calc(2em-10px)

→  API: геопозиция (geolocation), оффлайн (IndexDB, localStorage, AppCache, FileAPI: чтение двоичного содержимого из файла, перетаскивание файлов), веб-труженики (web workers) и сокеты (websockets)

→  контроллер на вебсокетах, запускающий презентацию с мобильника

→  WebGL

Некоторые из этих способностей подтверждались демонстрациями:

→  фильтры CSS3 и маски SVG на HTML5-видео:

HTML5 Labs — новая экспериментальная площадка для тестирования реализации отдельных элементов HTML5 и связанных спецификаций. В рамках проекта будут публиковаться прототипы реализации тех или иных веб-стандартов или их фрагментов, которые, очевидно, в будущем будут востребованны, но в настоящий момент сыроваты или нестабильны.

На текущий момент доступны прототипы реализаций WebSockets и IndexedDB.

IndexedDB – развивающийся веб-стандарт для хранения значительных объемов структурированных данных в браузере и осуществления высокопроизводительного поиска по данным с помощью индексирования. Mozilla внесла значительный технический вклад в эту спецификацию, и мы планируем реализовать её в Firefox 4 (поддерживается в FF RC4 — прим. пер.). Мы общались с известными веб-разработчиками на предмет внедрения элегантного API для хранения структурированных данных в веб. Safari, Chrome и Opera поддерживают технологию Web SQL Database, использующую SQL-запросы, которые передаются строковыми аргументами в JavaScript API; нам же кажется, что эстетическая составляющая разработки тоже заслуживает внимания, а подобное решение является не очень элегантным для клиентских веб-приложений. Мы донесли мнение разработчиков до редактора спецификации IndexedDB, и пообщались с Microsoft, которая отметила, что IndexedDB была бы не плохим решением для веба. С маячащими на горизонте реализациями от команды Chrome, нам кажется необходимым объяснить наш выбор архитектуры и то, почему нам кажется, что IndexedDB является лучшим решением для веб нежели Web SQL Database.

IndexedDB – стандарт хранения больших объемов структурированных данных на клиенте – был ожидаем также как и WebSocket (ну может самую малость меньше). В свете выхода FireFox 4 я нашёл время и силы всё-таки разобраться, как им пользоваться, и попытаться написать что-то больше, чем пример с адресной книгой, гуляющий по интернетам (в процессе поиска информации у меня сложилось впечатление, что это был единственный пример).

Компания Google открыла исходные коды LevelDB — это созданный в Google быстрый движок (библиотека) для работы с хранилищем пар ключ-значение.

Библиотеку LevelDB на C++ можно использовать для разных целей. Например, веб-браузер может обрабатывать с помощью LevelDB кэш недавно посещённых страниц. Операционная система — список установленных пакетов и зависимостей между ними, а любое приложение может использовать LevelDB для хранения пользовательских настроек.

В эти выходные я имел удовольствие разбираться с асинхронными api IndexedDB.

Поле разбора примера от mozilla мне показалось, что код не так хорош, как мог бы быть.

И я решил для развития своих псионных навыков работы c IndexedDB написать обертку к его асинхронному api.

Если честно, то я не любитель писать статьи, потому что мне всегда было лень читать слова, я люблю читать код, поэтому в моих статьях его как правило много.

Если вы тоже любите код, то я выложил его на github

Фактически эта статья описывает то что написано в примерах использования обертки, ну может чуть больше.

В браузере Firefox 16 мы лишаем префикса:

• CSS3 Animations (баг 762302)
   
• CSS3 Transitions (баг 762303)
   
• CSS3 Transforms (баг 745523)
   
• CSS3 Gradients (баг 752187)
   
• IndexedDB (баг 726378)

Также и calc() может остаться без префикса (баг 771678).

Как-то давно я писал о том как можно в вебе использовать карты без сети и пытался сделать это с помощью гугло карт. К сожалению условия использования запрещали модифицировать ресурсы, а написанный мною код работал только с localStorage, поэтому я решил перейти на светлую сторону силы, где код открыт, прост и понятен.

Большинству программистов на языке JavaScript, успевших ознакомиться с Node.js, хорошо известен модуль fs, который в API Node служит для доступа к файловой системе.

Matthew Phillips (на фото справа) предпринял успешную попытку создания во браузерном (клиентском) джаваскрипте частичного аналога этого нодовского модуля. Исходный код, опубликованный им на Гитхабе к началу нынешнего (2013) года, поддерживает работу с файлами и каталогами виртуальной файловой системы, в роли которой в Chrome выступает FileSystem API, а в Firefox и в IE — IndexedDB.

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

А мы идем далее.

Безлимит

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

Но как всегда есть одно «НО», это самое «НО» — ограничение размера БД на машине пользователя в размере 5 МБ, что отнюдь нас не устраивало. Так как данная технология планировалась использоваться в админке нашего проекта и все юзеры использовали в качестве дефолтного браузера Google Chrome, то было принято решение поиска обхода того самого ограничение через расширение-прокси. Перелопатив много инфы мы пришли к выводу, что ограничение на размер БД можно убрать использовав специальные флаги в манифесте нашего расширения:

Уже довольно давно у веб-приложений появилась возможность хранить часть данных или файлов локально. Можно даже кешировать MP3-файлы. Браузеры научились хранить немалые объёмы данных. Тем не менее, пока что технологии локального хранения сильно фрагментированы.

localStorage предоставляет лишь самые базовые функции, это хранилище довольно медленно и не умеет хранить блобы. IndexedDB и WebSQL асинхронны, быстры и поддерживают большие объемы данных, но их API довольно запутан. Кроме того, ни IndexedDB, ни WebSQL не поддерживаются всеми основными браузерами, и, похоже, в ближайшем будущем эта ситуация не изменится.

Если вам нужно писать веб-приложение с оффлайн-режимом, и вы не знаете, с чего начать, то эта статься для вас. Если вы уже пытались работать с локальными хранилищами, и у вас от этого голова пошла кругом — статья и для вас тоже. Мы в Mozilla написали библиотеку localForage, которая значительно облегчает задачу хранения локальных данных в любом браузере.

Почувствовать на своей шкуре все сложности работы с локальным хранилищем мне помогла разработка around — HTML5-клиента для Foursquare. Хотя в этой статье я рассказываю, как использовать localForage, возможно кто-то предпочтёт изучить реальные примеры работы с ней.

localForage — очень простая библиотека JavaScript, которая использует API, похожий на API localStorage, с теми же самыми базовыми методами get, set, remove, clear и length, но имеет ещё несколько важных улучшений:

• асинхронный API с колбэками;
• драйвера IndexedDB, WebSQL и localStorage (самый подходящий драйвер выбирается автоматически в зависимости от возможностей браузера);
• поддержка блобов и произвольных форматов данных, так что можно хранить изображения, файлы и так далее;
• поддержка обещаний ECMAScript 6.

Использование IndexedDB и WebSQL позволяет хранить намного больше данных, чем localStorage. Неблокирующий асинхронный API делает приложение более быстрым и отзывчивым, так как основной поток приложения не подвисает во время выполнения вызовов get/set. Поддержка обещаний позволяет писать чистый код без спагетти из колбэков. Конечно, если вы любите колбэки, можно использовать и их.

На Хабре уже рассказывали про IndexedDB — стандарт хранения больших структурированных данных на клиенте. Но это было давно и API сильно изменился. Несмотря на это в поиске статья всплывает одной из первых и вводит в заблуждение многих, кто начинает пытатся работать с этой технологией. Поэтому я решил написать новую статью с информацией об актуальном API.

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

Привет! В последнем релизе Chrome обнаружил очень необычное поведение браузера. Это поведение вызывало новые необычные ошибки в моём веб-скрипте. И я решил поделиться, как оптимизируют производительность Chrome, и про то, с какими необычными последствиями можно столкнуться.

Поехали.

В этом коротеньком очерке я опишу те вещи о service workers, о которых я бы хотел прочесть год или хотя бы полгода назад и тем самым избежать очень долгого и мучительного периода отладки приложения.

Если вы попали сюда по запросу типа «какого черта мой сервис воркер не работает на продакшене?», добро пожаловать под кат.

(С)

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

• кэширование страниц сайта для офлайн доступа;
• ведение учета страниц, доступных офлайн, проброс необходимых данных;
• мониторинг статуса сети, онлайн или офлайн;
• общение сервис-воркера со страницами и вкладками, которые он обслуживает;
• перехват сервис-воркером запроса на открытие адреса /offline/ и генерирование новой страницы прямо на устройстве, без запроса к серверу.

Если тема сервис-воркеров и Progressive Web Apps (PWA) для вас новая, то перед чтением этой статьи необходимо познакомиться с ними поближе.

Меня зовут Рыбин Павел, я работаю во фронтенд-разработке Медиапроектов Mail.Ru Group. Это руководство мне помогали писать грабли, набитые шишки и подводные камни, попавшиеся мне при реализации PWA для мобильной версии Авто Mail.Ru.

В тексте будут встречаться небольшие примеры кода, иллюстрирующие рассказ. Расширенную же демо-версию можно посмотреть на GitHub.

Доброго времени суток, друзья!

Сегодня мы с вами, как следует из названия, напишем простое приложение для формирования и хранения заметок.

Возможности нашего приложения будут следующими:

1. Создание заметки.
2. Хранение заметок.
3. Удаление заметки.
4. Отметка о выполнении задачи.
5. Информация о дате выполнения задачи.
6. Напоминание о необходимости выполнения задачи.

Приложение будет написано на JavaScript.

Заметки будут храниться в индексированной базе данных (IndexedDB). Для облегчения работы с IndexedDB будет использована эта библиотека. Как заявляют разработчики данной библиотеки, она представляет собой «тоже самое, что и IndexedDB, но с промисами».

Предполагается, что вы знакомы с азами IndexedDB. Если нет, то прежде чем продолжить рекомендую прочитать эту статью.

Я понимаю, что для решения такой задачи, как хранение заметок, вполне достаточно LocalStorage. Однако, мне хотелось исследовать некоторые возможности IndexedDB. Таким образом, выбор в пользу последней был сделан исключительно из гносеологических соображений. В конце будут приведены ссылки на похожее приложение, где хранение данных реализовано с помощью LocalStorage.

Итак, поехали.