web.dart 21 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6
import 'dart:math';

7
import 'package:crypto/crypto.dart';
8
import 'package:meta/meta.dart';
9
import 'package:package_config/package_config.dart';
10

11 12 13 14 15
import '../../artifacts.dart';
import '../../base/file_system.dart';
import '../../base/io.dart';
import '../../build_info.dart';
import '../../dart/package_map.dart';
16
import '../../globals.dart' as globals;
17
import '../../project.dart';
18
import '../build_system.dart';
19
import '../depfile.dart';
20
import 'assets.dart';
21
import 'common.dart';
22
import 'localizations.dart';
23 24 25 26 27 28 29 30 31 32 33 34

/// Whether web builds should call the platform initialization logic.
const String kInitializePlatform = 'InitializePlatform';

/// Whether the application has web plugins.
const String kHasWebPlugins = 'HasWebPlugins';

/// An override for the dart2js build mode.
///
/// Valid values are O1 (lowest, profile default) to O4 (highest, release default).
const String kDart2jsOptimization = 'Dart2jsOptimization';

35 36 37
/// Whether to disable dynamic generation code to satisfy csp policies.
const String kCspMode = 'cspMode';

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
/// The caching strategy to use for service worker generation.
const String kServiceWorkerStrategy = 'ServiceWorkerStratgey';

/// The caching strategy for the generated service worker.
enum ServiceWorkerStrategy {
  /// Download the app shell eagerly and all other assets lazily.
  /// Prefer the offline cached version.
  offlineFirst,
  /// Do not generate a service worker,
  none,
}

const String kOfflineFirst = 'offline-first';
const String kNoneWorker = 'none';

/// Convert a [value] into a [ServiceWorkerStrategy].
ServiceWorkerStrategy _serviceWorkerStrategyfromString(String value) {
  switch (value) {
    case kNoneWorker:
      return ServiceWorkerStrategy.none;
    // offline-first is the default value for any invalid requests.
    default:
      return ServiceWorkerStrategy.offlineFirst;
  }
}

64
/// Generates an entry point for a web target.
Dan Field's avatar
Dan Field committed
65
// Keep this in sync with build_runner/resident_web_runner.dart
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
class WebEntrypointTarget extends Target {
  const WebEntrypointTarget();

  @override
  String get name => 'web_entrypoint';

  @override
  List<Target> get dependencies => const <Target>[];

  @override
  List<Source> get inputs => const <Source>[
    Source.pattern('{FLUTTER_ROOT}/packages/flutter_tools/lib/src/build_system/targets/web.dart'),
  ];

  @override
  List<Source> get outputs => const <Source>[
    Source.pattern('{BUILD_DIR}/main.dart'),
  ];

  @override
  Future<void> build(Environment environment) async {
    final String targetFile = environment.defines[kTargetFile];
    final bool shouldInitializePlatform = environment.defines[kInitializePlatform] == 'true';
    final bool hasPlugins = environment.defines[kHasWebPlugins] == 'true';
90
    final Uri importUri = environment.fileSystem.file(targetFile).absolute.uri;
91 92
    // TODO(jonahwilliams): support configuration of this file.
    const String packageFile = '.packages';
93
    final PackageConfig packageConfig = await loadPackageConfigWithLogging(
94
      environment.fileSystem.file(packageFile),
95
      logger: environment.logger,
96
    );
97

98
    // Use the PackageConfig to find the correct package-scheme import path
99 100 101 102 103 104
    // for the user application. If the application has a mix of package-scheme
    // and relative imports for a library, then importing the entrypoint as a
    // file-scheme will cause said library to be recognized as two distinct
    // libraries. This can cause surprising behavior as types from that library
    // will be considered distinct from each other.
    // By construction, this will only be null if the .packages file does not
105 106
    // have an entry for the user's application or if the main file is
    // outside of the lib/ directory.
107 108
    final String mainImport = packageConfig.toPackageUri(importUri)?.toString()
      ?? importUri.toString();
109 110 111

    String contents;
    if (hasPlugins) {
112
      final Uri generatedUri = environment.projectDir
113 114
        .childDirectory('lib')
        .childFile('generated_plugin_registrant.dart')
115 116 117 118
        .absolute
        .uri;
      final String generatedImport = packageConfig.toPackageUri(generatedUri)?.toString()
        ?? generatedUri.toString();
119 120 121 122 123
      contents = '''
import 'dart:ui' as ui;

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

124 125
import '$generatedImport';
import '$mainImport' as entrypoint;
126 127 128 129 130 131 132 133 134 135 136 137 138

Future<void> main() async {
  registerPlugins(webPluginRegistry);
  if ($shouldInitializePlatform) {
    await ui.webOnlyInitializePlatform();
  }
  entrypoint.main();
}
''';
    } else {
      contents = '''
import 'dart:ui' as ui;

139
import '$mainImport' as entrypoint;
140 141 142 143 144 145 146 147 148 149

Future<void> main() async {
  if ($shouldInitializePlatform) {
    await ui.webOnlyInitializePlatform();
  }
  entrypoint.main();
}
''';
    }
    environment.buildDir.childFile('main.dart')
150
      .writeAsStringSync(contents);
151 152 153
  }
}

