В середине 2018 года я играл с Parcel, чтобы создать VueJs прогрессивное веб-приложение (PWA).
Тогда это было как-то необычно.
Переработав его, я могу сказать, как он сравнивается с Webpack и как Parcel улучшает свой опыт PWA.
Напоминания
Если вы уже знакомы с названием, можете пропустить эту часть 🥳.
Прогрессивное веб-приложение (PWA)
Короче говоря, PWA — это веб-сайт, который использует определенный набор веб-технологий, чтобы его можно было использовать как обычное приложение для iOS/Android.
Чтобы немного покопаться в этом:
- это не ограничивается мобильным устройством
- он не ограничен какой-либо структурой, ему просто нужно использовать веб-технологии
- это позволяет автономную поддержку
- это позволяет уведомления
- и многое другое…
Это необходимо:
- что вы размещаете свой веб-сайт в HTTPS
- браузер, поддерживающий Service Worker API
- файл веб-манифеста: файл JSON, который предоставляет информацию о вашем веб-приложении.
- service worker: файл JavaScript, который использует SW API для выполнения каких-то действий (да, вещей, потому что вы можете делать много-много вещей)
Вы можете написать последнее в предпочитаемом вами текстовом редакторе, но…
… рабочий ящик
— это инструмент, разработанный и поддерживаемый Google, который поможет вам написать файл сервисного работника.
Даже если вы можете придумать свой собственный SW-файл, я лично предпочитаю использовать инструменты, которые упрощают мой процесс и предотвращают глупые ошибки.
Если вы еще этого не сделали, попробуйте. Документация хорошая, а инструмент прост в использовании.
И самое главное: Workbox действительно помогает.
Посылка 1.11.0
Это молниеносно быстрый сборщик веб-приложений, не требующий настройки.
Он помогает людям компилировать вещи с помощью веб-технологий (HTML, CSS и JS).
Это означает быть более простой альтернативой веб-пакету (у которого та же цель, и главный недостаток которого — сложность настройки).
Вы можете проверить этот пост о Parcel, если вам нужна дополнительная информация. (Да, самореклама 😎)
Как было с Parcel в середине 2018 года
Основной принцип Parcel заключается в том, что он анализирует точку входа вашего приложения, проходит по любому пути к файлу внутри него и компилирует/оптимизирует/хэширует их.
Это может быть почти что угодно (см. типы активов в документе! ), так что HTML, CSS, JS, изображения, JSON… ВСЕ!
Так что это хорошо и хорошо, но это может быть проблемой, так как Parcel имеет тенденцию быть слишком жадным (быть слишком жадным плохо).
Чтобы иметь PWA, нам нужно (по порядку):
1/ есть несколько значков приложений
2/ есть manifest.webmanifest файл
3/ создаем наш HTML/JS/CSS /ресурсы:
• наш HTML должен ссылаться на манифест с помощью <link rel="manifest" href="/manifest.webmanifest">
• наш будущий сервис-воркер должен вызываться в нашем JS-файле
4/ создайте сервис-воркер с помощью Workbox, который будет кэшировать любые ресурсы, необходимые для приложения
5/ …и все 🎉
Но в это время Parcel будет иметь:
- перешел по ссылке на наш манифест и преобразовал ее в файл js 😨
- следил за регистрацией нашего сервис-воркера и ломается, потому что его еще не существует 😰
- и так 😱
Для того, чтобы этого избежать, вам необходимо:
- избегайте вашего HTML-файла в качестве точки входа (поэтому компилируйте только JS/CSS)
- приходите с еще одним упрощенным HTML-файлом для использования сервера Parcel dev
- сгенерировать сервис-воркера с помощью workbox-build
- создать другой рабочий HTML-код, который:
— ссылается на файл манифеста
— содержит тег script, который устанавливает наш сервис-воркер (таким образом Parcel не будет анализировать его)
manifest.webmanifest
с веб-пакетом
В истории Webpack существует плагин webpack-pwa-manifest, который позаботится о:
- создание иконок
- создание файла манифеста
- вставка его в HTML
- позаботьтесь о старых проприетарных тегах в iOS, если это необходимо
и это УЖАСНО.
с посылкой
Теперь он поддерживает НЕ анализ/изменение вашего файла манифеста, что было настоящим обломом в предыдущих версиях.
Создание собственного файла манифеста само по себе не является проблемой. Это всего лишь небольшой файл JSON, который со временем сильно не изменится.
Что касается значков, я нашел node-image-resizer, который поможет вам создать значки разных размеров для приложений. И поскольку он использует jimp под капотом, вам не нужно будет устанавливать какие-либо внешние зависимости (например, GraphicMagic).
Так что, даже если это менее «подключи и работай», чем использование веб-пакета, теперь это намного лучше, чем не использовать ваш HTML-файл в качестве точки входа (в основном для сервера разработки).
Я хотел бы увидеть веб-пакет-pwa- манифестные альтернативы, но мой собственный останется в моем списке проектов с открытым исходным кодом, чтобы сделать это, я знаю, что не найду времени, чтобы сделать, но это может быть полезно для сборки 😔
сервисный работник
с веб-пакетом
Google разрабатывает и поддерживает workbox-webpack-plugin, который позволяет создавать рабочий файл.
На inject mode у него есть несколько приятных дополнений, а именно:
- внедрение библиотеки workbox для вас
- создание отдельного файла манифеста предварительного кэша (я считаю, что все эти пути должны быть отделены от «настоящего» кода работника службы)
с посылкой
Есть parcel-plugin-sw-cache, который работает достаточно хорошо. Нет приятных дополнений к workbox-webpack-plugin, но он справляется со своей задачей.
Кроме того, конфигурация зависит от package.json, поэтому она может быть менее гибкой, чем конфигурация веб-пакета JS.
Но чтобы предотвратить слишком жадное поведение Parcel, вам нужно использовать небольшую хитрость, чтобы зарегистрировать вашего сервис-воркера так, чтобы Parcel этого не заметил:
Вывод
Webpack предлагает более плавный опыт благодаря более зрелой экосистеме, но работа с Parcel для создания PWA намного более плавная, чем была. Хорошая игровая посылка! 🏆
Основное небольшое неудобство заключается в том, чтобы генерировать разные значки приложений… что не так уж и плохо.
Вы можете найти веб-приложения здесь:
Первоначально опубликовано на hiswe.github.io.
