16 ноября 2018 г.
Вы хотите запустить свое приложение Ionic 4 в режиме PWA «prod» на своем локальном компьютере для разработки? Убедитесь, что вы используете этот режим только при работе с иконками PWA, цветами и сервис-воркером. После того, как они заработают так, как вы хотите, удалите работника службы в своем браузере и используйте ionic serve для работы над своим приложением. В противном случае сервисный работник будет продолжать кэшировать ваши файлы, пока вы разрабатываете приложение.
Это было создано и протестировано на macOS Mojave с использованием Ionic CLI 4.3.0, Ionic 4.0.0-beta.16 и Angular 7.0.0.
Установите инструменты
Ionic предназначен для создания и запуска вашего проекта (последняя версия использует Angular 7), а http-сервер — для запуска и тестирования вашего проекта в качестве PWA.
sudo npm install -g ionic@latest http-server
Создать проект
Перейдите в каталог ваших проектов и запустите команду ionic, чтобы создать проект под названием «ionic4pwa» из стартового меню. Вы можете ответить Нет на вопрос об использовании Ionic Pro SDK.
cd ~/Projects ionic start ionic4pwa sidemenu --type=angular
Запустите ионный проект
Команда ionic serve создаст ваш проект (в режиме разработки), запустит сервер и откроет проект в браузере. Это обеспечит работоспособность проекта и готовность добавить код PWA. (Ionic использует порт 8100 для обслуживания вашего приложения.)
cd ionic4pwa ionic serve
Нажмите ctrl-c, чтобы остановить сервер и вернуться к командной строке.
Добавить PWA
Добавьте стандартный компонент angular pwa с именем проекта по умолчанию «app» (он находится в файле angular.json).
ng add @angular/pwa --project app
Если у вас есть ионный проект, использующий Angular 6.x (проверьте файл package.json), вам нужно будет указать более старую версию pwa: ng add @angular/pwa@v6-lts --project app.
Создайте PWA
Соберите проект в производственном режиме, который активирует рабочий код службы PWA.
ionic build --prod
Запустите проект PWA
Вручную запустите сервер в каталоге www без кэширования файлов (-c-1).
http-server www -c-1
Проверить в Chrome
Откройте хром, перейдите по адресу http://localhost:8080 и проверьте страницу (откройте инструменты разработчика).
Проверьте PWA на вкладке приложения
Перейдите на вкладку «Приложение» в инструментах разработчика Chrome и убедитесь, что на странице «Манифест» отображается файл манифеста (/manifest.json), а на странице «Служебные работники» отображается ваш рабочий процесс (ngsw-worker.js).
Проверка кэширования Service Worker
Перейдите на вкладку «Сеть» в Chrome, перезагрузите приложение и убедитесь, что в столбце размера указано «(из ServiceWorker)» для всех кэшируемых файлов.
Как удалить PWA
Когда вы вносите изменения в свое приложение или сервис-воркер, вам необходимо отменить регистрацию сервис-воркера (в Chrome › вкладка «Приложение» › страница «Сервис-воркеры») ИЛИ очистить данные сайта (в нижней части Chrome › вкладка «Приложение» › страница «Очистить хранилище»). .
Одна нерешенная проблема: Маяк
Я не могу Выполнить аудит на вкладке Chrome › Audits на локальном хосте из-за ошибки 404 во время тестов на пути /home. Когда я разворачиваю на хостинге firebase и провожу там аудит, он работает отлично (и получает 100 баллов на PWA). Если кто-нибудь знает простое решение для запуска аудита на локальном хосте, сообщите мне.
Репозиторий Github
Код этого проекта вы найдете на https://github.com/dolthead/ionic4pwa. На ветке master всего 2 коммита: исходный код от команды ionic start и код после добавления функционала PWA.