154
/// Compiles a web entry point with dart2js.
155 156 157 158 159 160 161 162
class Dart2JSTarget extends Target {
  const Dart2JSTarget();

  @override
  String get name => 'dart2js';

  @override
  List<Target> get dependencies => const <Target>[
163 164
    WebEntrypointTarget(),
    GenerateLocalizationsTarget(),
165 166 167 168 169 170 171 172 173 174 175 176
  ];

  @override
  List<Source> get inputs => const <Source>[
    Source.artifact(Artifact.flutterWebSdk),
    Source.artifact(Artifact.dart2jsSnapshot),
    Source.artifact(Artifact.engineDartBinary),
    Source.pattern('{BUILD_DIR}/main.dart'),
    Source.pattern('{PROJECT_DIR}/.packages'),
  ];

  @override
177 178 179 180 181
  List<Source> get outputs => const <Source>[];

  @override
  List<String> get depfiles => const <String>[
    'dart2js.d',
182 183 184 185 186
  ];

  @override
  Future<void> build(Environment environment) async {
    final BuildMode buildMode = getBuildModeForName(environment.defines[kBuildMode]);
187

188
    final List<String> sharedCommandOptions = <String>[
189
      globals.artifacts.getArtifactPath(Artifact.engineDartBinary),
190
      '--disable-dart-dev',
191
      globals.artifacts.getArtifactPath(Artifact.dart2jsSnapshot),
192 193
      '--libraries-spec=${globals.fs.path.join(globals.artifacts.getArtifactPath(Artifact.flutterWebSdk), 'libraries.json')}',
      ...?decodeDartDefines(environment.defines, kExtraFrontEndOptions),
194 195 196 197
      if (buildMode == BuildMode.profile)
        '-Ddart.vm.profile=true'
      else
        '-Ddart.vm.product=true',
198
      for (final String dartDefine in decodeDartDefines(environment.defines, kDartDefines))
199
        '-D$dartDefine',
200 201 202 203 204 205 206 207 208
    ];

    // Run the dart2js compilation in two stages, so that icon tree shaking can
    // parse the kernel file for web builds.
    final ProcessResult kernelResult = await globals.processManager.run(<String>[
      ...sharedCommandOptions,
      '-o',
      environment.buildDir.childFile('app.dill').path,
      '--packages=.packages',
209
      '--cfe-only',
210
      environment.buildDir.childFile('main.dart').path, // dartfile
211 212 213 214
    ]);
    if (kernelResult.exitCode != 0) {
      throw Exception(kernelResult.stdout + kernelResult.stderr);
    }
215 216 217 218 219

    final String dart2jsOptimization = environment.defines[kDart2jsOptimization];
    final File outputJSFile = environment.buildDir.childFile('main.dart.js');
    final bool csp = environment.defines[kCspMode] == 'true';

220
    final ProcessResult javaScriptResult = await globals.processManager.run(<String>[
221 222 223 224
      ...sharedCommandOptions,
      if (dart2jsOptimization != null) '-$dart2jsOptimization' else '-O4',
      if (buildMode == BuildMode.profile) '--no-minify',
      if (csp) '--csp',
225
      '-o',
226 227
      outputJSFile.path,
      environment.buildDir.childFile('app.dill').path, // dartfile
228
    ]);
229 230
    if (javaScriptResult.exitCode != 0) {
      throw Exception(javaScriptResult.stdout + javaScriptResult.stderr);
231
    }
232
    final File dart2jsDeps = environment.buildDir
233
      .childFile('app.dill.deps');
234
    if (!dart2jsDeps.existsSync()) {
235
      globals.printError('Warning: dart2js did not produced expected deps list at '
236 237 238
        '${dart2jsDeps.path}');
      return;
    }
239 240 241 242 243
    final DepfileService depfileService = DepfileService(
      fileSystem: globals.fs,
      logger: globals.logger,
    );
    final Depfile depfile = depfileService.parseDart2js(
244
      environment.buildDir.childFile('app.dill.deps'),
245
      outputJSFile,
246
    );
247 248 249 250
    depfileService.writeToFile(
      depfile,
      environment.buildDir.childFile('dart2js.d'),
    );
251 252 253
  }
}

