简体繁体 English

修改渐进式Web App背景色

[英]Modify Progressive Web App background colour

原文 2016-03-31 21:22:55 3 1 android/ css/ json/ progressive-web-apps

I have a Progressive Web App which is capable of being added to home screen. 我有一个渐进式Web应用程序，可以将其添加到主屏幕。 When the home screen icon is tapped (on mobile) there is a (kind of) welcome page with icon that appears before opening the actual app. 当点击主屏幕图标（在移动设备上）时，在打开实际应用程序之前，会出现（某种）带有图标的欢迎页面。

I have set the background colour of that welcome screen to be blue in menifest.json . 我在menifest.json中将欢迎屏幕的背景颜色设置为蓝色。 I need to make it brown. 我需要把它弄成棕色。 I have modified the menifest.json file and updated the website. 我已经修改了menifest.json文件并更新了网站。 But the mobile seems to have cached it permanently and it is still showing blue. 但是移动设备似乎已经对其进行了永久缓存，并且仍然显示为蓝色。

I have refreshed page many times and added the web app to home screen multiple times. 我已刷新页面多次，并将Web应用程序多次添加到主屏幕。 But it is never changing. 但是，它永远不会改变。

I have also changed the cache name in service-worker.js . 我还更改了service-worker.js的缓存名称。 Yet no luck! 却没有运气！

1 个解决方案

Plug in your device 插入您的设备
visit chrome://inspect 前往chrome：// inspect
Inspect the device / tab you are looking at for your site 检查您要寻找站点的设备/标签
In DevTools go to Network tab 在DevTools中，转到“网络”选项卡
Select 'Disable Cache' 选择“禁用缓存”
Refresh your web app 刷新您的网络应用
Then try adding to homescreen 然后尝试添加到主屏幕

If you get the correct color it's a good indicator that your previous manifest was cached and you should consider a caching strategy, either file re-visioning the manifest.json file (ie manifest.12345.json) OR set appropriate headers. 如果您获得正确的颜色，则可以很好地表明您先前的清单已被缓存，并且您应该考虑采用缓存策略，即重新定义manifest.json文件（即manifest.12345.json）或设置适当的标头。

One thing to note: on Android there is no way to update the icon / manifest details once it's added to homescreen - this is a known issue / bug. 需要注意的一件事：在Android上，一旦将图标/清单的详细信息添加到主屏幕，就无法对其进行更新-这是一个已知的问题/错误。