[web] [fix] Cache resource data only if the fetching succeed (#103816)

dev/bots/test.dart

@@ -1083,6 +1083,9 @@ Future<void> _runWebLongRunningTests() async {
     () => runWebServiceWorkerTest(headless: true, testType: ServiceWorkerTestType.withoutFlutterJs),
     () => runWebServiceWorkerTest(headless: true, testType: ServiceWorkerTestType.withFlutterJs),
     () => runWebServiceWorkerTest(headless: true, testType: ServiceWorkerTestType.withFlutterJsShort),
+    () => runWebServiceWorkerTestWithCachingResources(headless: true, testType: ServiceWorkerTestType.withoutFlutterJs),
+    () => runWebServiceWorkerTestWithCachingResources(headless: true, testType: ServiceWorkerTestType.withFlutterJs),
+    () => runWebServiceWorkerTestWithCachingResources(headless: true, testType: ServiceWorkerTestType.withFlutterJsShort),
     () => _runWebStackTraceTest('profile', 'lib/stack_trace.dart'),
     () => _runWebStackTraceTest('release', 'lib/stack_trace.dart'),
     () => _runWebStackTraceTest('profile', 'lib/framework_stack_trace.dart'),

dev/integration_tests/web/lib/service_worker_test_cached_resources.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+Future<void> main() async {
+  runApp(Scaffold(
+    body: Center(
+      child: Column(
+        children: const <Widget>[
+          Icon(Icons.ac_unit),
+          Text('Hello, World', textDirection: TextDirection.ltr),
+        ],
+      ),
+    ),
+  ));
+}

dev/integration_tests/web/pubspec.yaml

@@ -8,6 +8,7 @@ flutter:
   assets:
     - lib/a.dart
     - lib/b.dart
+  uses-material-design: true
 
 dependencies:
   flutter:

packages/flutter_tools/lib/src/web/file_generators/flutter_service_worker_js.dart

@@ -134,9 +134,11 @@ self.addEventListener("fetch", (event) => {
     .then((cache) =>  {
       return cache.match(event.request).then((response) => {
         // Either respond with the cached resource, or perform a fetch and
-        // lazily populate the cache.
+        // lazily populate the cache only if the resource was successfully fetched.
         return response || fetch(event.request).then((response) => {
-          cache.put(event.request, response.clone());
+          if (response && Boolean(response.ok)) {
+            cache.put(event.request, response.clone());
+          }
           return response;
         });
       })