254
/// Unpacks the dart2js compilation and resources to a given output directory.
255 256 257 258 259 260 261 262 263 264 265 266 267 268
class WebReleaseBundle extends Target {
  const WebReleaseBundle();

  @override
  String get name => 'web_release_bundle';

  @override
  List<Target> get dependencies => const <Target>[
    Dart2JSTarget(),
  ];

  @override
  List<Source> get inputs => const <Source>[
    Source.pattern('{BUILD_DIR}/main.dart.js'),
269
    Source.pattern('{PROJECT_DIR}/pubspec.yaml'),
270 271 272 273 274
  ];

  @override
  List<Source> get outputs => const <Source>[
    Source.pattern('{OUTPUT_DIR}/main.dart.js'),
275 276 277 278 279
  ];

  @override
  List<String> get depfiles => const <String>[
    'dart2js.d',
280 281
    'flutter_assets.d',
    'web_resources.d',
282 283 284 285
  ];

  @override
  Future<void> build(Environment environment) async {
286
    for (final File outputFile in environment.buildDir.listSync(recursive: true).whereType<File>()) {
287 288 289 290 291 292
      final String basename = globals.fs.path.basename(outputFile.path);
      if (!basename.contains('main.dart.js')) {
        continue;
      }
      // Do not copy the deps file.
      if (basename.endsWith('.deps')) {
293 294 295
        continue;
      }
      outputFile.copySync(
296
        environment.outputDir.childFile(globals.fs.path.basename(outputFile.path)).path
297 298
      );
    }
299 300 301 302 303

    final String versionInfo = FlutterProject.current().getVersionInfo();
    environment.outputDir
        .childFile('version.json')
        .writeAsStringSync(versionInfo);
304 305
    final Directory outputDirectory = environment.outputDir.childDirectory('assets');
    outputDirectory.createSync(recursive: true);
306 307 308 309 310
    final Depfile depfile = await copyAssets(
      environment,
      environment.outputDir.childDirectory('assets'),
      targetPlatform: TargetPlatform.web_javascript,
    );
311 312 313 314 315 316 317 318
    final DepfileService depfileService = DepfileService(
      fileSystem: globals.fs,
      logger: globals.logger,
    );
    depfileService.writeToFile(
      depfile,
      environment.buildDir.childFile('flutter_assets.d'),
    );
319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336

    final Directory webResources = environment.projectDir
      .childDirectory('web');
    final List<File> inputResourceFiles = webResources
      .listSync(recursive: true)
      .whereType<File>()
      .toList();

    // Copy other resource files out of web/ directory.
    final List<File> outputResourcesFiles = <File>[];
    for (final File inputFile in inputResourceFiles) {
      final File outputFile = globals.fs.file(globals.fs.path.join(
        environment.outputDir.path,
        globals.fs.path.relative(inputFile.path, from: webResources.path)));
      if (!outputFile.parent.existsSync()) {
        outputFile.parent.createSync(recursive: true);
      }
      outputResourcesFiles.add(outputFile);
337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
      // insert a random hash into the requests for main.dart.js and service_worker.js. This is
      // not a content hash, because it would need to be the hash for the entire bundle and not
      // just the resource in question.
      if (environment.fileSystem.path.basename(inputFile.path) == 'index.html') {
        final String randomHash = Random().nextInt(4294967296).toString();
        final String resultString = inputFile.readAsStringSync()
          .replaceFirst(
            '<script src="main.dart.js" type="application/javascript"></script>',
            '<script src="main.dart.js?v=$randomHash" type="application/javascript"></script>'
          )
          .replaceFirst(
            "navigator.serviceWorker.register('flutter_service_worker.js')",
            "navigator.serviceWorker.register('flutter_service_worker.js?v=$randomHash')",
          );
        outputFile.writeAsStringSync(resultString);
        continue;
      }
      inputFile.copySync(outputFile.path);
355 356
    }
    final Depfile resourceFile = Depfile(inputResourceFiles, outputResourcesFiles);
357 358 359 360
    depfileService.writeToFile(
      resourceFile,
      environment.buildDir.childFile('web_resources.d'),
    );
361 362
  }
}
363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395

/// Generate a service worker for a web target.
class WebServiceWorker extends Target {
  const WebServiceWorker();

  @override
  String get name => 'web_service_worker';

