tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

quick fix

pull/12908/head
Hamza Albreem 4 years ago
committed by GitHub
parent
19cebe926c
commit
68f7daac2a
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      docs/en/UI/Blazor/Pwa-Configuration.md

34
docs/en/UI/Blazor/Pwa-Configuration.md
View File

@ -2,7 +2,7 @@
[PWAs (Progressive Web Apps)](https://web.dev/progressive-web-apps/) are developed using specific technologies to allow applications to take advantage of both web and native app features.
Here is the list of some features that PWA provides:
Here is a list of some features that PWA provides:
- **Installable**: A web application can be installed and used like a native/desktop application.
- **Network Independent**: PWAs support offline scenarios. It can work offline or with a poor network connection.
@ -10,19 +10,19 @@ Here is the list of some features that PWA provides:
## Creating a Project with PWA Support
You can create a new web application with PWA support for **Blazor WebAssembly** by using the `--pwa` option like below:
You can create a new web application with PWA support for **Blazor WebAssembly** by using the `--pwa` option as below:
```bash
abp new Acme.BookStore -t blazor --pwa
```
After this command, your application will be created and some additional PWA related files (such as **manifest**, **icons**, **service workers**, etc.) will be added. Then, you can get full advantages of web and native app features.
After this command, your application will be created and some additional PWA related files (such as **manifest**, **icons**, **service workers**, etc.) will be added. Then, you can get the full advantages of web and native app features.
## Adding PWA Support to an Existing Project
If you started your application without PWA support, it's possible to change your mind and get the benefit of PWA later. You only need to make some configurations as listed below:
### 1-) Add `manifest.json` File
### 1-) Add the `manifest.json` File
> Web Application Manifest provides information about a web application in a JSON text file and it's required for the web application to be downloaded and be presented to the user similarly to a native application.
@ -67,7 +67,7 @@ You can add some icons for your application to be seen in specific screen sizes
You need to create `service-worker.js` and `service-worker.published.js` files under the **wwwroot** folder of your project. These files will be used by your project to determine which PWA features you want to use.
You can get the simple configurations for [service-worker.js](https://github.com/abpframework/abp/blob/dev/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/service-worker.js) and [service-worker.published.js](https://github.com/abpframework/abp/blob/dev/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/service-worker.published.js) files from our [template](https://github.com/abpframework/abp/tree/dev/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot).
You can get the simple configurations for the [service-worker.js](https://github.com/abpframework/abp/blob/dev/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/service-worker.js) and [service-worker.published.js](https://github.com/abpframework/abp/blob/dev/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/service-worker.published.js) files from our [template](https://github.com/abpframework/abp/tree/dev/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot).
After the related service worker files are added, then we need to define them in our `.csproj` file to notify our application. So open your `*.csproj` file and add the following content:
@ -86,8 +86,8 @@ After the related service worker files are added, then we need to define them in
</ItemGroup>
```
* With the `ServiceWorkerAssetsManifest` MSBuild property, your Blazor application generates a service worker assets manifest with the specified name. This file will be generated in the path of `/bin/Debug/{TARGET FRAMEWORK}/wwwroot/service-worker-assets.js` on runtime. This manifest can list, all resources such as images, stylesheets, JS files etc. by examining the `service-worker.published.js` file (regarding to your configurations in this file).
* `ServiceWorker` property is used to define which files need to be accounted as **Service Worker** files and service workers are used to determine which PWA features should be used.
* With the `ServiceWorkerAssetsManifest` MSBuild property, your Blazor application generates a service worker assets manifest with the specified name. This file will be generated in the path of `/bin/Debug/{TARGET FRAMEWORK}/wwwroot/service-worker-assets.js` on runtime. This manifest can list all resources such as images, stylesheets, JS files etc. by examining the `service-worker.published.js` file (regarding to your configurations in this file).
* The `ServiceWorker` property is used to define which files need to be accounted as **Service Worker** files and service workers are used to determine which PWA features should be used.
### 4-) Define Web Application Manifest and Register Service Workers
@ -125,7 +125,7 @@ You've added the related files and made the related configurations with this fin
Application Template produces two service worker files, if you create your application with PWA support:
* The `service-worker.js` file is used during development and does nothing by default.
* The `service-worker.published.js` file, which is used after the app is published. Caches specified file extensions and support offline scenarios by default (uses a *cache-first* strategy). A user must first visit the app while they're online. The browser automatically downloads and caches all of the resources required to operate offline and then when the network connection is disconnected, it can be used like before.
* The `service-worker.published.js` file, which is used after the app is published. Caches certain file extensions and supports offline scenarios by default (uses a *cache-first* strategy). A user must first visit the app while they're online. The browser automatically downloads and caches all of the resources required to operate offline and then when the network connection is disconnected, it can be used like before.
You can configure those files as mentioned in the *Customize Service Workers* section down below.
@ -133,13 +133,13 @@ You can configure those files as mentioned in the *Customize Service Workers* se
## Customization
You can customize the `manifest.json`, `service-worker.js` and `service-worker.published.js` files generated by ABP Framework if you created an application with PWA support.
You can customize the `manifest.json`, `service-worker.js` and `service-worker.published.js` files generated by the ABP Framework if you created an application with PWA support.
### Customize Web Application Manifest (`manifest.json`)
> The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched. - From [web.dev](https://web.dev/add-manifest)
You can customize the `manifest.json` file (under the **wwwroot** folder) to your needs. You can set **name**, **short_name**, **icons**, **description**, **start_url**, etc. You can see an example `manifest.json` file content below:
You can customize the `manifest.json` file (under the **wwwroot** folder) to your needs. You can set the **name**, **short_name**, **icons**, **description**, **start_url**, etc. You can see an example `manifest.json` file content below:
```json
{
@ -164,18 +164,18 @@ You can customize the `manifest.json` file (under the **wwwroot** folder) to you
}
```
* You must provide at least the `short_name` or `name` property. If both of these properties are provided, `short_name` property is used almost anywhere like the **launcher** and the **home** screen.
* You must provide at least the `short_name` or `name` property. If both of these properties are provided, the `short_name` property is used almost anywhere like the **launcher** and the **home** screen.
* For Chromium based browsers, you must provide at least a *192x192* px icon and a *512x512* px icon. If only those two icon sizes are provided, the browsers will automatically scale the icons to fit the device. If you don't want to let the browser auto-scale icons, you need to add icons for other sizes too.
> You can see the other properties from [here](https://web.dev/add-manifest/#manifest-properties).
### Customize Service Workers
If you create your application with PWA support, two service worker file will be generated: `service-worker.js` and `service-worker.published.js`.
If you create your application with PWA support, two service worker files will be generated: `service-worker.js` and `service-worker.published.js`.
ABP Framework's service-worker files are same as the .NET Core's and it's valid for most of the time and you'll probably not need to configure it manually. However, if you want to configure the service workers you can do it easily.
ABP Framework's service-worker files are the same as the .NET Core's and it's valid for most of the time and you'll probably not need to configure it manually. However, if you want to configure the service workers you can do it easily.
You can configure the `service-worker.js` file for debug mode and the `service-worker.published.js` file for release mode according to your need.
You can configure the `service-worker.js` file for debug mode and the `service-worker.published.js` file for release mode according to your own needs.
#### `service-worker.js`
@ -240,10 +240,10 @@ async function onFetch(event) {
}
```
* You can configure this file, if you want to cache additional file extensions such as `.webp` or etc. Also, you can use some additional features of PWA by configuring this file.
* You can configure this file if you want to cache additional file extensions such as `.webp` or etc. You can also use some additional features of PWA by configuring this file.
* By default, dll files (`*.dll`) and some static assets (`*.js`, `*.css`, etc.) are cached.
* Cached files will be stored in the `service-worker-assets.js` (**/bin/Debug/{TARGET FRAMEWORK}/wwwroot/service-worker-assets.js**). You can change this file name by renaming it in between `ServiceWorkerAssetsManifest` tags on your `*.csproj` file.
* Cached files will be stored in the `service-worker-assets.js` (**/bin/Debug/{TARGET FRAMEWORK}/wwwroot/service-worker-assets.js**). You can change this file name by renaming it in between the `ServiceWorkerAssetsManifest` tags on your `*.csproj` file.
## See Also
* [ASP.NET Core Blazor Progressive Web Application (PWA)](https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app).
* [ASP.NET Core Blazor Progressive Web Application (PWA)](https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app).

Write Preview
Loading…
Cancel
Save