- Добавление поддержки приложений для веб-сайтов, использующих обработчики URI приложений Enable apps for websites using app URI handlers
- Регистрация для обработки ссылок вида http и https в манифесте приложения Register to handle http and https links in the app manifest
- Связывание приложения и веб-сайта в JSON-файле Associate your app and website with a JSON file
- подстановочные знаки; Wildcards
- Несколько приложений Multiple apps
- Обработка ссылок на активацию для привязки ссылки к содержимому Handle links on Activation to link to content
- Тестирование: локальное средство проверки Test it out: Local validation tool
- Тестирование: проверка в Интернете Test it: Web validation
- Создание прогрессивных веб-приложений с помощью ASP.NET Core Blazor WebAssembly Build Progressive Web Applications with ASP.NET Core Blazor WebAssembly
- Создание проекта на основе шаблона PWA Create a project from the PWA template
- Преобразование существующего приложения Blazor WebAssembly в PWA Convert an existing Blazor WebAssembly app into a PWA
Добавление поддержки приложений для веб-сайтов, использующих обработчики URI приложений Enable apps for websites using app URI handlers
Приложения для веб-сайтов связывают ваше приложение с веб-сайтом, чтобы при переходе по ссылке на ваш веб-сайт вместо открытия браузера запускалось ваше приложение. Apps for Websites associates your app with a website so that when someone opens a link to your website, your app is launched instead of opening the browser. Если ваше приложение не установлено, ваш сайт откроется в браузере, как обычно. If your app is not installed, your website opens in the browser as usual. Пользователи могут доверять такому подходу, поскольку только проверенные владельцы содержимого могут зарегистрироваться для предоставления ссылки. Users can trust this experience because only verified content owners can register for a link. Пользователи будут иметь возможность проверить все свои зарегистрированные ссылки в Интернете на приложение, перейдя к элементам «Параметры» > «Приложения» > «Приложения для веб-сайтов». Users will be able to check all of their registered web-to-app links by going to Settings > Apps > Apps for websites.
Для включения привязки приложения к веб-страницам необходимо выполнить следующие требования. To enable web-to-app linking you will need to:
- Определите URI, которые ваше приложение будет обрабатывать, в файле манифеста Identify the URIs your app will handle in the manifest file
- JSON-файл, определяющий связь между вашим приложением и веб-сайтом, A JSON file that defines the association between your app and your website. с именем семейства пакетов для приложения должен находиться в той же корневой папке, что и объявление манифеста приложения. with the app Package Family Name at the same host root as the app manifest declaration.
- Обработка активации в приложении. Handle the activation in the app.
Начиная с обновления Windows 10 Creators Update, поддерживаемые ссылки, нажатые в Microsoft ребр, будут запускать соответствующее приложение. Starting with the Windows 10 Creators update, supported links clicked in Microsoft Edge will launch the corresponding app. Поддерживаемые ссылки, которые были выбраны в других браузерах (например, Internet Explorer и т. д.), будут работать в режиме обзора. Supported links clicked in other browsers (for example, Internet Explorer, etc.), will keep you in the browsing experience.
Регистрация для обработки ссылок вида http и https в манифесте приложения Register to handle http and https links in the app manifest
Ваше приложение должно распознавать URI для веб-сайтов, которые оно будет обрабатывать. Your app needs to identify the URIs for the websites it will handle. Для этого добавьте регистрацию расширения Windows.appUriHandler в файл манифеста вашего приложения Package.appxmanifest. To do so, add the Windows.appUriHandler extension registration to your app’s manifest file Package.appxmanifest.
Например, если адрес вашего сайта — msn.com, следует внести следующую запись в манифест приложения: For example, if your website’s address is “msn.com” you would make the following entry in your app’s manifest:
Приведенное выше объявления регистрирует ваше приложение для обработки ссылок, относящихся к указанному узлу. The declaration above registers your app to handle links from the specified host. Если веб-сайт имеет несколько адресов (например, m.example.com, www . example.com и example.com), добавьте отдельную запись в поле для каждого адреса. If your website has multiple addresses (for example: m.example.com, www.example.com, and example.com) then add a separate entry inside of the for each address.
Связывание приложения и веб-сайта в JSON-файле Associate your app and website with a JSON file
Для обеспечения возможности открытия расположенного на сайте содержимого вашим приложением добавьте имя семейства пакетов вашего приложения в JSON-файл, расположенный в корневом каталоге вашего веб-сервера или в известном каталоге в домене. To ensure that only your app can open content on your website, include your app’s package family name in a JSON file located in the web server root, or at the well-known directory on the domain. Это указывает, что ваш сайт дает согласие на открытие содержимого в перечисленных приложениях. This signifies that your website gives consent for the listed apps to open content on your site. Имя семейства пакетов можно найти в разделе Packages в конструкторе манифеста приложения. You can find the package family name in the Packages section in the app manifest designer.
JSON-файл не должен иметь расширение .json. The JSON file should not have a .json file suffix.
Создайте JSON-файл (без расширения .json) с именем windows-app-web-link и укажите имя семейства пакетов вашего приложения. Create a JSON file (without the .json file extension) named windows-app-web-link and provide your app’s package family name. Например: For example:
Windows установит https-соединение с вашим сайтом и будет искать соответствующий JSON-файл на вашем сервере. Windows will make an https connection to your website and will look for the corresponding JSON file on your web server.
подстановочные знаки; Wildcards
В приведенном выше примере JSON-файла демонстрируется использование подстановочных символов. The JSON file example above demonstrates the use of wildcards. Подстановочные символы позволяют поддерживать разнообразные ссылки, используя меньше строк кода. Wildcards allow you to support a wide variety of links with fewer lines of code. Привязка приложений к Интернету поддерживает два типа подстановочных символов в файле JSON: Web-to-app linking supports two types of wildcards in the JSON file:
Подстановочный знак Wildcard | Описание Description |
---|---|
** _ ** _ | Представляет любую подстроку Represents any substring |
_ ?* _ ?* | Представляет единичный символ Represents a single character |
Например, в приведенном «excludePaths» : [ «/news/*», «/blog/*» ] выше примере приложение будет поддерживать все пути, которые начинаются с адреса вашего веб-сайта (например, MSN.com), за исключением тех, которые находятся в разделах /news/ и /blog/ . For example, given «excludePaths» : [ «/news/*», «/blog/*» ] in the example above, your app will support all paths that start with your website’s address (for example, msn.com), except those under /news/ and /blog/ . msn.com/weather.html будет поддерживаться, но не MSN.com/News/topnews.html. msn.com/weather.html will be supported, but not msn.com/news/topnews.html.
Несколько приложений Multiple apps
Если вы хотите привязать к своему сайту два приложения, укажите оба имени семейства пакетов приложения в вашем JSON-файле windows-app-web-link. If you have two apps that you would like to link to your website, list both of the application package family names in your windows-app-web-link JSON file. Возможна поддержка обоих приложений. Both apps can be supported. Пользователю будет предлагаться выбрать способ открытия ссылки по умолчанию, если установлены оба приложения. The user will be presented with a choice of which is the default link if both are installed. Если в дальнейшем пользователь захочет изменить способ открытия ссылок по умолчанию, это можно сделать в разделе Параметры > Приложения для веб-сайтов. If they want to change the default link later, they can change it in Settings > Apps for Websites. Разработчики также могут изменить файл JSON в любое время, и изменения могут вступить в силу в тот же день, но не позднее чем через 8 дней после обновления. Developers can also change the JSON file at any time and see the change as early as the same day but no later than eight days after the update.
Для обеспечения наилучшего взаимодействия пользователя с приложением используйте пути исключений, чтобы предотвратить обращение к доступному только через Интернет содержимому в поддерживаемых путях в файле JSON. To provide the best experience for your users, use exclude paths to make sure that online-only content is excluded from the supported paths in your JSON file.
Пути исключений проверяются в первую очередь, и, если обнаруживается соответствие, эта страница будет открыта в браузере, а не в заданном приложении. Exclude paths are checked first and if there is a match the corresponding page will be opened with the browser instead of the designated app. В приведенном выше примере «/Невс/ * » включает все страницы по этому пути, а «/Невс * » (без прямой косой черты «Новости») включает в себя любые пути в разделе «Новости * «, такие как «невслокал/», «невсинтернатионал/» и т. д. In the example above, ‘/news/*’ includes any pages under that path while ‘/news*’ (no forward slash trails ‘news’) includes any paths under ‘news*’ such as ‘newslocal/’, ‘newsinternational/’, and so on.
Обработка ссылок на активацию для привязки ссылки к содержимому Handle links on Activation to link to content
Перейдите к файлу App.xaml.cs в вашем проекте Visual Studio и добавьте обработку связанного содержимого в разделе OnActivated(). Navigate to App.xaml.cs in your app’s Visual Studio solution and in OnActivated() add handling for linked content. В следующем примере страница, открываемая в приложении, зависит от URI: In the following example, the page that is opened in the app depends on the URI path:
Важно! Не забудьте заменить заключительный фрагмент if (rootFrame.Content == null) кодом rootFrame.Navigate(deepLinkPageType, e); , как показано в примере выше. Important Make sure to replace the final if (rootFrame.Content == null) logic with rootFrame.Navigate(deepLinkPageType, e); as shown in the example above.
Тестирование: локальное средство проверки Test it out: Local validation tool
Вы можете тестировать конфигурацию своего приложения и веб-сайта путем запуска средства проверки регистрации хоста приложения, расположенного в папке: You can test the configuration of your app and website by running the App host registration verifier tool which is available in:
% WINDIR% \ system32 \ AppHostRegistrationVerifier.exe %windir%\system32\AppHostRegistrationVerifier.exe
Проверяйте конфигурацию своего приложения и веб-сайта путем запуска этого средства со следующими параметрами: Test the configuration of your app and website by running this tool with the following parameters:
AppHostRegistrationVerifier.exe hostname packagefamilyname filepath AppHostRegistrationVerifier.exe hostname packagefamilyname filepath
- Имя узла: ваш веб-сайт (например, microsoft.com). Hostname: Your website (for example, microsoft.com)
- Package Family Name: имя семейства пакетов вашего приложения Package Family Name (PFN): Your app’s PFN
- Путь к файлу: JSON-файл для локальной проверки (например, C: \ сомефолдер \ Windows-App-Web-Link). File path: The JSON file for local validation (for example, C:\SomeFolder\windows-app-web-link)
Если средство ничего не возвращает, проверки будут работать для этого файла при отправке. If the tool does not return anything, validation will work on that file when uploaded. Если возникает код ошибки, функция не будет работать. If there is an error code, it will not work.
Можно использовать следующий раздел реестра для принудительной проверки соответствия путей для неопубликованных приложений в рамках локальной проверки. You can enable the following registry key to force path matching for side-loaded apps as part of local validation:
KeyName: ForceValidation значение: 1 Keyname: ForceValidation Value: 1
Тестирование: проверка в Интернете Test it: Web validation
Закройте свое приложение, чтобы убедиться, что приложение запускается, когда вы нажимаете на ссылку. Close your application to verify that the app is activated when you click a link. Затем скопируйте адрес одного из поддерживаемых путей на вашем веб-сайте. Then, copy the address of one of the supported paths in your website. Например, если адрес веб-сайта — «msn.com», а один из путей поддержки — «path1», можно использовать http://msn.com/path1 For example, if your website’s address is “msn.com”, and one of the support paths is “path1”, you would use http://msn.com/path1
Убедитесь, что ваше приложение закрыто. Verify that your app is closed. Нажмите клавишу Windows + R, чтобы открыть диалоговое окно Выполнить, и вставьте ссылку в этом окне. Press Windows Key + R to open the Run dialog box and paste the link in the window. Вместо браузера должно запуститься ваше приложение. Your app should launch instead of the web browser.
Кроме того, можно протестировать приложение, запустив его из другого приложения с помощью API LaunchUriAsync. Additionally, you can test your app by launching it from another app using the LaunchUriAsync API. Можно также использовать этот API для тестирования на телефонах. You can use this API to test on phones as well.
Если вы хотите отслеживать логику активации протокола, установите точку останова в обработчике событий OnActivated. If you would like to follow the protocol activation logic, set a breakpoint in the OnActivated event handler.
Создание прогрессивных веб-приложений с помощью ASP.NET Core Blazor WebAssembly Build Progressive Web Applications with ASP.NET Core Blazor WebAssembly
Прогрессивное веб-приложение — это обычно одностраничное приложение (SPA), которое использует API и функциональные возможности современного браузера, реализуя свойственное классическим приложениям поведение. A Progressive Web Application (PWA) is usually a Single Page Application (SPA) that uses modern browser APIs and capabilities to behave like a desktop app. Blazor WebAssembly — это стандартизированная клиентская платформа веб-приложений с поддержкой API любых браузеров, в том числе API-интерфейсы прогрессивных веб-приложений (PWA), требуемых для реализации следующих возможностей: Blazor WebAssembly is a standards-based client-side web app platform, so it can use any browser API, including PWA APIs required for the following capabilities:
- работа в автономном режиме и мгновенная загрузка вне зависимости от скорости сети; Working offline and loading instantly, independent of network speed.
- возможность запуска в отдельном окне приложения, а не только в окне браузера; Running in its own app window, not just a browser window.
- запуск из меню «Пуск», меню закрепления или с начального экрана основной операционной системы (ОС); Being launched from the host’s operating system start menu, dock, or home screen.
- получение push-уведомлений от внутреннего сервера, даже если пользователь не работает с приложением; Receiving push notifications from a backend server, even while the user isn’t using the app.
- автоматическое обновление в фоновом режиме. Automatically updating in the background.
Слово прогрессивное используется для описания таких приложений по следующим причинам: The word progressive is used to describe such apps because:
- на начальном этапе пользователь может открывать и использовать приложение в своем веб-браузере аналогично любому другому одностраничному приложению; A user might first discover and use the app within their web browser like any other SPA.
- затем его можно установить в своей ОС и включить push-уведомления. Later, the user progresses to installing it in their OS and enabling push notifications.
Создание проекта на основе шаблона PWA Create a project from the PWA template
При создании приложения Blazor WebAssembly в диалоговом окне Создание нового проекта установите флажок Прогрессивное веб-приложение. When creating a new Blazor WebAssembly App in the Create a New Project dialog, select the Progressive Web Application check box:
Выполните следующую команду, чтобы создать проект PWA в командной оболочке с параметром —pwa : Use the following command to create a PWA project in a command shell with the —pwa switch:
В предыдущей команде параметр -o|—output создает новую папку для приложения с именем MyBlazorPwa . In the preceding command, the -o|—output option creates a new folder for the app named MyBlazorPwa .
При необходимости PWA можно настроить для приложения, созданного на основе размещенного шаблона ASP.NET Core. Optionally, PWA can be configured for an app created from the ASP.NET Core Hosted template. Сценарий прогрессивного веб-приложения не зависит от модели размещения. The PWA scenario is independent of the hosting model.
Преобразование существующего приложения Blazor WebAssembly в PWA Convert an existing Blazor WebAssembly app into a PWA
В этом разделе приводятся указания по преобразованию существующего приложения Blazor WebAssembly в PWA. Convert an existing Blazor WebAssembly app into a PWA following the guidance in this section.
В файле проекта приложения: In the app’s project file:
Добавьте указанное ниже свойство ServiceWorkerAssetsManifest в PropertyGroup : Add the following ServiceWorkerAssetsManifest property to a PropertyGroup :
Добавьте указанный ниже элемент ServiceWorker в ItemGroup : Add the following ServiceWorker item to an ItemGroup :
Для получения статических ресурсов воспользуйтесь одним из следующих подходов: To obtain static assets, use one of the following approaches:
Создайте отдельный новый проект PWA с помощью команды dotnet new в командной оболочке: Create a separate, new PWA project with the dotnet new command in a command shell:
В предыдущей команде параметр -o|—output создает новую папку для приложения с именем MyBlazorPwa . In the preceding command, the -o|—output option creates a new folder for the app named MyBlazorPwa .
Если вы не преобразуете приложение для использования в последнем выпуске, передайте параметр -f|—framework . If you aren’t converting an app for the latest release, pass the -f|—framework option. В следующем примере создается приложение для ASP.NET Core версии 3.1: The following example creates the app for ASP.NET Core version 3.1:
Перейдите по приведенному ниже URL-адресу в репозиторий GitHub для ASP.NET Core, который содержит ссылки на справочные материалы и ресурсы для ветви main . Navigate to the ASP.NET Core GitHub repository at the following URL, which links to main branch reference source and assets. Выберите выпуск, с которым вы работаете, в раскрывающемся списке Switch branches/tags (Переключение ветвей или тегов). Select the release that you’re working with from the Switch branches or tags drop-down list that applies to your app.
По предыдущим ссылкам в документации на справочные материалы по ASP.NET Core загружается ветвь main репозитория, которая представляет текущую разработку единицы продукта для следующего выпуска ASP.NET Core. Documentation links to the ASP.NET Core reference source load the repository’s main branch, which represents the product unit’s current development for the next release of ASP.NET Core. Чтобы выбрать ветвь для другого выпуска, используйте раскрывающийся список Switch branches/tags (Переключение ветвей или тегов). To select the branch for a different release, use the Switch branches or tags drop-down list to select the branch. Например, выберите ветвь release/5.0 для выпуска ASP.NET Core 5.0. For example, select the release/5.0 branch for the ASP.NET Core 5.0 release.
Создайте отдельный новый проект PWA с помощью команды dotnet new в командной оболочке. Create a separate, new PWA project with the dotnet new command in a command shell. Передайте параметр -f|—framework , чтобы выбрать версию. Pass the -f|—framework option to select the version. В следующем примере создается приложение для ASP.NET Core версии 3.1: The following example creates the app for ASP.NET Core version 3.1:
В предыдущей команде параметр -o|—output создает новую папку для приложения с именем MyBlazorPwa . In the preceding command, the -o|—output option creates a new folder for the app named MyBlazorPwa .
Перейдите по следующему URL-адресу в репозиторий GitHub для ASP.NET Core, который содержит ссылки на справочные материалы и ресурсы по выпуску 3.1: Navigate to the ASP.NET Core GitHub repository at the following URL, which links to 3.1 release reference source and assets:
URL-адрес шаблона проекта Blazor WebAssembly изменился после выпуска ASP.NET Core 3.1. The URL for Blazor WebAssembly project template changed after the release of ASP.NET Core 3.1. Справочные ресурсы по всем выпускам доступны в справочных материалах по ASP.NET Core. Reference assets for any release are available from the ASP.NET Core reference source. Выберите выпуск, с которым вы работаете, в раскрывающемся списке Switch branches/tags (Переключение ветвей или тегов). Select the release that you’re working with from the Switch branches or tags drop-down list that applies to your app.
По предыдущим ссылкам в документации на справочные материалы по ASP.NET Core загружается ветвь main репозитория, которая представляет текущую разработку единицы продукта для следующего выпуска ASP.NET Core. Documentation links to the ASP.NET Core reference source load the repository’s main branch, which represents the product unit’s current development for the next release of ASP.NET Core. Чтобы выбрать ветвь для другого выпуска, используйте раскрывающийся список Switch branches/tags (Переключение ветвей или тегов). To select the branch for a different release, use the Switch branches or tags drop-down list to select the branch. Например, выберите ветвь release/5.0 для выпуска ASP.NET Core 5.0. For example, select the release/5.0 branch for the ASP.NET Core 5.0 release.
Скопируйте следующие файлы из папки wwwroot источника в созданном вами приложении или из справочных ресурсов в репозитории GitHub dotnet/aspnetcore в папку wwwroot приложения: From the source wwwroot folder either in the app that you created or from the reference assets in the dotnet/aspnetcore GitHub repository, copy the following files into the app’s wwwroot folder:
- icon-512.png
- manifest.json
- service-worker.js
- service-worker.published.js
В файле wwwroot/index.html приложения: In the app’s wwwroot/index.html file:
Добавьте элементы