Наткнулся на статью Стейси Тей "How we made Carousell’s mobile web experience 3x faster". В статье Стейси делится опытом оптимизации web-приложения Carousell.

Их стартап из Сингапура. Это довольно богатая страна, пользователи которой пользуются мощными смартфонами с хорошим интернет-соединением. С выходом на рынок Филиппин и Индонезии у них появилась проблема — у средне-статистического пользователя их сайт грузился 15 секунд.

Они ввели бюджет на производительность: 120KB для ресурсов критического пути рендеринга, 2 секунды для First Contentful Paint и 5 секунд Time-to-Interactive. Частично реализовали паттерн PRPL, заинлайнили критический CSS, стали лениво грузить изображения, стали использовать сервис воркеры для кеширования запросов, включили сжатие изображений у своего CDN-провайдера. В итоге их сайт стал грузиться в 3 раза быстрее, в 3 раза увеличился CTR и на 63% увеличился органический траффик из Индонезии.

Статья очень ярко показывает, как оптимизация производительности может влиять на бизнес-метрики приложения.

#web #performance #pwa

https://medium.com/carousell-insider/how-we-made-carousells-mobile-web-experience-3x-faster-bbb3be93e006

Недавно Adobe объявила о прекращении поддержки PhoneGap — инструмента для разработки кроссплатформенных мобильных приложений на базе web-технологий. В официальном анонсе компания пишет о том, что PhoneGap больше неактуален, так как он может быть заменен PWA. Пользователям PhoneGap предлагается мигрировать на форк PhoneGap — Apache Cordova.

Максимилиано Фиртман провёл анализ возможностей PWA и сравнил их с текущей версией PhoneGap — "Is the Phone Gap closed in 2020?"

PhoneGap был популярен 10 лет назад, когда на рынке существовало много платформ: iOS, Android, WebOS, Bada, Ubuntu Touch, Symbian, Windows Phone и т.п. К 2020 году остались только две популярные платформы: iOS и Android. Но несмотря на то что многие возможности PhoneGap могут быть покрыты PWA (работа оффлайн, доступ к приложению с домашнего экрана), всё ещё есть API, которые недоступны для web-приложений (информация о устройстве, доступ к контактам (iOS). Ситуация усугубляется ещё тем, что разные платформы поддерживают разный набор API. Лучше всего дела обстоят у Android, у iOS поддержка PWA слабее.

#mobile #pwa

https://firt.dev/phonegap-end/

Максимилиано Фиртман написал статью про новинки в iOS 14 и iPadOS 14, которые будут интересны web-разработчикам — "Safari on iOS 14 and iPadOS 14 for PWA and Web Developers".

Apple теперь позволяет устанавливать браузер по умолчанию для всей системы. Для этого браузеры должны пройти специальную проверку. На данный момент браузером по умолчанию можно сделать Safari, Edge и Chrome.

Появилась поддержка сервис воркеров в сторонних браузерах. Также их поддержка появилась в приложениях, использующих WebView, благодаря новой фиче App-Bound Domains.

В новой версии операционной системы PWA используют зарегистрированные сервис воркеры и CacheStorage из Safari. Cookie, Web Storage и IndexedDB остались изолированы от Safari. Некоторые PWA (например, twitter) не были готовы к этому изменению и работают с ошибками.

Была добавлена экспериментальная поддержка HTTP/3, которую можно включить в настройках. В JavaScriptCore добавлена поддержка BigInt, EventTarget, Logical assignment operator и Public class fields. Web Authentication API поддерживает TouchID и FaceID. Добавлена поддержка формата изображений WebP.

Статья очень большая. В первую очередь рекомендую почитать тем, кто разрабатывает PWA.

#apple #safari #pwa

https://firt.dev/ios-14/

Томас Штайнер в блоге web.dev рассказал про File Handling API — "Let web applications be file handlers".

С помощью File Handling API можно открывать файлы из операционной системы в установленном pwa как в обычном нативном приложении. Это ещё один шаг в направлении сближения возможностей web и нативных платформ.

Для создания ассоциации файлов с pwa-приложением в манифесте в разделе file_handlers нужно указать соответствие между url и типом открываемых файлов. В самом приложении нужно обработать очередь файлов с помощью launchQueue:

if ('launchQueue' in window) {
  launchQueue.setConsumer((launchParams) => {
    // если очередь пустая, ничего не делать
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // обработка файлов
    }
  });
}

