[flutter_tools][web] Add basic service worker generation support to web applications #48344

jonahwilliams · 2020-01-07T20:53:58Z

Description

A service worker allows for add to home screen, along with offline support. The worker contains a map of all resource files to be cached, along with the file hash of each. This will allow us to support incremental updates in a future change, as well as ensuring that any changes to the web project trigger the byte-difference algorithm to cause a service worker update (without requiring manual intervention or changes by the project author)

…worker_generation

yjbanov · 2020-01-13T18:33:14Z

examples/flutter_gallery/web/index.html

+  <!-- This script installs service_worker.js to provide PWA functionality to
+       application. For more information, see:
+       https://developers.google.com/web/fundamentals/primers/service-workers -->
+    <script>


indent -2 spaces

yjbanov · 2020-01-13T18:34:09Z

examples/flutter_gallery/web/index.html

+    <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/service_worker.js');


For some reason I feel like we should use a more specific name, such as flutter_service_worker.js.

The comment above still references to service_worker.js, just so you know

yjbanov · 2020-01-13T18:35:51Z

packages/flutter_tools/lib/src/build_system/targets/web.dart

+      if (!basename.contains('main.dart.js')) {
+        continue;
+      }
+      // In release mode, do not output deps file or source map.


Why not? It is common for one to need to debug a release build.

They can still be debugged with run release though. Do you want sourcemaps in release builds?

At least on our side we'd like to build the gallery on every commit and deploy it to something like Firebase hosting, so that if there's a bug we can quickly find the version where it started and debug it. So in that case it would be useful to have sourcemaps for all types of builds.

interesting, I'll leave them in for now then

yjbanov · 2020-01-13T18:48:28Z

packages/flutter_tools/lib/src/build_system/targets/web.dart