  @override
  List<Target> get dependencies => const <Target>[
    Dart2JSTarget(),
    WebReleaseBundle(),
  ];

  @override
  List<String> get depfiles => const <String>[
    'service_worker.d',
  ];

  @override
  List<Source> get inputs => const <Source>[];

  @override
  List<Source> get outputs => const <Source>[];

  @override
  Future<void> build(Environment environment) async {
    final List<File> contents = environment.outputDir
      .listSync(recursive: true)
      .whereType<File>()
      .where((File file) => !file.path.endsWith('flutter_service_worker.js')
        && !globals.fs.path.basename(file.path).startsWith('.'))
      .toList();
396 397 398 399

    final Map<String, String> urlToHash = <String, String>{};
    for (final File file in contents) {
      // Do not force caching of source maps.
400 401
      if (file.path.endsWith('main.dart.js.map') ||
        file.path.endsWith('.part.js.map')) {
402 403 404 405 406 407 408 409 410
        continue;
      }
      final String url = globals.fs.path.toUri(
        globals.fs.path.relative(
          file.path,
          from: environment.outputDir.path),
        ).toString();
      final String hash = md5.convert(await file.readAsBytes()).toString();
      urlToHash[url] = hash;
411 412 413 414
      // Add an additional entry for the base URL.
      if (globals.fs.path.basename(url) == 'index.html') {
        urlToHash['/'] = hash;
      }
415 416
    }

417 418 419
    final File serviceWorkerFile = environment.outputDir
      .childFile('flutter_service_worker.js');
    final Depfile depfile = Depfile(contents, <File>[serviceWorkerFile]);
420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436
    final ServiceWorkerStrategy serviceWorkerStrategy = _serviceWorkerStrategyfromString(
      environment.defines[kServiceWorkerStrategy],
    );
    final String serviceWorker = generateServiceWorker(
      urlToHash,
      <String>[
        '/',
        'main.dart.js',
        'index.html',
        'assets/NOTICES',
        if (urlToHash.containsKey('assets/AssetManifest.json'))
          'assets/AssetManifest.json',
        if (urlToHash.containsKey('assets/FontManifest.json'))
          'assets/FontManifest.json',
      ],
      serviceWorkerStrategy: serviceWorkerStrategy,
    );
437 438
    serviceWorkerFile
      .writeAsStringSync(serviceWorker);
439 440 441 442 443 444 445 446
    final DepfileService depfileService = DepfileService(
      fileSystem: globals.fs,
      logger: globals.logger,
    );
    depfileService.writeToFile(
      depfile,
      environment.buildDir.childFile('service_worker.d'),
    );
447 448 449 450 451 452
  }
}

