Уникальная идентификация PWA с помощью свойства идентификатора манифеста веб-приложения.

Пит ЛеПейдж

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

Чтобы решить эту проблему, в спецификации манифеста веб-приложения появилось новое необязательное свойство id , которое позволяет вам явно определить идентификатор, используемый для вашего PWA. Добавление свойства id в манифест устраняет зависимость от start_url или местоположения манифеста и позволяет их обновлять в будущем.

Что делает свойство id ?

Свойство id представляет идентификатор PWA для браузера. Когда браузер видит манифест, который не имеет идентификатора, соответствующего уже установленному PWA, он будет рассматривать его как новый PWA, даже если он обслуживается с того же URL-адреса, что и другой PWA. Но если он увидит манифест с идентификатором, соответствующим уже установленному PWA, он будет считать его установленным PWA.

Поддержка браузера

Поддержка свойства id появилась в Chrome 96.

Что делать, если у меня есть приложение без id ?

Вам ничего не нужно делать , и ничего не сломается, если вы не добавите id в манифест своего веб-приложения (при условии, что start_url и путь к манифесту остаются прежними). Чтобы подготовить PWA к будущему, вы можете добавить свойство id в манифест вашего веб-приложения.

Как определить и установить свой id ?

Самый безопасный и точный способ определить id PWA — проверить значение, рассчитанное Chrome.

  1. Используя Chrome 96 или более поздней версии, откройте панель «Манифест» панели «Приложение» в DevTools.
  2. Примечание под свойством «Вычисляемый идентификатор приложения» появится, если id не указан в файле манифеста веб-приложения.
  3. Скопируйте значение id , указанное в примечании (см. снимок экрана ниже).
  4. Добавьте свойство id в манифест веб-приложения, используя значение id указанное в примечании.

Вычисленный идентификатор приложения на панели приложений DevTools.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Что, если я не установлю id ?

Не волнуйтесь, ничего не сломается . Начиная с Chrome 96, браузер будет генерировать id , если его нет в манифесте, на основе start_url в манифесте веб-приложения.

Добавление id в манифест веб-приложения позволяет изменить start_url и путь к манифесту (если и только если их конкретное происхождение остается прежним!), поскольку браузер будет идентифицировать PWA на основе указанного id , а не start_url или пути к манифесту.

Как мне это проверить?

Чтобы проверить поведение, выполните следующие действия:

  1. Установите PWA.
  2. Откройте about://web-app-internals/ и проверьте свойства manifest_id и start_url для установленного PWA.
  3. Добавьте свойство id в манифест веб-приложения, выполнив действия, описанные в разделе «Как определить и установить свой id выше.
  4. Перезапустите браузер, используя chrome://restart , запустите PWA из about://apps , затем закройте PWA, чтобы принудительно обновить файл манифеста.
  5. Откройте about://web-app-internals/ и проверьте свойство manifest_id установленного PWA, чтобы убедиться, что оно не изменилось.
  6. Измените start_url в манифесте веб-приложения.
  7. Перезапустите браузер, используя chrome://restart , запустите PWA из about://apps , затем закройте PWA, чтобы принудительно обновить файл манифеста.
  8. Откройте about://web-app-internals/ и проверьте свойство start_url установленного PWA, чтобы убедиться, что оно обновлено должным образом.

Дополнительные ресурсы