Обука
Путања учења
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization
Овај прегледач више није подржан.
Надоградите на Microsoft Edge бисте искористили најновије функције, безбедносне исправке и техничку подршку.
This article lists best practices to make your PWA a great application for your users. When users install applications, they have certain expectations of what these applications can do, such as work offline, integrate deeply into the operating system, or perform non-trivial computing tasks.
Read the best practices on this page to learn to make your PWA look and feel like what users expect.
This page assumes that you already have a PWA. To learn more about building a simple PWA first, see Get started with PWAs.
Your app can already be installed using the App available button in the browser address bar if you follow the steps in Get started with PWAs.
A custom installation experience, in the app user interface, can be more obvious to your users and lead to more installations.
To create a custom installation experience, use the beforeinstallprompt event and provide your own installation button in your app.
To see a code example of the beforeinstallprompt
event, check the PWAmp demo source code. To test the custom installation, open the PWAmp demo, and then click More tools (...
) > About > Install app in the app.
Many users will look for your app on their device's app store. Downloading from an official app store provides a trustworthy and familiar experience for your users.
You can publish your PWA to the Microsoft Store for Windows, the App store for iOS, or the Play Store for Android, by using PWA Builder.
To learn how to use PWA Builder and publish to the Microsoft Store, see Publish a PWA to the Microsoft Store.
Many users find apps on their devices by their icons. To help users find your app more easily, choose a recognizable icon, make sure it stands out, and make sure that it adapts to the devices your app is installed on.
On Windows, your app icon appears in many places such as the taskbar, the Start menu, or the Alt+Tab task switcher. Provide multiple image sizes to ensure your app icon is easily recognizable in these places.
To learn which image size are needed on Windows, see Icon image sizes in Define icons and a theme color.
Native applications have their own dedicated windows. PWAs can define how they appear in the host operating system.
To display your PWA in a standalone window with no browser navigation user interface, use the display member in your web app manifest file, and set it to standalone
.
If your app has several HTML pages, make sure users can go between the pages using buttons or links within your app. Use the minimal-ui
value of the display
manifest member to let users go between pages using previous and next buttons rendered by the browser in your app title bar.
To create a more immersive, native-like experience, desktop PWAs can also choose to hide the default operating system title bar and display their own content instead. Displaying content where the title bar normally is can help PWAs feel more like native apps. Many desktop applications, such as Visual Studio Code, Microsoft Teams, and Microsoft Edge already do this.
To replace the title bar, see Display content in the title bar area using Window Controls Overlay.
Users expect installed applications to integrate with the host operating system in some way.
Your app can provide a more familiar, engaging, and seamless experience by using operating system integration features such as shortcuts, sharing between apps, badging, file handling, or link handling.
Shortcuts make it possible to define direct links to your app functionality by right-clicking the app icon.
See Define app shortcuts (long-press or right-click menus).
PWAs can share content to other apps, and receive content from other apps, via the operating system's share dialog.
See Share content with other apps.
PWAs can display status badges on their app icons to alert users of the presence of new content in the app.
See Display a badge on the app icon in Re-engage users with badges, notifications, and push messages.
You can register your PWA to be a file handler for certain file types.
Use the PWA file handler feature to automatically launch your app when certain file are opened by the user in the operating system.
Register your app is a link or protocol handler to automatically launch your app when certain links are used in other applications.
See Handle links to a PWA and Handle protocols in a PWA.
Create your own app widgets to display in the operating system widget dashboard such as the Windows 11 Widgets Board.
See Display a PWA widget in the Windows Widgets Board.
When connected to a slow or unreliable network, or even with no internet access, installed applications can usually still be opened and used. Users of installed applications expect them to continue working under these conditions. They also expect the network-dependent parts of an application to gracefully handle the lack of connection with a custom message and local caching capabilities.
To improve retention, add a service worker to your PWA. You can use the service worker's Fetch
and Cache
APIs, and local data storage access, to provide a good offline experience for your users.
You can provide a good offline experience in several steps:
See also:
To provide a rich and fast experience to your users, use the different persistent data storage options that are available to PWAs, such as:
To learn more, see Store data on the device.
Installed apps typically perform advanced computing scenarios that websites usually don't support.
To provide an app-like experience, use advanced web capabilities such as:
Ensure your app's most important tasks can be done across all browsers and devices. See Test on multiple browsers and devices.
Users install apps on their devices to achieve specific tasks, and they have certain expectations about how these tasks are presented in the user interface and how they integrate in the host operating system.
To let your users achieve your app's most important tasks easily and in a familiar way, make design choices such as:
system-ui
font to make your content feel more native and load faster.background-color
and theme-color
in your web app manifest to customize the application window. See Web app manifests.With Progressive Web Apps, you deliver an app for all devices, from one codebase. To make sure your app works everywhere, test it on multiple browsers, operating systems, and devices.
Make sure the most important scenarios of your app work everywhere, and progressively enhance the experience on supporting devices.
To test your app in multiple environments, consider the following techniques:
To improve discovery and sharing of your app through the web and social media, route each page of your app to a unique URL and support Deep linking.
Local: PWA:
Local: DevTools:
MDN:
Wikipedia:
GitHub:
Other:
Обука
Путања учења
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization
Документација
Progressive Web App demos - Microsoft Edge Developer documentation
Sample Progressive Web Apps that demonstrate how to use PWA features.
What's New in PWAs - Microsoft Edge Developer documentation
New features and origin trials for Progressive Web Apps (PWAs).
Progressive Web Apps (PWAs) documentation - Microsoft Edge Developer documentation
Develop a web app that can be installed and run on all devices, from one codebase. Provide a native-like UX, or run in the browser.