/// Generate a service worker with an app-specific cache name a map of
/// resource files.
///
453
/// The tool embeds file hashes directly into the worker so that the byte for byte
454 455
/// invalidation will automatically reactivate workers whenever a new
/// version is deployed.
456 457 458 459 460 461 462 463
String generateServiceWorker(
  Map<String, String> resources,
  List<String> coreBundle, {
  @required ServiceWorkerStrategy serviceWorkerStrategy,
}) {
  if (serviceWorkerStrategy == ServiceWorkerStrategy.none) {
    return '';
  }
464 465
  return '''
'use strict';
466 467
const MANIFEST = 'flutter-app-manifest';
const TEMP = 'flutter-temp-cache';
468 469 470 471 472
const CACHE_NAME = 'flutter-app-cache';
const RESOURCES = {
  ${resources.entries.map((MapEntry<String, String> entry) => '"${entry.key}": "${entry.value}"').join(",\n")}
};

473 474 475 476 477 478 479 480
// The application shell files that are downloaded before a service worker can
// start.
const CORE = [
  ${coreBundle.map((String file) => '"$file"').join(',\n')}];
// During install, the TEMP cache is populated with the application shell files.
self.addEventListener("install", (event) => {
  return event.waitUntil(
    caches.open(TEMP).then((cache) => {
481 482
      return cache.addAll(
        CORE.map((value) => new Request(value + '?revision=' + RESOURCES[value], {'cache': 'reload'})));
483 484 485 486
    })
  );
});

487 488 489 490 491 492 493 494 495 496 497 498 499
// During activate, the cache is populated with the temp files downloaded in
// install. If this service worker is upgrading from one with a saved
// MANIFEST, then use this to retain unchanged resource files.
self.addEventListener("activate", function(event) {
  return event.waitUntil(async function() {
    try {
      var contentCache = await caches.open(CACHE_NAME);
      var tempCache = await caches.open(TEMP);
      var manifestCache = await caches.open(MANIFEST);
      var manifest = await manifestCache.match('manifest');
      // When there is no prior manifest, clear the entire cache.
      if (!manifest) {
        await caches.delete(CACHE_NAME);
500
        contentCache = await caches.open(CACHE_NAME);
501 502 503
        for (var request of await tempCache.keys()) {
          var response = await tempCache.match(request);
          await contentCache.put(request, response);
504
        }
505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548
        await caches.delete(TEMP);
        // Save the manifest to make future upgrades efficient.
        await manifestCache.put('manifest', new Response(JSON.stringify(RESOURCES)));
        return;
      }
      var oldManifest = await manifest.json();
      var origin = self.location.origin;
      for (var request of await contentCache.keys()) {
        var key = request.url.substring(origin.length + 1);
        if (key == "") {
          key = "/";
        }
        // If a resource from the old manifest is not in the new cache, or if
        // the MD5 sum has changed, delete it. Otherwise the resource is left
        // in the cache and can be reused by the new service worker.
        if (!RESOURCES[key] || RESOURCES[key] != oldManifest[key]) {
          await contentCache.delete(request);
        }
      }
      // Populate the cache with the app shell TEMP files, potentially overwriting
      // cache files preserved above.
      for (var request of await tempCache.keys()) {
        var response = await tempCache.match(request);
        await contentCache.put(request, response);
      }
      await caches.delete(TEMP);
      // Save the manifest to make future upgrades efficient.
      await manifestCache.put('manifest', new Response(JSON.stringify(RESOURCES)));
      return;
    } catch (err) {
      // On an unhandled exception the state of the cache cannot be guaranteed.
      console.error('Failed to upgrade service worker: ' + err);
      await caches.delete(CACHE_NAME);
      await caches.delete(TEMP);
      await caches.delete(MANIFEST);
    }
  }());
});

// The fetch handler redirects requests for RESOURCE files to the service
// worker cache.
self.addEventListener("fetch", (event) => {
  var origin = self.location.origin;
  var key = event.request.url.substring(origin.length + 1);
549
  // Redirect URLs to the index.html
550 551 552 553
  if (key.indexOf('?v=') != -1) {
    key = key.split('?v=')[0];
  }
  if (event.request.url == origin || event.request.url.startsWith(origin + '/#') || key == '') {
554 555
    key = '/';
  }
Pierre-Louis's avatar
Pierre-Louis committed
556
  // If the URL is not the RESOURCE list, skip the cache.
557 558 559
  if (!RESOURCES[key]) {
    return event.respondWith(fetch(event.request));
  }
560 561 562 563
  // If the URL is the index.html, perform an online-first request.
  if (key == '/') {
    return onlineFirst(event);
  }
564 565 566 567
  event.respondWith(caches.open(CACHE_NAME)
    .then((cache) =>  {
      return cache.match(event.request).then((response) => {
        // Either respond with the cached resource, or perform a fetch and
568 569
        // lazily populate the cache.
        return response || fetch(event.request).then((response) => {
570 571 572
          cache.put(event.request, response.clone());
          return response;
        });
573
      })
574
    })
575 576
  );
});
577

578 579 580
self.addEventListener('message', (event) => {
  // SkipWaiting can be used to immediately activate a waiting service worker.
  // This will also require a page refresh triggered by the main worker.
581
  if (event.data === 'skipWaiting') {
582 583
    return self.skipWaiting();
  }
584
  if (event.message === 'downloadOffline') {
585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603
    downloadOffline();
  }
});

// Download offline will check the RESOURCES for all files not in the cache
// and populate them.
async function downloadOffline() {
  var resources = [];
  var contentCache = await caches.open(CACHE_NAME);
  var currentContent = {};
  for (var request of await contentCache.keys()) {
    var key = request.url.substring(origin.length + 1);
    if (key == "") {
      key = "/";
    }
    currentContent[key] = true;
  }
  for (var resourceKey in Object.keys(RESOURCES)) {
    if (!currentContent[resourceKey]) {
604
      resources.push(resourceKey);
605 606
    }
  }
607
  return contentCache.addAll(resources);
608
}
609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630

// Attempt to download the resource online before falling back to
// the offline cache.
function onlineFirst(event) {
  return event.respondWith(
    fetch(event.request).then((response) => {
      return caches.open(CACHE_NAME).then((cache) => {
        cache.put(event.request, response.clone());
        return response;
      });
    }).catch((error) => {
      return caches.open(CACHE_NAME).then((cache) => {
        return cache.match(event.request).then((response) => {
          if (response != null) {
            return response;
          }
          throw error;
        });
      });
    })
  );
}
631 632
''';
}