Toast for Service Worker #2426

viankakrisna · 2017-05-31T16:05:12Z

Added Toast component for Service Worker, inspired by #2398
It only listens for first registration and update events. I tried to add one to indicate that the content is served from service worker, but it's annoying because it's always shown on every refresh.

addyosmani

Thanks for getting this started. I'll defer to @gaearon as he had some opinions about the effectiveness of toasts from the other thread we're discussing solutions on.

addyosmani · 2017-05-31T16:07:59Z

packages/react-scripts/template/src/Toast.js

+}
+
+Toast.defaultProps = {
+  timeout: 3000,


A 3s timeout is consistent with some of the other implementations that have opted for this pattern in case anyone is wondering: https://github.com/GoogleChrome/voice-memos/blob/bcb225a41d3dfcec5e9805adf33d27995840c9f0/src/scripts/libs/Toaster.js#L41.

I've also seen "dismiss" button some implementation, but I think we can leave it to the users? edit: nvm, updated it with dismiss button

Thanks! I think you made the right call with the latest set of updates around dismissal.

addyosmani · 2017-05-31T16:11:07Z

packages/react-scripts/template/src/registerServiceWorker.js

@@ -39,6 +60,8 @@ export default function register() {
          console.error('Error during service worker registration:', error);
        });
    });
+  } else {
+    renderToast('Development mode started.');


Is the goal of this to ease users into the idea of the toast UI now being available? I haven't seen other implementations of the toast showing a dev mode message but perhaps it's another awareness moment.

Yeah, so they can see how it look if they want to style it differently :)

jeffposnick · 2017-05-31T16:19:09Z

packages/react-scripts/template/src/registerServiceWorker.js

                } else {
                  // At this point, everything has been precached.
                  // It's the perfect time to display a
                  // "Content is cached for offline use." message.
-                  console.log('Content is cached for offline use.');
+                  showMessage('Content is cached for offline use.');


One possible addition would be to also include a "learn more" link that pointed to the documentation for additional context. Using a timeout of longer than 3 seconds might be appropriate in that case.

Actually, this code is running on production. I don't think it's a good default for the user to have a link to create-react-app in their production code.

@jeffposnick I added readme link in dev mode but I think it would be made more sense to link it to the full readme.md instead of the specific section of it.

Since Service Workers are not enabled in development mode, maybe we should let the developer know why the toast exists.

We could also add some information in registerServiceWorker.js about how to remove service workers.

"In production your users will see this toast to notify them service workers are enabled. See registerServiceWorker.js for more info"

What about instead of using the word 'content' we say 'app'.

A new version of this app is available. Please refresh your browser.

This app had been made available for offline use.

Isn't it a nice enhancement if you make the word refresh as a link on click of which a refresh is triggered?

viankakrisna · 2017-05-31T16:48:20Z

Updated the style to take up entire window width and add dismiss button.

ro-savage · 2017-05-31T21:01:19Z

packages/react-scripts/template/src/Toast.css

@@ -0,0 +1,39 @@
+.Toast {


Might be worth name spacing this, if there is any expectation the toast will appear in production?

.cra-Toast maybe ?

The idea is to use this as a template for the user to customize it. So I think it's okay to leave it not namespaced. CMIIW

piotr-cz · 2017-06-08T08:49:02Z

I miss an option to switch notification and bundled stylesheets off by config option.
Such config option could be shown in the toast

ro-savage · 2017-06-17T13:34:02Z

packages/react-scripts/template/src/Toast.css

+}
+
+.Toast a,
+.Toast-button {


Can we make this behave more like a link?

cursor: pointer

Toast-button:hover { text-decoration: underline }

And maybe remove the uppercasing from all links, and change it to just so DISMISS is in uppercase?

ro-savage · 2017-06-17T13:40:04Z

packages/react-scripts/template/src/Toast.css

+	line-height: 24px;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	display: flex;


Maybe add a z-index just to ensure this is on top?

ro-savage · 2017-06-17T13:45:06Z

packages/react-scripts/template/src/registerServiceWorker.js

+const domId = 'toast';
+let dom = document.getElementById(domId);
+
+if (!dom) {


If this is suppose to be once off on load. Maybe we should remove the created dom node after the timeout ends / it's dismissed.

Don't think its necessary but could be nice to avoid any possibility of conflicting styles / layout.

ro-savage · 2017-06-17T13:47:07Z

This looks great @viankakrisna

I've tested a bit across browsers + sizes (no IE though) and worked fine.

I have made a couple optional suggestions. I'd like to see this merged in asap.

viankakrisna · 2017-06-18T14:42:11Z

@ro-savage thanks for the feedback! I'll hold off making changes until we are sure where we are going with service worker. On a second thought, maybe inline style is the way to go for this toast for the issue with the namespace. If SW ends up being an optional feature, I don't think we need the Toast component to be in a separate file (too much noise for the user).

react-scripts-dangerous · 2017-09-27T19:32:52Z

Hello! I'm a bot that helps facilitate testing pull requests.

Your pull request (commit 873a617) has been released on npm for testing purposes.

npm i react-scripts-dangerous@1.0.15-873a617.0
# or
yarn add react-scripts-dangerous@1.0.15-873a617.0
# or
create-react-app --scripts-version=react-scripts-dangerous@1.0.15-873a617.0 folder/

Note that the package has not been reviewed or vetted by the maintainers. Only install it at your own risk!

Thanks for your contribution!

stereobooster · 2017-10-08T16:49:24Z

packages/react-scripts/template/src/registerServiceWorker.js

@@ -56,12 +95,12 @@ function registerValidSW(swUrl) {
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
+              showMessage('New content is available; please refresh.');


Possible UX improvements:

add link which user can click to reload page:

New content is available, <a onclick="window.location.reload()" >please refresh</a>.

Do not show message about reload and instead reload browser when user navigates to the next page. But this makes sense only if app actually has routes and uses something like react-router

nice idea! I am waiting for #2755 to get in so we can solve #2638 and continue working on SW enhancements

#2755 closed BTW

piotr-cz · 2017-10-31T09:39:51Z

As this PR got somehow stuck, I've decided to prepare an other one, dealing just with callbacks inside registerServiceWorker file: #3375

I'm using this technique for few months and I'm happy with it.
Changes in code base are minimal

Luchanso · 2018-01-14T16:09:27Z

packages/react-scripts/template/src/Toast.js

+      },
+      this.props.timeout
+    );
+  }


Maybe better adding space between functions?

Timer · 2018-09-26T04:41:25Z

Closing as part of #4169; I'd love to see this released as a user-land feature though we can add to the documentation.

Thanks for all your efforts!

facebook-github-bot added the CLA Signed label May 31, 2017

addyosmani reviewed May 31, 2017

View reviewed changes

jeffposnick reviewed May 31, 2017

View reviewed changes

viankakrisna force-pushed the toast branch 2 times, most recently from bf1eb23 to 654e47c Compare May 31, 2017 18:18

ro-savage reviewed May 31, 2017

View reviewed changes

ro-savage mentioned this pull request Jun 1, 2017

Why was service worker merged into create react app? #2398

Closed

jeffposnick mentioned this pull request Jun 7, 2017

Add cache invalidation based on service work url #2438

Closed

7 tasks

ro-savage mentioned this pull request Jun 17, 2017

Add simplified service worker invalidation #2551

Merged

ro-savage reviewed Jun 17, 2017

View reviewed changes

ro-savage mentioned this pull request Jun 17, 2017

Service Workers - Consolidated issues list #2554

Closed

6 tasks

gaearon mentioned this pull request Jun 27, 2017

Extract service worker registration code #2638

Closed

viankakrisna added 7 commits September 28, 2017 00:39

add toast component for messages

48585db

add useToast for easier enable disable

13faa18

update style for Toast and add dismiss button

e2e8f91

add explicit check for non production env

276763c

add link to read me

08d05cf

simplify style

3b60e32

unnamespace toast id

873a617

viankakrisna force-pushed the toast branch from 5ddd212 to 873a617 Compare September 27, 2017 17:44

stereobooster mentioned this pull request Oct 1, 2017

Allow runtimeCaching option without ejecting #3137

Closed

stereobooster reviewed Oct 8, 2017

View reviewed changes

stereobooster mentioned this pull request Oct 8, 2017

Add example for ServiceWorker reload on next user navigation remix-run/react-router#5602

Closed

piotr-cz mentioned this pull request Oct 31, 2017

Provide callbacks in registerServiceWorker (1.x) #3375

Closed

bondz mentioned this pull request Nov 14, 2017

How can I re-download the app bundle? #3445

Closed

This was referenced Jan 9, 2018

Problem with new builds #3574

Closed

Invalidate cache by service worker #3665

Closed

piotr-cz mentioned this pull request Jan 11, 2018

Preparing the next release #3672

Closed

Luchanso reviewed Jan 14, 2018

View reviewed changes

packages/react-scripts/template/src/Toast.js

},

