Question

我正在编写一个相当复杂的HTML5网站，广泛使用AngularJS。该网站托管在亚马逊的Elastic Beanstalk上的Python应用程序中。

文件“ projectname / app / views / views.py ”如下所示：

from app import application
from flask import render_template

@application.route('/')
def index():
    return render_template('main.html')

“ main.html ”如下所示：

{% extends "layout.html" %}

{% block content %}
<script src="{{ url_for('static', filename='lib/google-maps/angular-google-maps.min.js') }}"></script> 

<!-- here are more javascript libs being loaded, also css files -->

<div ng-app="myApp" ng-controller="applicationController">
  <div ng-include="'/static/partials/home/menu.html'"/>
  <div ng-include="'/static/partials/home/home.html'"/>
  <div ng-include="'/static/partials/home/footer.html'"/>
</div>

{% endblock content %}

“ layout.html ”如下所示：

<!DOCTYPE html>
<html manifest="/static/manifest.mf">
<head lang="en"
      profile="http://www.w3.org/2005/10/profile">
    <!-- favicon -->
    <link rel="icon"
          type="image/png"
          href="{{ url_for('static', filename='img/favicon.png') }}"/>

    <meta charset="UTF-8">
    <title>Website title</title>


    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ url_for('static', filename='css/colors.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ url_for('static', filename='css/animations.css') }}" rel="stylesheet" type="text/css"/>

<!-- more javascript libs loaded here ... -->

</head>
<body style="overflow-y: hidden">
{% block content %}
{% endblock content %}
</body>
</html>

除了这些文件，我还有几十个构建网站所有部分的html文件。这些包含在使用ng-include的正确位置。

我的经验是，每当我部署网站时，所有浏览器似乎都会缓存大部分内容，然后只加载新版本的部分，这会导致非常丑陋的行为。例如，一些javascript文件在新版本中加载，但是html文件仍然很旧，因此视图非常混乱并且发生了很多错误。当我重置缓存时（例如在Chrome中通过在Windows下按Shift-F5或打开开发人员控制台并刷新网站），一切都很好，新版本完全加载。

但是，每当我重新部署新版本的网站时，我都不能指望我的客户打开任何开发控制台。

所以我读了一些关于清单的内容，正如你所看到的，我在layout.html中引用了manifest.mf文件。以下是其内容：

CACHE MANIFEST
# 2016-01-07:v1.0.4

# This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.
CACHE:
/static/img/login-background.jpg

# Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "*", which allows all URLs. Most sites need "*".
NETWORK:
*

# An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes. "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg".
FALLBACK:

在每次部署时，我都会更改第一行并更新发布日期和版本号。我还将大图像或文件添加到CACHE部分（目前只有一些背景图像）。

清单也已正确加载，从Chrome开发者控制台加载页面时可以看到。它说：

Creating Application Cache with manifest https://my.website.net/static/manifest.mf
my.website.net/:1 Application Cache Checking event
my.website.net/:1 Application Cache Downloading event
my.website.net/:1 Application Cache Progress event (0 of 1) https://my.website.net/static/img/login-background.jpg
my.website.net/:1 Application Cache Progress event (1 of 1) 
my.website.net/:1 Application Cache Cached event

因此缓存文件本身正在运行。但是，每当我部署新版本时，我仍会获得半更新的页面。我该怎么做才能解决这个问题？

任何想法都非常感谢！非常感谢，基督教

如何使用清单来禁用应用程序缓存？

0 个答案: