我在 Angular中配置了PWA 的应用程序，除了缓存assets/images，我还想缓存 Firebase存储中的图像我在线时加载了
我的应用程序使用了启用了数据持久性的 Cloud Firestore 数据库。当我需要以脱机模式在系统上加载经过身份验证的用户的化身时，它会尝试通过photoURL字段进行加载，但是由于它处于脱机状态，所以我无法加载该图像，因此该图像不会显示，并且对用户不合法。
在我的代码中，按如下方式加载图像：
<img class="avatar mr-0 mr-sm-16" src="{{ (user$ | async)?.photoURL || 'assets/images/avatars/profile.svg' }}">
我希望它脱机时会在缓存中的某个位置搜索上载的图像。
每次加载图像以调用某种方法来存储缓存的图像或某些东西时，我都会很烦，我知道有可能，但是我不知道该怎么做。
是否可以通过ngsw-config.json配置文件来做到这一点？
ngsw-config.json：
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/css?family=Muli:300,400,600,700"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
答案 0 :(得分：0)
是的，有可能，我尝试过并为我工作，我有一个带有离子型和角度7的pwa，在我的'ngsw-config.json'中，我使用了以下配置：
Function Set-Window {
<#
.SYNOPSIS
Sets the window size (height,width) and coordinates (x,y) of
a process window.
.DESCRIPTION
Sets the window size (height,width) and coordinates (x,y) of
a process window.
.PARAMETER ProcessName
Name of the process to determine the window characteristics
.PARAMETER X
Set the position of the window in pixels from the top.
.PARAMETER Y
Set the position of the window in pixels from the left.
.PARAMETER Width
Set the width of the window.
.PARAMETER Height
Set the height of the window.
.PARAMETER Passthru
Display the output object of the window.
.NOTES
Name: Set-Window
Author: Boe Prox
Version History
1.0//Boe Prox - 11/24/2015
- Initial build
1.1//JosefZ (https://superuser.com/users/376602/josefz) - 19.05.2018
- treats more process instances of supplied process name properly
.OUTPUT
System.Automation.WindowInfo
.EXAMPLE
Get-Process powershell | Set-Window -X 2040 -Y 142 -Passthru
ProcessName Size TopLeft BottomRight
----------- ---- ------- -----------
powershell 1262,642 2040,142 3302,784
Description
-----------
Set the coordinates on the window for the process PowerShell.exe
#>
[OutputType('System.Automation.WindowInfo')]
[cmdletbinding()]
Param (
[parameter(ValueFromPipelineByPropertyName=$True)]
$ProcessName,
[int]$X,
[int]$Y,
[int]$Width,
[int]$Height,
[switch]$Passthru
)
Begin {
Try{
[void][Window]
} Catch {
Add-Type @"
using System;
using System.Runtime.InteropServices;
public class Window {
[DllImport("user32.dll")]
[return: MarshalAs(UnmanagedType.Bool)]
public static extern bool GetWindowRect(IntPtr hWnd, out RECT lpRect);
[DllImport("user32.dll")]
[return: MarshalAs(UnmanagedType.Bool)]
public extern static bool MoveWindow(IntPtr handle, int x, int y, int width, int height, bool redraw);
}
public struct RECT
{
public int Left; // x position of upper-left corner
public int Top; // y position of upper-left corner
public int Right; // x position of lower-right corner
public int Bottom; // y position of lower-right corner
}
"@
}
}
Process {
$Rectangle = New-Object RECT
$Handles = (Get-Process -Name $ProcessName).MainWindowHandle ### 1.1//JosefZ
foreach ( $Handle in $Handles ) { ### 1.1//JosefZ
if ( $Handle -eq [System.IntPtr]::Zero ) { Continue } ### 1.1//JosefZ
$Return = [Window]::GetWindowRect($Handle,[ref]$Rectangle)
If (-NOT $PSBoundParameters.ContainsKey('Width')) {
$Width = $Rectangle.Right - $Rectangle.Left
}
If (-NOT $PSBoundParameters.ContainsKey('Height')) {
$Height = $Rectangle.Bottom - $Rectangle.Top
}
If ($Return) {
$Return = [Window]::MoveWindow($Handle, $x, $y, $Width, $Height,$True)
}
If ($PSBoundParameters.ContainsKey('Passthru')) {
$Rectangle = New-Object RECT
$Return = [Window]::GetWindowRect($Handle,[ref]$Rectangle)
If ($Return) {
$Height = $Rectangle.Bottom - $Rectangle.Top
$Width = $Rectangle.Right - $Rectangle.Left
$Size = New-Object System.Management.Automation.Host.Size -ArgumentList $Width, $Height
$TopLeft = New-Object System.Management.Automation.Host.Coordinates -ArgumentList $Rectangle.Left, $Rectangle.Top
$BottomRight = New-Object System.Management.Automation.Host.Coordinates -ArgumentList $Rectangle.Right, $Rectangle.Bottom
If ($Rectangle.Top -lt 0 -AND $Rectangle.LEft -lt 0) {
Write-Warning "Window is minimized! Coordinates will not be accurate."
}
$Object = [pscustomobject]@{
ProcessName = $ProcessName
Size = $Size
TopLeft = $TopLeft
BottomRight = $BottomRight
}
$Object.PSTypeNames.insert(0,'System.Automation.WindowInfo')
$Object
}
}
}
}
在本文中，我们很好地解释了如何工作以及可以使用哪些策略。
在测试中，为“ service_worker”启动建立有效的https连接非常重要。离线后，您可以看到该文件来自“ service_worker”
答案 1 :(得分：0)
只要
storage.ref("pics/yourimage.jpg").updateMetatdata({ 'cacheControl': 'private, max-age=15552000' }).subscribe(e=>{ });
和您的ngsw-config.json
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
],
"url":[
"https://firebasestorage.googleapis.com/v0/b/*"
]
}
}