File Handling API находится на стадии активной разработки. На данный момент он доступен только в Chromium за экспериментальным флагом file-handling-api.

#pwa #experimental

https://web.dev/file-handling/

Томас Штайнер из Google рассказал, почему проект Excalidraw отказался от идеи создания десктопного приложения с помощью Electron — "Deprecating Excalidraw Electron in favor of the Web version".

Excalidraw — это клиентское web-приложение с открытым исходным кодом для создания диаграмм с возможностью совместного редактирования. Разработчики хотели сделать десктопную обёртку с помощью Electron для пубилкации в магазинах приложений, но это оказалось не очень простой задачей. В Electron нет поддержки автоматического обновления приложений на Linux, интеграция с нативными меню ОС не идеальна, для распространения приложения оно должно быть подписано цифровой подписью. Всё это решаемые проблемы, но у ребят не было желания заниматься поддержкой Electron-версии, поэтому они сфокусировались на добавлении в приложение PWA-фич.

В итоге по доступным возможностям получившееся приложение почти не уступает приложениям на Electron. В Excallidraw есть поддержка оффлайн-режима работы, простая установка и полноценная интеграция в ОС, прозрачная работа с файловой системой, поддержка drag'n'drop файлов, поддержка буфера обмена, есть регистрация приложения для открытия файлов с расширением .excalidraw.

Рекомендую почитать статью всем, кому интересно узнать про современные возможности PWA.

#electron #pwa

https://web.dev/deprecating-excalidraw-electron/

Вчера случился фейл, и пост не был опубликован, поэтому сегодня будет два поста — сейчас и попозже.

Давайте продолжим тему PWA (Progressive Web App). Недавно Максимилиано Фиртман опубликовал свой традиционный пост с исследованием рынка PWA — "Progressive Web Apps in 2021".

Самое интересное из статьи. За прошедший год количество сайтов, доступных как PWA, выросло в два раза. Количество PWA стабильно растёт, но пока ещё очень сильно отстаёт от доступных приложений на нативных платформах.

В конце 2020 года Microsoft предоставила возможность публиковать в магазине приложений PWA на базе Chromium. Apple зарелизила новую фичу WKWebView — App-Bound Domains. Благодаря ей появилась возможность публикации PWA в AppStore для iOS 14, iPadOS 14 и macOS 11 Big Sur.

Многие компании в 2020 году стали распространять свои приложения как PWA: AppStore Connect (Apple), Hangouts/Duo/YouTube Music/Stadia (Google), Luna (Amazon) и другие.

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

#pwa

https://firt.dev/pwa-2021/

SVGcode — конвертация растровых изображений в SVG

Томас Штайнер рассказал про новый инструмент для конвертирования растровых изображений в SVG — "SVGcode: a PWA to convert raster images to SVG vector graphics".

SVGCode — это PWA, с которым можно работать в вебе, оффлайн или установить локально. Поддерживаются все популярные растровые форматы — JPG, PNG, GIF, WebP, AVIF. Из коробки работает постеризация — уменьшение количества цветов изображения — для улучшения качества конвертации.

Приложение создано на базе WebAssembly-версии утилиты potrace. В SVGcode есть все фичи полноценных приложений: буфер обмена реализуется с помощью Async Clipboard API, доступ к файловой системе с помощью File System Access API, есть возможность регистрации SVGCode на уровне ОС в качестве обработчика файлов. Исходный код распространяется под лицензией GPL.

#svg #tool #pwa

https://web.dev/svgcode/