+  ${resources.entries.map((MapEntry<String, String> entry) => '"${entry.key}": "${entry.value}"').join(",\n")}
+};
+
+self.addEventListener('install', function (event) {


According to https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers, activation always follows installation, so if we add all keys to the cache here, then in the activation even we will delete them all and add them again. It seems the only thing that should go in the "install" event is things that do not change from one version of the service worker to the next.

IOW, I think if you delete the "install" event listener entirely the service worker will continue working.

install is only triggered when the sw is added, removing 'install' sgtm

…ams/flutter into add_service_worker_generation

miketheman · 2020-01-14T03:17:21Z

packages/flutter_tools/templates/app/web/index.html.tmpl

+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/service_worker.js');


🐛 here - other places are calling this flutter_service_worker.js - this template produces an error message:

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:8000/') with script ('http://localhost:8000/service_worker.js'): A bad HTTP response code (404) was received when fetching the script.

Ahh, forgot to update this one. Thanks for the heads up!

Fix pending here: #48778

Hello. I have same errror. Created issue: #49479

miketheman · 2020-01-14T03:18:49Z

packages/flutter_tools/lib/src/build_system/targets/web.dart

+    final String serviceWorker = generateServiceWorker(uriToHash);
+    serviceWorkerFile
+      .writeAsStringSync(serviceWorker);
+    depfile.writeToFile(environment.buildDir.childFile('service_worker.d'));


Should this file also be a flutter_service_worker.d ?

No, this matches the name declared on 293

Cool, I was just testing you. 😉

…eb applications (flutter#48344)

farcaller · 2020-02-22T09:16:02Z

packages/flutter_tools/lib/src/build_system/targets/web.dart

+          return response;
+        }
+        return fetch(event.request, {
+          credentials: 'include'


I think you're breaking all outgoing CORS requests with this (#51252). Any particular reason for overriding the credentials?

BirjuVachhani · 2020-06-09T11:14:56Z

I tried flutter's master channel and dev channel but myPWA is not showing Install to Home Screen button on desktop or mobile. I traced it back to the generated flutter_service_worker.js file and following modifications fixed the issue.
Instead of

return cache.addAll(Object.keys(RESOURCES));

replacing it with:

cache.addAll(Object.keys(RESOURCES));
return cache;

here's the working code:

self.addEventListener("install", (event) => {
  return event.waitUntil(
    caches.open(TEMP).then((cache) => {
      // Provide a no-cache param to ensure the latest version is downloaded.
      cache.addAll(CORE.map((value) => new Request(value, {'cache': 'no-cache'})));
      return cache;
    })
  );
});

Since the file is auto-generated, my changes won't survive future builds. Could someone look into this? I am happy to provide any needed information.

rafa-js · 2020-06-23T07:29:00Z

As flutter_service_worker.js fetches from cache first of all, it doesn't detect new deployed version of my app.

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

Do you guys have anything in mind to allow different fetch strategies?

hiroshihorie · 2020-07-12T10:49:25Z

@rseibane I'm having the same issue, this was confusing, did you solve this?

lukeblevins · 2020-07-29T17:51:06Z

@rseibane I was having the same issue, and that fixes it temporarily. Thank you!

jonahwilliams · 2020-07-29T18:00:36Z

Hi, looks like there has been a lot of activity on this PR, I'd really appreciate it if you opened new bugs instead of discussing here - you are essentially shouting into the void, because by default most people unsubscribe from submitted PRs.

phackwer · 2020-08-11T17:09:23Z

Guys, feature requested for cleaning up the cache based on Build Number. Obviously, there is a problem that PackageInfo is broken on the web (which would be great to have this to be able to implement the feature requested) but I've done a workaround to force cache clearing before service worker instantiation based on saving the build number in a version.txt file during the pipelines. Well, there is a "workaround" in the link bellow, but definitely this should be done in the service worker based in the package info.

#63500

add basic service worker generation

d8cdd48

fluttergithubbot added tool Affects the "flutter" command-line tool. See also t: labels. work in progress; do not review labels Jan 7, 2020

googlebot added the cla: yes label Jan 7, 2020

jonahwilliams added 2 commits January 11, 2020 18:34

Merge branch 'master' of github.com:flutter/flutter into add_service_…

9f74374

…worker_generation

finalize service worker and write tests

332e07e

jonahwilliams changed the title ~~[WIP][flutter_tools] Add basic service worker generation support to web applications~~ [flutter_tools][web] Add basic service worker generation support to web applications Jan 12, 2020

jonahwilliams removed the work in progress; do not review label Jan 12, 2020

jonahwilliams marked this pull request as ready for review January 12, 2020 02:57

jonahwilliams added 2 commits January 11, 2020 18:59

update flutter gallery to include index.html

d34cae6

Update web_test.dart

f6891e7

jonahwilliams requested review from harryterkelsen and yjbanov January 13, 2020 15:24

yjbanov approved these changes Jan 13, 2020

View reviewed changes

jonahwilliams added 2 commits January 13, 2020 13:02

Address comments

437d274

Merge branch 'add_service_worker_generation' of github.com:jonahwilli…

ae399c0

…ams/flutter into add_service_worker_generation

jonahwilliams added the waiting for tree to go green label Jan 14, 2020

fluttergithubbot merged commit 9f145f6 into flutter:master Jan 14, 2020

miketheman reviewed Jan 14, 2020

View reviewed changes

jonahwilliams mentioned this pull request Jan 14, 2020

[flutter_tools] Update template for web application to correct typo #48778

Merged

jonahwilliams deleted the add_service_worker_generation branch January 14, 2020 03:22

mehere pushed a commit to mehere/flutter that referenced this pull request Jan 14, 2020

[flutter_tools][web] Add basic service worker generation support to w…

9e32a91

…eb applications (flutter#48344)

farcaller mentioned this pull request Feb 22, 2020

Service Worker breaks CORS requests #51252

Closed

farcaller reviewed Feb 22, 2020

View reviewed changes

nateshmbhat mentioned this pull request Mar 31, 2020

[flutter-tools] [web] Service worker doesn't add the canvaskit.js and canvaskit.wasm files into the cache resource #53639

Open

TheLastGimbus mentioned this pull request Aug 6, 2021

[web] support offline PWA #60069

Open

github-actions bot locked as resolved and limited conversation to collaborators Aug 11, 2021

[flutter_tools][web] Add basic service worker generation support to web applications #48344

[flutter_tools][web] Add basic service worker generation support to web applications #48344

Uh oh!

Conversation

jonahwilliams commented Jan 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

BirjuVachhani commented Jun 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rafa-js commented Jun 23, 2020

Uh oh!

hiroshihorie commented Jul 12, 2020

Uh oh!

lukeblevins commented Jul 29, 2020

Uh oh!

jonahwilliams commented Jul 29, 2020

Uh oh!

phackwer commented Aug 11, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

12 participants

jonahwilliams commented Jan 7, 2020 •

edited

Loading

BirjuVachhani commented Jun 9, 2020 •

edited

Loading