this.props.timeout

);

}

Copy link

Luchanso Jan 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe better adding space between functions?

Timer closed this Sep 26, 2018

jeffposnick mentioned this pull request Oct 24, 2018

need to improve documentation on service worker changes #5528

Closed

lock bot locked and limited conversation to collaborators Jan 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Toast for Service Worker #2426

Toast for Service Worker #2426

viankakrisna commented May 31, 2017

addyosmani left a comment

addyosmani May 31, 2017

viankakrisna May 31, 2017 •

edited

Loading

addyosmani Jun 1, 2017

addyosmani May 31, 2017

viankakrisna May 31, 2017

jeffposnick May 31, 2017

viankakrisna May 31, 2017

viankakrisna May 31, 2017

ro-savage Jun 17, 2017

nachikethashu Jul 24, 2017

viankakrisna commented May 31, 2017

ro-savage May 31, 2017

viankakrisna May 31, 2017

piotr-cz commented Jun 8, 2017

ro-savage Jun 17, 2017 •

edited

Loading

ro-savage Jun 17, 2017

ro-savage Jun 17, 2017 •

edited

Loading

ro-savage commented Jun 17, 2017

viankakrisna commented Jun 18, 2017

react-scripts-dangerous commented Sep 27, 2017

stereobooster Oct 8, 2017

viankakrisna Oct 18, 2017

andriy-f Jan 14, 2018

piotr-cz commented Oct 31, 2017

Luchanso Jan 14, 2018

Timer commented Sep 26, 2018

Toast for Service Worker #2426

Toast for Service Worker #2426

Conversation

viankakrisna commented May 31, 2017

addyosmani left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

viankakrisna May 31, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

viankakrisna commented May 31, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

piotr-cz commented Jun 8, 2017

ro-savage Jun 17, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ro-savage Jun 17, 2017 • edited Loading

Choose a reason for hiding this comment

ro-savage commented Jun 17, 2017

viankakrisna commented Jun 18, 2017

react-scripts-dangerous commented Sep 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

piotr-cz commented Oct 31, 2017

Choose a reason for hiding this comment

Timer commented Sep 26, 2018

viankakrisna May 31, 2017 •

edited

Loading

ro-savage Jun 17, 2017 •

edited

Loading

ro-savage Jun 17, 2017 •

edited

Loading