profile
viewpoint
Thomas Steiner tomayac @google Google Hamburg, Germany https://blog.tomayac.com/ Web Developer Advocate at @Google (🇩🇪). Dad (🇪🇺). PhD from @la_UPC (🇪🇸), Postdoc at @UniversiteLyon (🇫🇷). #PWA #JavaScript #NodeJS #Fugu 🐡 #SemanticWeb

excalidraw/excalidraw 12128

Virtual whiteboard for sketching hand-drawn like diagrams

GoogleChromeLabs/dark-mode-toggle 475

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:

GoogleChromeLabs/sample-pie-shop 190

Example e-commerce site to explore PWA (Progressive Web App) use cases.

GoogleChromeLabs/browser-nativefs 155

Native File System API with legacy fallback in the browser

google/service-worker-detector 119

This extension detects if a website registers a Service Worker.

GoogleChromeLabs/link-to-text-fragment 113

Browser extension that allows for linking to arbitrary text fragments.

GoogleChromeLabs/affilicats 61

🐈 Progressive Web App demo that showcases flaky network resilience measures (📶 or 🚫📶).

google/pagespeed-inslides 54

HTML5 Slide Deck Generator Tool Based on the PageSpeed Insights API

pull request commentGoogleChromeLabs/browser-nativefs

ensure conditional type works with default value

👍 Happy to merge a quick PR.

dwelle

comment created time in 5 hours

push eventtomayac/webhid

Thomas Steiner

commit sha 79870aa37e36578f2c2461ba5ff53a4c84853825

Fix sample code

view details

push time in 6 hours

push eventtomayac/webhid

Thomas Steiner

commit sha 0f780cfb89a8da95fb0739e2c0522678b39bc221

Use correct quotes

view details

push time in 6 hours

PR opened WICG/webhid

Use correct quotes in sample code

Use '`' instead of '''.

+2 -2

0 comment

1 changed file

pr created time in 6 hours

push eventtomayac/webhid

Thomas Steiner

commit sha 2d78ee193bd970786ec4421e3f4b8a29711496b0

Use correct quotes

view details

push time in 6 hours

fork tomayac/webhid

Web API for accessing Human Interface Devices (HID)

fork in 6 hours

issue closedGoogleChromeLabs/link-to-text-fragment

Is there a way to highlight all occurrences of the searched keyword in the page

Is there a way to highlight all occurrences of the searched key word in the page ?

closed time in 7 hours

infact

issue commentGoogleChromeLabs/link-to-text-fragment

Is there a way to highlight all occurrences of the searched keyword in the page

You can do this by manually creating a URL, see this example.

infact

comment created time in 7 hours

PullRequestReviewEvent

pull request commentexcalidraw/excalidraw

fileHandle refactor & fixes

Oh, I see. So this is essentially removing the ugly global on window that I have introduced. In this case LGTM. I just naively thought it was dealing with the full story.

dwelle

comment created time in a day

issue commentGoogleChromeLabs/browser-nativefs

fileSave doesn't write correct mimeType for custom extensions

MIME type are considered a serious thing that not everyone can freely mess around with, but that need to follow strict processes for registering. Each MIME type has a set of registered extensions (example for application/json). Anything else won't be considered by operating systems.

dwelle

comment created time in a day

issue commentGoogleChromeLabs/link-to-text-fragment

Control+Shift+L clashes with Google Docs shortcut

Thanks for the input. I've removed the suggested default hotkey, which means there won't be a clash anymore for all users, and power users can still set their own preferred hotkey. The new version will be released in the next days.

Henry-Gooseleg

comment created time in a day

push eventGoogleChromeLabs/link-to-text-fragment

tomayac

commit sha 0e3f221e5a4af927ba8eac6d1a61766443246b4e

Don't suggest a default hotkey Fixes #15

view details

push time in a day

issue closedGoogleChromeLabs/link-to-text-fragment

Control+Shift+L clashes with Google Docs shortcut

When I do ctrl+shift+l to left align on Google Docs, the popup appears telling me I haven't selected anything to copy the link to. This also prevents the shortcut from working (the text is still center aligned). I am on a Chromebook, if that has anything to do with the shortcut not working. I'm a little disappointed that 3 Google products clash and don't work together properly.

closed time in a day

Henry-Gooseleg

issue closedGoogleChromeLabs/browser-nativefs

fileSave doesn't write correct mimeType for custom extensions

I'm not sure if this is a problem with Native FS API or something else, but if you save a blob with a given mimeType, but a custom extension, the file will end up with an empty/missing mimeType (when later opened, for example).

This should be reported upstream/crbug — just wanted to make sure I'm not missing something, first.

fileSave(new Blob([], { type: "application/json" }), {
    fileName: "test",
    extensions: [".excalidraw"]
})

const blob = await fileOpen({
    // if you comment this it won't even show the file
    // in file picker because of missing mimeType
    extensions: [".excalidraw"],
    mimeTypes: ["application/json"]
});
setType(blob.type); // ""

Repro: https://0cglk.csb.app/ Source: https://codesandbox.io/s/sharp-bartik-0cglk?file=/src/App.js (due to security, use the link above to test)

closed time in a day

dwelle

issue commentGoogleChromeLabs/browser-nativefs

fileSave doesn't write correct mimeType for custom extensions

Under the hood, this is the code browser-nativefs creates for this:

const handle =    
    (await window.showSaveFilePicker({
      types: [
        {          
          accept: {
            ['application/json']: ['.excalidraw'],
          },
        },
      ],
    }));
const writable = await handle.createWritable();
await writable.write(new Blob(["{a:0}"], {type: 'application/json'}));
await writable.close();

The way operating systems like macOS handle this is to give preference to the extension. See how macOS behaves if I change .png to .custompng. The MIME type macOS displays downgrades from "PNG image" (image/png) to "Document", which is its way of saying 🤷‍♀️/🤷‍♂️:

Screen Shot 2020-10-19 at 10 26 11 Screen Shot 2020-10-19 at 10 26 37

dwelle

comment created time in a day

pull request commentexcalidraw/excalidraw

fileHandle refactor & fixes

I haven't looked into the "why" yet, but it doesn't seem to work as it should right now. I tested with the preview using these steps:

  1. Load a file and make a random change.
  2. Save the change using the "Save" button.
  3. Reload Excalidraw and see the restored scene.
  4. Make another change and press "Save".
  5. A new "Save as" dialog pops up.

In the last step, it should re-use the file handle and just save without popping up a dialog. It looks like you add the file handle in commitHistory, but then seem to not restore it again (but this is where I didn't investigate closely).

dwelle

comment created time in a day

issue closedGoogleChromeLabs/browser-nativefs

Purpose of `opts.extensions`?

When calling fileOpen, AFAIK the extensions doesn't really do anything on top of mimeTypes. At least on Windows (via Excalidraw) it does not.

What is it supposed to do, and why do/should we supply both mimeTypes and extensions?

closed time in 2 days

dwelle

issue commentGoogleChromeLabs/browser-nativefs

Purpose of `opts.extensions`?

Some operating systems support extensions, some support MIME types, and some support both. It’s a recommended best practice to supply both for maximum compatibility. For example:

.jpeg, .jpg image/jpeg

We have the same behavior in the <input type=file> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept.

dwelle

comment created time in 2 days

PR opened GoogleChrome/web.dev

[Origin Trial article] Fix link in aside

Changes proposed in this pull request:

  • Fix link in aside.
+2 -2

0 comment

1 changed file

pr created time in 2 days

create barnchGoogleChrome/web.dev

branch : tomayac-patch-1

created branch time in 2 days

push eventtomayac/hiit-time

tomayac

commit sha 7df9b8992cd7df4b4530362d6ae8925309d39895

Add human-duration component

view details

push time in 4 days

IssuesEvent

issue commentGoogleChromeLabs/link-to-text-fragment

Control+Shift+L clashes with Google Docs shortcut

I'm all open to a new shortcut default. Any ideas? My idea was to have something with an 'L' for "Link to Text Fragment".

Henry-Gooseleg

comment created time in 4 days

pull request commentGoogleChrome/web.dev

Add Offline UX Considerations article

Thanks, @jpmedley, I've addressed the helpful review remarks. PTAL.

tomayac

comment created time in 4 days

push eventGoogleChrome/web.dev

Thomas Steiner

commit sha 7120f248ffafdba3b4415a3193e408b18b7b19ff

Apply suggestions from code review

view details

push time in 4 days

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Users travelling into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Internet connection is managed by a third party and time boxed when it will be active or inactive+  like in an airport or hotel.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is: what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. [Not to worry!] Messages will be "sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    Clearly inform the user when a change in state occurs as soon as possible.+  </figcaption>+</figure>++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="io-toast-message.png"+       alt="The I/O 2016 app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    The Google I/O app used a material design "toast" to let the user know when it was offline.+  </figcaption>+</figure>++### Inform users when the network connection improves or is restored++How you deal with informing the user once their network connection has improved will depend largely+on your application. For apps that require update information displayed as a priority such as a+stock market app, auto-updating and notifying the user as soon as possible is crucial.++It is recommended that you let the user know that your web app has been updated "in the background"+by using a visual cue such as a material design toast element. This involves detecting both the+initial registration of your service worker and that there's been an update to the service+worker-managed content. You can see a code example of this <a+href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">function+at work here</a>.++One example of this would be <a href="https://www.chromestatus.com/features">+www.chromestatus.com</a> which posts a note to the user when the app has been updated.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="weather-app.png"+      alt="An example of a weather app."+  >+  <figcaption class="w-figcaption">+    Some apps, like the weather app, need to auto update as old data+    is not of use to the user.+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chrome-status-app-updated.png"+      alt="Chrome Status uses a toast"+  >+  <figcaption class="w-figcaption">+    Other apps like Chrome Status let the user know+    when content has been updated via a toast notification.+  </figcaption>+</figure>++You may also show the last time the app was updated at all times in a prominent space. This would+also be useful for a currency converter app, for example.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-out-of-date.png"+       alt="Material money app that is out-of-date"+  >+  <figcaption class="w-figcaption">+    Material Money uses cached rates…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-updated.png"+       alt="Material money has been updated"+  >+  <figcaption class="w-figcaption">+    …and notifies the user when the app has been updated.+  </figcaption>+</figure>++Other applications such as a news app could show a simple notification informing the user that there+is newer content, with a tap-to-update function. The reason for doing that is if a user is currently+reading an article an auto-update would refresh the page and they would lose where they were reading+last.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-normal.png"+       alt="Example news app, Tailpiece in its normal state"+  >+  <figcaption class="w-figcaption">+    Tailpiece, an online newspaper, will auto-download the latest news…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-tap-to-update.png"+       alt="Example news app, Tailpiece when its ready to be updated"+  >+  <figcaption class="w-figcaption">+    …but allow the users to refresh manually, so they do not lose their place in the article.+  </figcaption>+</figure>++### Update the UI to reflect the current contextual state++Each bit of UI may have its own context and functionality that will change depending on if it+requires a successful connection. One example would be an e-commerce site that can be browsed+offline through the Buy button and pricing is disabled until a connection has been reestablished.++Other forms of contextual states could include data. For example, the financial application+Robinhood allows users to buy stock and uses color and graphics to notify the user when the market+is open. The whole interface turns white and then grays out when the market closes. When the value+of stock increases or decreases, each individual stock widget turns green or red depending on its+state.++### Educate the user so they understand what the offline model is++Offline is a new mental model for everyone. You need to educate your users about what changes will+occur when they don't have a connection. Inform them of where large data is saved and give them+settings to change the default behavior. Make sure you use multiple UI design components such as+informative language, icons, notifications, color and imagery to convey these ideas collectively+rather than relying on one design device, such as an icon on its own, to tell the whole story.++## Provide an offline experience by default++If your app doesn't require much data, then cache that data by default. Users can become+increasingly frustrated if they can only access their data with a network connection. Try to make+the experience as stable as possible. An unstable connection will make your app feel untrustworthy,+where an app that lessens the impact of a network failure will feel magical to the user.++News sites could benefit from auto downloading and saving the latest news content of the day so a+user could read today's news without a connection, perhaps downloading the text without the article+images. Also adapt with the user's behavior so if the sports section is what they typically view,+perhaps make this the priority data that is downloaded.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline.png"+       alt="Tailpiece informs the user that they are offline with various design widgets"+  >+  <figcaption class="w-figcaption">+    If the device is offline, Tailpiece will notify the user with a status message…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline-sidebar.png"+       alt="Tailpiece has a navigational draw that shows what sections are ready for offline use."+  >+  <figcaption class="w-figcaption">+    …letting them know that they can at least partially still use the app.+  </figcaption>+</figure>++## Inform the user when the app is ready for offline consumption++When a web app first loads you need to indicate to the user if it is ready for offline use. Do this+with a+[widget that provides brief feedback](https://material.google.com/components/snackbars-toasts.html 'widget that provides brief feedback')+about an operation through a message at the bottom of the screen, for example when a section has+been synced or a data file has downloaded.++Again think of the language you are using to make sure it is fit for your audience. Ensure the+messaging is given the same in all instances where it's used. The term offline is generally+misunderstood by a non-technical audience so use action based language that your audience can relate+to.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="io-offline-ready.png"+       alt="I/O app offline"+  >+  <figcaption class="w-figcaption">+    The Google I/O 2016 app notifies the user when+    the app is ready for offline use…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chome-offline.png"+       alt="Chrome Status site is offline"+  >+  <figcaption class="w-figcaption">+    …and so does the Chrome Status site, including information about the occupied storage.+  </figcaption>+</figure>++### Make 'save for offline' an obvious part of the interface for data heavy apps++If an application uses large amounts of data, make sure that there is a switch or pin to add an item+for offline use rather than auto downloading, unless a user has specifically asked for this behavior+via a settings menu. Make sure that the pin or download UI is not obscured by other UI elements and+that the feature is obvious to the user.++One example would be a music player that requires large data files. The user is aware of the+associated data cost, but is also aware that they may want to use the player when they are offline.+Downloading music for later use requires the user to plan ahead, so education about this may be+required during onboarding.++### Clarify what is accessible offline++Be clear as to the option you are providing. You may need to show a tab or setting that shows an+"offline library", so the user can easily see what they have stored on their phone and what needs to+be saved. Make sure the settings are concise and be clear where the data will be stored and who has+access to it.++### Show the actual cost of an action++Many users equate offline capability with 'downloading'. Users in countries where network+connections regularly fail or aren't available often share content with other users, or save content+for offline use when they have connectivity.++Users on data plans may avoid downloading large files for fear of cost, so you may also want to+display an associated cost so users can make an active comparison for a specific file or task. For+example, if the music app above could detect if the user is on a data plan and show the file size so+that users can see the true cost of a file.++### Help prevent hacked experiences++Often users hack an experience without realizing they are doing it. For example before cloud sharing+apps like Google Drive, it was common for users to save large files and attach them to emails so+they could carry on editing from a different device. It is important not to be pulled into their+hacked experience but rather look at what they are trying to achieve. In other words instead of+thinking of how you can make attaching a large attachment more user friendly, solve the problem of+sharing large files across multiple devices.++## Make experiences transferable from one device to another++When making an experience with a flaky network connection, seek for it to sync correctly once the+connection improves so that the experience is transferable. For example, imagine a travel app losing+a network connection mid-way through a booking. When the connection is reestablished, the app syncs+with the user's account and then they can continue their booking on their desktop device. Not being+able to transfer experiences is incredibly jarring to users.

Weakened the statement.

tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Entering into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Time-boxed internet connections such as those in airports or hotels.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. Not to worry! Messages will be sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    Clearly inform the user when a change in state occurs as soon as possible.+  </figcaption>+</figure>++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="io-toast-message.png"+       alt="The I/O 2016 app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    The Google I/O app used a material design "toast" to let the user know when it was offline.+  </figcaption>+</figure>++### Inform users when the network connection improves or is restored++How you inform the user that their network connection has improved depends+on your application. Apps such as a stock market app that prioritize current information+should auto-update and notify the user as soon as possible.++It is recommended that you let the user know that your web app has been updated "in the background"+by using a visual cue such as, for example, a material design toast element. This involves detecting both the+the presence of a service worker and an update to its managed +content. You can see a code example of this <a+href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">function+at work here</a>.++One example of this would be <a href="https://www.chromestatus.com/">+www.chromestatus.com</a> which posts a note to the user when the app has been updated.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="weather-app.png"+      alt="An example weather app."+  >+  <figcaption class="w-figcaption">+    Some apps, like the weather app, need to auto-update, as old data+    is not useful.+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chrome-status-app-updated.png"+      alt="Chrome Status uses a toast"+  >+  <figcaption class="w-figcaption">+    Apps like Chrome Status let the user know+    when content has been updated via a toast notification.+  </figcaption>+</figure>++You may also show the last time the app was updated at all times in a prominent space. This would+be useful for a currency converter app, for example.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-out-of-date.png"+       alt="The Material Money app being out-of-date."+  >+  <figcaption class="w-figcaption">+    Material Money caches rates…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-updated.png"+       alt="Material money has been updated"+  >+  <figcaption class="w-figcaption">+    …and notifies the user when the app has been updated.+  </figcaption>+</figure>++Applications such as news apps could show a simple tap-to-update notification+informing the user of new content. Auto-updating would cause users to lose +their place.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-normal.png"+       alt="An example news app, Tailpiece in its normal state"+  >+  <figcaption class="w-figcaption">+    Tailpiece, an online newspaper, will auto-download the latest news…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-tap-to-update.png"+       alt="Example news app, Tailpiece when its ready to be updated"+  >+  <figcaption class="w-figcaption">+    …but allow users to refresh manually so they do not lose their place in an article.+  </figcaption>+</figure>++### Update the UI to reflect the current contextual state++Each bit of UI may have its own context and functionality that will change depending on if it+requires a successful connection. One example would be an e-commerce site that can be browsed+offline. The Buy button and pricing would be disabled until a connection is reestablished.++Other forms of contextual states could include data. For example, the financial application+Robinhood allows users to buy stock and uses color and graphics to notify the user when the market+is open. The whole interface turns white and then grays out when the market closes. When the value+of stock increases or decreases, each individual stock widget turns green or red depending on its+state.++### Educate the user so they understand what the offline model is++Offline is a new mental model for everyone. You need to educate your users about what changes will+occur when they don't have a connection. Inform them of where large data is saved and give them+settings to change the default behavior. Make sure you use multiple UI design components such as+informative language, icons, notifications, color and imagery to convey these ideas collectively+rather than relying on a single design choice, such as an icon on its own, to tell the whole story.++## Provide an offline experience by default++If your app doesn't require much data, then cache that data by default. Users can become+increasingly frustrated if they can only access their data with a network connection. Try to make+the experience as stable as possible. An unstable connection will make your app feel untrustworthy,+where an app that lessens the impact of a network failure will feel magical to the user.++News sites could benefit from auto downloading and saving the latest news so a+user could read today's news without a connection, perhaps downloading the text without the article+images. Also adapt to the user's behavior. For example, if the sports section is what they typically view,+make that the priority download.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline.png"+       alt="Tailpiece informs the user that they are offline with various design widgets"+  >+  <figcaption class="w-figcaption">+    If the device is offline, Tailpiece will notify the user with a status message…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline-sidebar.png"+       alt="Tailpiece has a navigational draw that shows what sections are ready for offline use."+  >+  <figcaption class="w-figcaption">+    …letting them know that they can at least partially still use the app.+  </figcaption>+</figure>++## Inform the user when the app is ready for offline consumption++When a web app first loads you need to indicate to the user if it is ready for offline use. Do this+with a+[widget that provides brief feedback](https://material.google.com/components/snackbars-toasts.html 'widget that provides brief feedback')+about an operation through a message at the bottom of the screen such as, for example, when a section has+been synced or a data file has downloaded.++Again think of the language you are using to make sure it is fit for your audience. Ensure the+messaging is given the same in all instances where it's used. The term offline is generally+misunderstood by a non-technical audience so use action based language that your audience can relate+to.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="io-offline-ready.png"+       alt="I/O app offline"+  >+  <figcaption class="w-figcaption">+    The Google I/O 2016 app notifies the user when+    the app is ready for offline use…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chome-offline.png"+       alt="Chrome Status site is offline"+  >+  <figcaption class="w-figcaption">+    …and so does the Chrome Status site, which includes information about the occupied storage.+  </figcaption>+</figure>++### Make 'save for offline' an obvious part of the interface for data heavy apps++If an application uses large amounts of data, make sure that there is a switch or pin to add an item+for offline use rather than auto downloading, unless a user has specifically asked for this behavior+via a settings menu. Make sure that the pin or download UI is not obscured by other UI elements and+that the feature is obvious to the user.++One example would be a music player that requires large data files. The user is aware of the+associated data cost, but may also want to use the player offline.+Downloading music for later use requires the user to plan ahead, so education about this may be+required during onboarding.++### Clarify what is accessible offline++Be clear as to the option you are providing. You may need to show a tab or setting that shows an+"offline library", so the user can easily see what they have stored on their phone and what needs to+be saved. Make sure the settings are concise and be clear where the data will be stored and who has+access to it.++### Show the actual cost of an action++Many users equate offline capability with 'downloading'. Users in countries where network+connections regularly fail or aren't available often share content with other users, or save content+for offline use when they have connectivity.++Users on data plans may avoid downloading large files for fear of cost, so you may also want to+display an associated cost so users can make an active comparison for a specific file or task. For+example, if the music app above could detect if the user is on a data plan and show the file size so+that users can see the cost of a file.++### Help prevent hacked experiences++Often users hack an experience without realizing they are doing it. For example before cloud sharing+apps like Google Drive, it was common for users to save large files and attach them to emails so+they could carry on editing from a different device. It is important not to be pulled into their+hacked experience but rather look at what they are trying to achieve. In other words instead of+thinking of how you can make attaching a large file more user friendly, solve the problem of+sharing large files across multiple devices.++## Make experiences transferable from one device to another++When building for flaky networks, try to sync as soon as the connection improves+so that the experience is transferable. For example, imagine a travel app losing+a network connection mid-way through a booking. When the connection is reestablished, the app syncs+with the user's account allowing them to continue their booking on their desktop device. Not being+able to transfer experiences is incredibly jarring to users.
able to transfer experiences can be incredibly jarring to users.
tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Users travelling into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Internet connection is managed by a third party and time boxed when it will be active or inactive+  like in an airport or hotel.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is: what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. [Not to worry!] Messages will be "sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    Clearly inform the user when a change in state occurs as soon as possible.+  </figcaption>+</figure>++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="io-toast-message.png"+       alt="The I/O 2016 app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    The Google I/O app used a material design "toast" to let the user know when it was offline.+  </figcaption>+</figure>++### Inform users when the network connection improves or is restored++How you deal with informing the user once their network connection has improved will depend largely+on your application. For apps that require update information displayed as a priority such as a+stock market app, auto-updating and notifying the user as soon as possible is crucial.++It is recommended that you let the user know that your web app has been updated "in the background"+by using a visual cue such as a material design toast element. This involves detecting both the+initial registration of your service worker and that there's been an update to the service+worker-managed content. You can see a code example of this <a+href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">function+at work here</a>.++One example of this would be <a href="https://www.chromestatus.com/features">+www.chromestatus.com</a> which posts a note to the user when the app has been updated.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="weather-app.png"+      alt="An example of a weather app."+  >+  <figcaption class="w-figcaption">+    Some apps, like the weather app, need to auto update as old data+    is not of use to the user.+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chrome-status-app-updated.png"+      alt="Chrome Status uses a toast"+  >+  <figcaption class="w-figcaption">+    Other apps like Chrome Status let the user know+    when content has been updated via a toast notification.+  </figcaption>+</figure>++You may also show the last time the app was updated at all times in a prominent space. This would+also be useful for a currency converter app, for example.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-out-of-date.png"+       alt="Material money app that is out-of-date"+  >+  <figcaption class="w-figcaption">+    Material Money uses cached rates…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-updated.png"+       alt="Material money has been updated"+  >+  <figcaption class="w-figcaption">+    …and notifies the user when the app has been updated.+  </figcaption>+</figure>++Other applications such as a news app could show a simple notification informing the user that there+is newer content, with a tap-to-update function. The reason for doing that is if a user is currently+reading an article an auto-update would refresh the page and they would lose where they were reading+last.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-normal.png"+       alt="Example news app, Tailpiece in its normal state"+  >+  <figcaption class="w-figcaption">+    Tailpiece, an online newspaper, will auto-download the latest news…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-tap-to-update.png"+       alt="Example news app, Tailpiece when its ready to be updated"+  >+  <figcaption class="w-figcaption">+    …but allow the users to refresh manually, so they do not lose their place in the article.+  </figcaption>+</figure>++### Update the UI to reflect the current contextual state++Each bit of UI may have its own context and functionality that will change depending on if it+requires a successful connection. One example would be an e-commerce site that can be browsed+offline through the Buy button and pricing is disabled until a connection has been reestablished.++Other forms of contextual states could include data. For example, the financial application+Robinhood allows users to buy stock and uses color and graphics to notify the user when the market+is open. The whole interface turns white and then grays out when the market closes. When the value+of stock increases or decreases, each individual stock widget turns green or red depending on its+state.++### Educate the user so they understand what the offline model is++Offline is a new mental model for everyone. You need to educate your users about what changes will+occur when they don't have a connection. Inform them of where large data is saved and give them+settings to change the default behavior. Make sure you use multiple UI design components such as+informative language, icons, notifications, color and imagery to convey these ideas collectively+rather than relying on one design device, such as an icon on its own, to tell the whole story.++## Provide an offline experience by default++If your app doesn't require much data, then cache that data by default. Users can become+increasingly frustrated if they can only access their data with a network connection. Try to make+the experience as stable as possible. An unstable connection will make your app feel untrustworthy,+where an app that lessens the impact of a network failure will feel magical to the user.++News sites could benefit from auto downloading and saving the latest news content of the day so a+user could read today's news without a connection, perhaps downloading the text without the article+images. Also adapt with the user's behavior so if the sports section is what they typically view,+perhaps make this the priority data that is downloaded.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline.png"+       alt="Tailpiece informs the user that they are offline with various design widgets"+  >+  <figcaption class="w-figcaption">+    If the device is offline, Tailpiece will notify the user with a status message…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline-sidebar.png"+       alt="Tailpiece has a navigational draw that shows what sections are ready for offline use."+  >+  <figcaption class="w-figcaption">+    …letting them know that they can at least partially still use the app.+  </figcaption>+</figure>++## Inform the user when the app is ready for offline consumption++When a web app first loads you need to indicate to the user if it is ready for offline use. Do this+with a+[widget that provides brief feedback](https://material.google.com/components/snackbars-toasts.html 'widget that provides brief feedback')+about an operation through a message at the bottom of the screen, for example when a section has+been synced or a data file has downloaded.++Again think of the language you are using to make sure it is fit for your audience. Ensure the+messaging is given the same in all instances where it's used. The term offline is generally+misunderstood by a non-technical audience so use action based language that your audience can relate+to.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="io-offline-ready.png"+       alt="I/O app offline"+  >+  <figcaption class="w-figcaption">+    The Google I/O 2016 app notifies the user when+    the app is ready for offline use…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chome-offline.png"+       alt="Chrome Status site is offline"+  >+  <figcaption class="w-figcaption">+    …and so does the Chrome Status site, including information about the occupied storage.+  </figcaption>+</figure>++### Make 'save for offline' an obvious part of the interface for data heavy apps++If an application uses large amounts of data, make sure that there is a switch or pin to add an item+for offline use rather than auto downloading, unless a user has specifically asked for this behavior+via a settings menu. Make sure that the pin or download UI is not obscured by other UI elements and+that the feature is obvious to the user.++One example would be a music player that requires large data files. The user is aware of the+associated data cost, but is also aware that they may want to use the player when they are offline.+Downloading music for later use requires the user to plan ahead, so education about this may be+required during onboarding.++### Clarify what is accessible offline++Be clear as to the option you are providing. You may need to show a tab or setting that shows an+"offline library", so the user can easily see what they have stored on their phone and what needs to+be saved. Make sure the settings are concise and be clear where the data will be stored and who has+access to it.

Absolutely! Added.

tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Entering into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Time-boxed internet connections such as those in airports or hotels.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. Not to worry! Messages will be sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    Clearly inform the user when a change in state occurs as soon as possible.+  </figcaption>+</figure>++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="io-toast-message.png"+       alt="The I/O 2016 app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    The Google I/O app used a material design "toast" to let the user know when it was offline.+  </figcaption>+</figure>++### Inform users when the network connection improves or is restored++How you inform the user that their network connection has improved depends+on your application. Apps such as a stock market app that prioritize current information+should auto-update and notify the user as soon as possible.++It is recommended that you let the user know that your web app has been updated "in the background"+by using a visual cue such as, for example, a material design toast element. This involves detecting both the+the presence of a service worker and an update to its managed +content. You can see a code example of this <a+href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">function+at work here</a>.++One example of this would be <a href="https://www.chromestatus.com/">+www.chromestatus.com</a> which posts a note to the user when the app has been updated.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="weather-app.png"+      alt="An example weather app."+  >+  <figcaption class="w-figcaption">+    Some apps, like the weather app, need to auto-update, as old data+    is not useful.+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chrome-status-app-updated.png"+      alt="Chrome Status uses a toast"+  >+  <figcaption class="w-figcaption">+    Apps like Chrome Status let the user know+    when content has been updated via a toast notification.+  </figcaption>+</figure>++You may also show the last time the app was updated at all times in a prominent space. This would+be useful for a currency converter app, for example.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-out-of-date.png"+       alt="The Material Money app being out-of-date."+  >+  <figcaption class="w-figcaption">+    Material Money caches rates…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-updated.png"+       alt="Material money has been updated"+  >+  <figcaption class="w-figcaption">+    …and notifies the user when the app has been updated.+  </figcaption>+</figure>++Applications such as news apps could show a simple tap-to-update notification+informing the user of new content. Auto-updating would cause users to lose +their place.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-normal.png"+       alt="An example news app, Tailpiece in its normal state"+  >+  <figcaption class="w-figcaption">+    Tailpiece, an online newspaper, will auto-download the latest news…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-tap-to-update.png"+       alt="Example news app, Tailpiece when its ready to be updated"+  >+  <figcaption class="w-figcaption">+    …but allow users to refresh manually so they do not lose their place in an article.+  </figcaption>+</figure>++### Update the UI to reflect the current contextual state++Each bit of UI may have its own context and functionality that will change depending on if it+requires a successful connection. One example would be an e-commerce site that can be browsed+offline. The Buy button and pricing would be disabled until a connection is reestablished.++Other forms of contextual states could include data. For example, the financial application+Robinhood allows users to buy stock and uses color and graphics to notify the user when the market+is open. The whole interface turns white and then grays out when the market closes. When the value+of stock increases or decreases, each individual stock widget turns green or red depending on its+state.++### Educate the user so they understand what the offline model is++Offline is a new mental model for everyone. You need to educate your users about what changes will+occur when they don't have a connection. Inform them of where large data is saved and give them+settings to change the default behavior. Make sure you use multiple UI design components such as+informative language, icons, notifications, color and imagery to convey these ideas collectively+rather than relying on a single design choice, such as an icon on its own, to tell the whole story.++## Provide an offline experience by default++If your app doesn't require much data, then cache that data by default. Users can become+increasingly frustrated if they can only access their data with a network connection. Try to make+the experience as stable as possible. An unstable connection will make your app feel untrustworthy,+where an app that lessens the impact of a network failure will feel magical to the user.++News sites could benefit from auto downloading and saving the latest news so a+user could read today's news without a connection, perhaps downloading the text without the article+images. Also adapt to the user's behavior. For example, if the sports section is what they typically view,+make that the priority download.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline.png"+       alt="Tailpiece informs the user that they are offline with various design widgets"+  >+  <figcaption class="w-figcaption">+    If the device is offline, Tailpiece will notify the user with a status message…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline-sidebar.png"+       alt="Tailpiece has a navigational draw that shows what sections are ready for offline use."+  >+  <figcaption class="w-figcaption">+    …letting them know that they can at least partially still use the app.+  </figcaption>+</figure>++## Inform the user when the app is ready for offline consumption++When a web app first loads you need to indicate to the user if it is ready for offline use. Do this+with a+[widget that provides brief feedback](https://material.google.com/components/snackbars-toasts.html 'widget that provides brief feedback')+about an operation through a message at the bottom of the screen such as, for example, when a section has+been synced or a data file has downloaded.++Again think of the language you are using to make sure it is fit for your audience. Ensure the+messaging is given the same in all instances where it's used. The term offline is generally+misunderstood by a non-technical audience so use action based language that your audience can relate+to.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="io-offline-ready.png"+       alt="I/O app offline"+  >+  <figcaption class="w-figcaption">+    The Google I/O 2016 app notifies the user when+    the app is ready for offline use…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chome-offline.png"+       alt="Chrome Status site is offline"+  >+  <figcaption class="w-figcaption">+    …and so does the Chrome Status site, which includes information about the occupied storage.+  </figcaption>+</figure>++### Make 'save for offline' an obvious part of the interface for data heavy apps++If an application uses large amounts of data, make sure that there is a switch or pin to add an item+for offline use rather than auto downloading, unless a user has specifically asked for this behavior+via a settings menu. Make sure that the pin or download UI is not obscured by other UI elements and+that the feature is obvious to the user.++One example would be a music player that requires large data files. The user is aware of the+associated data cost, but may also want to use the player offline.+Downloading music for later use requires the user to plan ahead, so education about this may be+required during onboarding.++### Clarify what is accessible offline++Be clear as to the option you are providing. You may need to show a tab or setting that shows an+"offline library", so the user can easily see what they have stored on their phone and what needs to
"offline library" or [content index](/content-indexing-api/),
so the user can easily see what they have stored on their phone and what needs to
tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Users travelling into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Internet connection is managed by a third party and time boxed when it will be active or inactive+  like in an airport or hotel.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is: what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. [Not to worry!] Messages will be "sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    Clearly inform the user when a change in state occurs as soon as possible.+  </figcaption>+</figure>++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="io-toast-message.png"+       alt="The I/O 2016 app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    The Google I/O app used a material design "toast" to let the user know when it was offline.+  </figcaption>+</figure>++### Inform users when the network connection improves or is restored++How you deal with informing the user once their network connection has improved will depend largely+on your application. For apps that require update information displayed as a priority such as a+stock market app, auto-updating and notifying the user as soon as possible is crucial.++It is recommended that you let the user know that your web app has been updated "in the background"+by using a visual cue such as a material design toast element. This involves detecting both the+initial registration of your service worker and that there's been an update to the service+worker-managed content. You can see a code example of this <a+href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">function+at work here</a>.++One example of this would be <a href="https://www.chromestatus.com/features">+www.chromestatus.com</a> which posts a note to the user when the app has been updated.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="weather-app.png"+      alt="An example of a weather app."+  >+  <figcaption class="w-figcaption">+    Some apps, like the weather app, need to auto update as old data+    is not of use to the user.+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chrome-status-app-updated.png"+      alt="Chrome Status uses a toast"+  >+  <figcaption class="w-figcaption">+    Other apps like Chrome Status let the user know+    when content has been updated via a toast notification.+  </figcaption>+</figure>++You may also show the last time the app was updated at all times in a prominent space. This would+also be useful for a currency converter app, for example.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-out-of-date.png"+       alt="Material money app that is out-of-date"+  >+  <figcaption class="w-figcaption">+    Material Money uses cached rates…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-updated.png"+       alt="Material money has been updated"+  >+  <figcaption class="w-figcaption">+    …and notifies the user when the app has been updated.+  </figcaption>+</figure>++Other applications such as a news app could show a simple notification informing the user that there+is newer content, with a tap-to-update function. The reason for doing that is if a user is currently+reading an article an auto-update would refresh the page and they would lose where they were reading+last.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-normal.png"+       alt="Example news app, Tailpiece in its normal state"+  >+  <figcaption class="w-figcaption">+    Tailpiece, an online newspaper, will auto-download the latest news…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-tap-to-update.png"+       alt="Example news app, Tailpiece when its ready to be updated"+  >+  <figcaption class="w-figcaption">+    …but allow the users to refresh manually, so they do not lose their place in the article.+  </figcaption>+</figure>++### Update the UI to reflect the current contextual state++Each bit of UI may have its own context and functionality that will change depending on if it+requires a successful connection. One example would be an e-commerce site that can be browsed+offline through the Buy button and pricing is disabled until a connection has been reestablished.++Other forms of contextual states could include data. For example, the financial application+Robinhood allows users to buy stock and uses color and graphics to notify the user when the market+is open. The whole interface turns white and then grays out when the market closes. When the value+of stock increases or decreases, each individual stock widget turns green or red depending on its+state.++### Educate the user so they understand what the offline model is++Offline is a new mental model for everyone. You need to educate your users about what changes will+occur when they don't have a connection. Inform them of where large data is saved and give them+settings to change the default behavior. Make sure you use multiple UI design components such as+informative language, icons, notifications, color and imagery to convey these ideas collectively+rather than relying on one design device, such as an icon on its own, to tell the whole story.++## Provide an offline experience by default++If your app doesn't require much data, then cache that data by default. Users can become+increasingly frustrated if they can only access their data with a network connection. Try to make+the experience as stable as possible. An unstable connection will make your app feel untrustworthy,+where an app that lessens the impact of a network failure will feel magical to the user.++News sites could benefit from auto downloading and saving the latest news content of the day so a+user could read today's news without a connection, perhaps downloading the text without the article+images. Also adapt with the user's behavior so if the sports section is what they typically view,+perhaps make this the priority data that is downloaded.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline.png"+       alt="Tailpiece informs the user that they are offline with various design widgets"+  >+  <figcaption class="w-figcaption">+    If the device is offline, Tailpiece will notify the user with a status message…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline-sidebar.png"+       alt="Tailpiece has a navigational draw that shows what sections are ready for offline use."

Replaced with "visual indicator".

tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Entering into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Time-boxed internet connections such as those in airports or hotels.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. Not to worry! Messages will be sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    Clearly inform the user when a change in state occurs as soon as possible.+  </figcaption>+</figure>++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="io-toast-message.png"+       alt="The I/O 2016 app informing the user when a change in state occurs."+  >+  <figcaption class="w-figcaption">+    The Google I/O app used a material design "toast" to let the user know when it was offline.+  </figcaption>+</figure>++### Inform users when the network connection improves or is restored++How you inform the user that their network connection has improved depends+on your application. Apps such as a stock market app that prioritize current information+should auto-update and notify the user as soon as possible.++It is recommended that you let the user know that your web app has been updated "in the background"+by using a visual cue such as, for example, a material design toast element. This involves detecting both the+the presence of a service worker and an update to its managed +content. You can see a code example of this <a+href="https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js#L29">function+at work here</a>.++One example of this would be <a href="https://www.chromestatus.com/">+www.chromestatus.com</a> which posts a note to the user when the app has been updated.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="weather-app.png"+      alt="An example weather app."+  >+  <figcaption class="w-figcaption">+    Some apps, like the weather app, need to auto-update, as old data+    is not useful.+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="chrome-status-app-updated.png"+      alt="Chrome Status uses a toast"+  >+  <figcaption class="w-figcaption">+    Apps like Chrome Status let the user know+    when content has been updated via a toast notification.+  </figcaption>+</figure>++You may also show the last time the app was updated at all times in a prominent space. This would+be useful for a currency converter app, for example.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-out-of-date.png"+       alt="The Material Money app being out-of-date."+  >+  <figcaption class="w-figcaption">+    Material Money caches rates…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="material-money-rates-updated.png"+       alt="Material money has been updated"+  >+  <figcaption class="w-figcaption">+    …and notifies the user when the app has been updated.+  </figcaption>+</figure>++Applications such as news apps could show a simple tap-to-update notification+informing the user of new content. Auto-updating would cause users to lose +their place.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-normal.png"+       alt="An example news app, Tailpiece in its normal state"+  >+  <figcaption class="w-figcaption">+    Tailpiece, an online newspaper, will auto-download the latest news…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-tap-to-update.png"+       alt="Example news app, Tailpiece when its ready to be updated"+  >+  <figcaption class="w-figcaption">+    …but allow users to refresh manually so they do not lose their place in an article.+  </figcaption>+</figure>++### Update the UI to reflect the current contextual state++Each bit of UI may have its own context and functionality that will change depending on if it+requires a successful connection. One example would be an e-commerce site that can be browsed+offline. The Buy button and pricing would be disabled until a connection is reestablished.++Other forms of contextual states could include data. For example, the financial application+Robinhood allows users to buy stock and uses color and graphics to notify the user when the market+is open. The whole interface turns white and then grays out when the market closes. When the value+of stock increases or decreases, each individual stock widget turns green or red depending on its+state.++### Educate the user so they understand what the offline model is++Offline is a new mental model for everyone. You need to educate your users about what changes will+occur when they don't have a connection. Inform them of where large data is saved and give them+settings to change the default behavior. Make sure you use multiple UI design components such as+informative language, icons, notifications, color and imagery to convey these ideas collectively+rather than relying on a single design choice, such as an icon on its own, to tell the whole story.++## Provide an offline experience by default++If your app doesn't require much data, then cache that data by default. Users can become+increasingly frustrated if they can only access their data with a network connection. Try to make+the experience as stable as possible. An unstable connection will make your app feel untrustworthy,+where an app that lessens the impact of a network failure will feel magical to the user.++News sites could benefit from auto downloading and saving the latest news so a+user could read today's news without a connection, perhaps downloading the text without the article+images. Also adapt to the user's behavior. For example, if the sports section is what they typically view,+make that the priority download.++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline.png"+       alt="Tailpiece informs the user that they are offline with various design widgets"+  >+  <figcaption class="w-figcaption">+    If the device is offline, Tailpiece will notify the user with a status message…+  </figcaption>+</figure>++<figure style="display: inline-block; max-width: 45%;" class="w-figure">+  <img src="tailpiece-offline-sidebar.png"+       alt="Tailpiece has a navigational draw that shows what sections are ready for offline use."
       alt="Tailpiece has a visual indicator that shows what sections are ready for offline use."
tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Entering into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Time-boxed internet connections such as those in airports or hotels.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. Not to worry! Messages will be sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."
       alt="The Emojoy emoji messaging app informing the user when a change in state occurs."
tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Users travelling into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.+- Internet connection is managed by a third party and time boxed when it will be active or inactive+  like in an airport or hotel.+- Cultural practices that require limited or no internet access at specific times or days.++Your goal is to provide a good experience that lessens the impact of changes in connectivity.++## Decide what to show your users when they have a bad network connection++The first question that must be asked is: what does success and failure of a network connection look+like? A successful connection is your app's normal online experience. The failure of a connection,+however, can be both the offline state of your app as well how the app behaves when there is a laggy+network.++When thinking about the success or failure of a network connection you need to ask yourself these+important UX questions:++- How long do you wait to determine the success or failure of a connection?+- What can you do while success or failure is being determined?+- What should you do in the event of failure?+- How do you inform the user of the above?++### Inform users of their current state and change of state++Inform the user of both the actions they can still take when they have a network failure and the+current state of the application. For example, a notification could say:++> You seem to have a bad network connection. [Not to worry!] Messages will be "sent when the+> network is restored.++<figure class="w-figure" style="display: inline-block; max-width: 45%;">+  <img src="emojoy-toast-message.png"+       alt=" Emojoy, the emoji messaging app informing the user when a change in state occurs."

Emojoy is the name of the app.

tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Entering into "dead zones" such as buildings that block their network connections.
- Entering into permanent "dead zones" such as buildings with walls that block network connections.
tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Entering into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.
- Entering into temporary "dead zones" like when traveling on a train and going through a tunnel.
tomayac

comment created time in 4 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

Add Offline UX Considerations article

+---+layout: post+title: Offline UX Considerations+subhead: A guide to designing web experiences for slow networks and offline.+authors:+  - mustafakurtuldu+  - thomassteiner+date: 2016-11-10+updated: 2020-09-11+tags:+  - progressive-web-apps+---++This article will take a look at multiple design considerations needed to create a great experience+on both slow networks and offline.++The quality of a network connection can be affected by a number of factors such as:++- Poor coverage of a provider.+- Extreme weather conditions.+- Power outages.+- Users travelling into "dead zones" such as buildings that block their network connections.+- Travelling on a train and going through a tunnel.

The difference is that being in a building is a permanent dead zone, whereas traveling through a tunnel is a temporary dead zone.

tomayac

comment created time in 4 days

PullRequestReviewEvent

push eventGoogleChrome/web.dev

Thomas Steiner

commit sha 463cab073d5d3816ce7c989f29b260b3aff7a554

Apply suggestions from code review Co-authored-by: Joe Medley <jmedley@google.com>

view details

push time in 4 days

issue commentWICG/file-system-access

How To Request An Origin Trial Token For "Local File System"

You need to use a local server that exist for all operating systems (for example, instructions for macOS). Please note that this is not a help forum, but an issue tracker for specification questions that arise in the context of the API. Thanks for your consideration.

apaly

comment created time in 5 days

issue commentWICG/file-system-access

How To Request An Origin Trial Token For "Local File System"

Oh, in this case you should flip the chrome://flags/#enable-experimental-web-platform-features feature flag. Just paste this into the URL bar and flip the flag to "Enabled".

apaly

comment created time in 5 days

issue commentWICG/file-system-access

Feedback on the File System API

(Not related to the initial post, just relevant for the later comments: Are you aware of persistent storage?)

BjornMoren

comment created time in 5 days

issue commentWICG/file-system-access

How To Request An Origin Trial Token For "Local File System"

Just enter the origin of the app where you want to test this. Something like https://example.com.

apaly

comment created time in 5 days

push eventtomayac/hiit-time

tomayac

commit sha ac97c0d4785ebd4946bee69f7b628f76b56e9479

Timer select, end beeps, etc.

view details

push time in 6 days

push eventtomayac/hiit-time

tomayac

commit sha e886a79edb2904dca6b0b91ea5501816e293fde8

Add beep and wake lock

view details

push time in 6 days

push eventGoogleChrome/web.dev

Thomas Steiner

commit sha 051b599fd38b4f442d36b0ce7ab96f43b12b1a9a

Update update

view details

push time in 6 days

PR opened GoogleChrome/web.dev

[Wake Lock article] Nit: async/await for requestWakeLock()

Changes proposed in this pull request:

  • Nit: async/await for requestWakeLock()
+2 -2

0 comment

1 changed file

pr created time in 6 days

create barnchGoogleChrome/web.dev

branch : tomayac-patch-1

created branch time in 6 days

issue closedGoogleChromeLabs/link-to-text-fragment

How to make it working with PDF when opened in browser

Did it actually work for pdf file(opened in chromium).? It did not work for me. For HTML files it is working fine. For PDF file opened in chrome/chromium, it will show the context menu to "copy link to selected text" but actually no link is getting copied.

closed time in 6 days

infact

issue commentGoogleChromeLabs/link-to-text-fragment

How to make it working with PDF when opened in browser

While PDFs are rendered in a browser tab, they are not webpages, which means the extension cannot run. Unfortunately there is no way to prevent the context menu from appearing. Sorry for this.

infact

comment created time in 6 days

pull request commentGoogleChrome/web.dev

Add Offline UX Considerations article

@tomayac are you waiting on a review from @mustafa-x?

I actually was. Else, someone else from the current web.dev team can obviously take over.

tomayac

comment created time in 6 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

[Origin Trial article] Add info that breakage period may be skipped

 Find out more: [What are third-party origin trials?](/third-party-origin-trials) 1. When your token expires, you will get an email with a renewal link.    To do so, you are again asked to submit feedback.    -{% Aside 'warning' %}-Even if an API lands unchanged after a successful origin trial, there is a short period between the +{% Aside %}+Usually if an API lands unchanged after a successful origin trial, there is a short period between the 

Agreed. My initial thinking was it'd be just a "note" now, but in the general case OTs will not launch without interruption, so the "warning" still makes sense.

tomayac

comment created time in 7 days

pull request commentGoogleChromeLabs/link-to-text-fragment

Add new locale ko (Korean)

I will draft a release in the next couple of days, please be patient until then :-) Thanks again for the contribution!

minho42

comment created time in 7 days

issue commentGoogleChromeLabs/browser-nativefs

default All Files(*.*) not working with fileOpen method in Chrome 86

Just published v0.11.0 that includes the fix. Thanks for reporting, and sorry again.

kishok

comment created time in 7 days

push eventGoogleChromeLabs/browser-nativefs

tomayac

commit sha 1e105b8106e7a17cb3b9419acdb7aaebaee67e54

Updated deps

view details

push time in 7 days

push eventGoogleChromeLabs/browser-nativefs

Thomas Steiner

commit sha 567608c75cdc0c1f6ceb3d38d2c7cd877779933f

Correct default MIME type It was correct in https://github.com/GoogleChromeLabs/browser-nativefs/blob/master/src/nativefs-legacy/file-open.mjs#L33, but somehow wrong here. Sorry. Fixes #20.

view details

push time in 7 days

issue closedGoogleChromeLabs/browser-nativefs

default All Files(*.*) not working with fileOpen method in Chrome 86

Prerequisite: Chrome v86

Steps to reproduce: call fileOpen method without any options as below, const filehandle = await fileOpen();

Observations: when i debug the library source underhood this code logic seems to be the root cause,

window.showOpenFilePicker({ types: [ { description: '', accept: { '*.*':[]} } ], multiple: false });

Ref Original Source: https://github.com/GoogleChromeLabs/browser-nativefs/blob/master/src/nativefs/file-open.mjs

image

Expected behavior: we don't need to set All Files(*.*) filter manually in FilePicker API that is handled by default right. please provide the fix.

closed time in 7 days

kishok

push eventGoogleChromeLabs/browser-nativefs

dwelle

commit sha 9c17ab2bf97a95463d911cd9afb5b0fd693a302f

ensure conditional type works with default value

view details

dwelle

commit sha 73db17dea7dffb1e4eec74b60f027a31785f1658

support explicit undefined

view details

Thomas Steiner

commit sha b04dae7d377c6aa60999e744c3453c25b7d3477a

Merge pull request #21 from dwelle/fix_fileOpen_types ensure conditional type works with default value

view details

push time in 7 days

PR merged GoogleChromeLabs/browser-nativefs

ensure conditional type works with default value

This fixes the return type of fileOpen when options.multiple is undefined (false by default).

+2 -2

0 comment

1 changed file

dwelle

pr closed time in 7 days

PullRequestReviewEvent

issue commentGoogleChromeLabs/link-to-text-fragment

Links that are bound to backfire: pages that need clicks to get to such links

If it's mission-critical that the link works exactly as you see it, then the incognito window check is a good idea. You would need to let the recipient know that they need to use the Chrome browser, too, at the moment.

jidanni

comment created time in 7 days

push eventGoogleChromeLabs/link-to-text-fragment

Min ho Kim

commit sha a14d68c1a03785f86653fe497c04194d6053f919

Add new locale ko (Korean)

view details

Thomas Steiner

commit sha 2355606403b9f15803ca734fb3bde806d3ab3006

Merge pull request #18 from minho42/add.locale.korean Add new locale ko (Korean)

view details

push time in 7 days

PullRequestReviewEvent

pull request commentgoogle/WebFundamentals

Add redirect for offline cookbook article

Hey @tomayac - in order for redirects to work, you need to delete the source content. Can you update this PR and delete the /offline-cookbook/ content (including all languages) from WebFu?

Done in https://github.com/google/WebFundamentals/pull/9030/commits/bd984bf2a1f0c46ac6bdd1f07289eebf4c15c64d. PTAL.

tomayac

comment created time in 7 days

push eventgoogle/WebFundamentals

tomayac

commit sha bd984bf2a1f0c46ac6bdd1f07289eebf4c15c64d

Delete offline-cookbook files in all langs

view details

push time in 7 days

PR opened GoogleChrome/web.dev

Reviewers
[Origin Trial article] Add info that breakage period may be skipped

Changes proposed in this pull request:

  • Add info that breakage period [may be skipped])https://sites.google.com/a/chromium.org/dev/blink/launching-features#sites-canvas-main-content:~:text=If%20you%20wish%20to%20skip%20the,Ship%20imply%20approval%20of%20the%20request.).
+8 -3

0 comment

1 changed file

pr created time in 8 days

create barnchGoogleChrome/web.dev

branch : tomayac-patch-1

created branch time in 8 days

issue commentwhatwg/html

Proposal: beforematch event and content-visibility: hidden-matchable

Talking as the developer of the Link to Text Fragment extension (60K+ users), it's a top feature request of users to link to expandable items (e.g., accordions), so adding a platform capability that would allow sites to detect when and react to when a match is about to happen is highly desirable.

josepharhar

comment created time in 8 days

IssuesEvent

issue commentGoogleChrome/web.dev

content: How to request new browser features [title tbd.]

Re-opening.

tomayac

comment created time in 8 days

push eventGoogleChromeLabs/unarchiver

dependabot[bot]

commit sha f5a7a2471f1dcfb8509d75a14fb2904ad1ee0a6e

Bump next from 9.5.1 to 9.5.4 Bumps [next](https://github.com/vercel/next.js) from 9.5.1 to 9.5.4. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](https://github.com/vercel/next.js/compare/v9.5.1...v9.5.4) Signed-off-by: dependabot[bot] <support@github.com>

view details

push time in 8 days

delete branch GoogleChromeLabs/unarchiver

delete branch : dependabot/npm_and_yarn/next-9.5.4

delete time in 8 days

PR merged GoogleChromeLabs/unarchiver

Bump next from 9.5.1 to 9.5.4 dependencies

Bumps next from 9.5.1 to 9.5.4. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/vercel/next.js/releases">next's releases</a>.</em></p> <blockquote> <h2>v9.5.4</h2> <p><strong>This upgrade is <em>completely backwards compatible and recommended for all users on versions below 9.5.4.</em> For future security related communications of our OSS projects, please <a href="https://vercel.com/security">join this mailing list</a>.</strong></p> <p>A security team from one of our partners noticed an issue in Next.js that allowed for open redirects to occur.</p> <p>Specially encoded paths could be used with the trailing slash redirect to allow an open redirect to occur to an external site.</p> <p>In general, this redirect does not directly harm users although can allow for phishing attacks by redirecting to an attackers domain from a trusted domain.</p> <p>We recommend upgrading to the latest version of Next.js to improve the overall security of your application.</p> <h2>How to Upgrade</h2> <ul> <li>We have released patch versions for both the stable and canary channels of Next.js.</li> <li>To upgrade run <code>npm install next@latest --save</code></li> </ul> <h2>Impact</h2> <ul> <li><strong>Affected</strong>: Users of Next.js between 9.5.0 and 9.5.3</li> <li><strong>Not affected</strong>: Deployments on Vercel (<a href="https://vercel.com">https://vercel.com</a>) are not affected</li> <li><strong>Not affected</strong>: Deployments using <code>next export</code></li> </ul> <p>We recommend everyone to upgrade regardless of whether you can reproduce the issue or not.</p> <h3>How to Assess Impact</h3> <p>If you think users could have been affected, you can filter logs of affected sites by <code>%2F</code> with a 308 response.</p> <h2>What is Being Done</h2> <p>As Next.js has grown in popularity, it has received the attention of security teams and auditors. We are thankful to those that reached out for their investigation and discovery of the original bug and subsequent responsible disclosure.</p> <p>We've landed a patch that ensures encoding is handled properly for these types of redirects so the open redirect can no longer occur.</p> <p>Regression tests for this attack were added to the <a href="https://github.com/vercel/next.js/blob/canary/test/integration/production/test/security.js">security</a> integration test suite.</p> <ul> <li>We have notified known Next.js users in advance of this publication.</li> <li>A public CVE was released.</li> <li>If you want to stay on top of our security related news impacting Next.js or other Vercel projects, please <a href="https://zeit.co/security">join this mailing list</a>.</li> <li>We encourage responsible disclosure of future issues. Please email us at <strong><a href="https://github.com/vercel/next.js/blob/HEAD/mailto:security@zeit.co">security@vercel.com</a>.</strong> We are actively monitoring this mailbox.</li> </ul> <hr /> <h3>Core Changes</h3> <ul> <li>Make the image post-processor ignore SVG images: <a href="https://github-redirect.dependabot.com/vercel/next.js/issues/16732">#16732</a></li> <li>Only update lookups for dev overlay if mounted: <a href="https://github-redirect.dependabot.com/vercel/next.js/issues/16776">#16776</a></li> <li>Ensure interpolating dynamic href values works correctly: <a href="https://github-redirect.dependabot.com/vercel/next.js/issues/16774">#16774</a></li> <li>Add automatic reloading when editing GS(S)P methods: <a href="https://github-redirect.dependabot.com/vercel/next.js/issues/16744">#16744</a></li> <li>Update to show build indicator while re-fetching GS(S)P data in dev: <a href="https://github-redirect.dependabot.com/vercel/next.js/issues/16789">#16789</a></li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/vercel/next.js/commit/658810815035e55a7031f27c5a6f3c01baa31ccf"><code>6588108</code></a> v9.5.4</li> <li><a href="https://github.com/vercel/next.js/commit/7108567b06bba6586296fe2bb7e6957410147c8f"><code>7108567</code></a> v9.5.4-canary.25</li> <li><a href="https://github.com/vercel/next.js/commit/5d79a8c0c4928d718e71707cf3305a51c9a5adc4"><code>5d79a8c</code></a> Update workflow step to restore cache (<a href="https://github-redirect.dependabot.com/vercel/next.js/issues/17656">#17656</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/4c38e3ed8ec402862ea6b42b02297f8c28ab9b53"><code>4c38e3e</code></a> fix typo (<a href="https://github-redirect.dependabot.com/vercel/next.js/issues/17653">#17653</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/241f38eaa8aa2199360dc28d76759c936f16cdd6"><code>241f38e</code></a> v9.5.4-canary.24</li> <li><a href="https://github.com/vercel/next.js/commit/7dec91175cb69f773fa623417e0e497acc606dc2"><code>7dec911</code></a> change anonymous functions to named in docs examples (<a href="https://github-redirect.dependabot.com/vercel/next.js/issues/17510">#17510</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/1659e4da617db3effc63f1dd919ce628eb59e135"><code>1659e4d</code></a> Update migrating from Gatsby docs. (<a href="https://github-redirect.dependabot.com/vercel/next.js/issues/17636">#17636</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/06a8b1ad67b07ffae68cba7863ba31b53fc8b95d"><code>06a8b1a</code></a> Add docs on how to migrate from Gatsby. (<a href="https://github-redirect.dependabot.com/vercel/next.js/issues/17491">#17491</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/04234cc312b7b780a52ba6f9f63490d5699da4a3"><code>04234cc</code></a> Update to use hasNextSupport for custom-routes in next export check (<a href="https://github-redirect.dependabot.com/vercel/next.js/issues/17630">#17630</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/742f5d9a46ed5244409ea0389d019fce375f28e3"><code>742f5d9</code></a> test(create-next-app): increase coverage (<a href="https://github-redirect.dependabot.com/vercel/next.js/issues/17507">#17507</a>)</li> <li>Additional commits viewable in <a href="https://github.com/vercel/next.js/compare/v9.5.1...v9.5.4">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+906 -1715

0 comment

3 changed files

dependabot[bot]

pr closed time in 8 days

PullRequestReviewEvent

issue openedWICG/WebID

Clarify relationship to prior WebID work

https://en.wikipedia.org/wiki/WebID

created time in 8 days

pull request commentexcalidraw/excalidraw

support embedding scene data to PNG/SVG

@tomayac is it possible to save a png with a custom mimeType (or something) which we'd use as a filter when opening files so that you can't open just any png file (just for UX)? (I have a feeling I asked you once already in similar context 😄)

(Sorry for the late reply, I was on vacation.) I doubt that this (i.e., the filtering part) would work in practice. I guess the easiest would be to use a separate extension.

dwelle

comment created time in 8 days

PullRequestReviewEvent

PR opened GoogleChrome/web.dev

[ZDF PWA article] Typo fix and two links

Changes proposed in this pull request:

  • Fix a typo
  • Fix a link
  • Add a link
+5 -3

0 comment

1 changed file

pr created time in 11 days

create barnchGoogleChrome/web.dev

branch : tomayac-patch-1

created branch time in 11 days

PullRequestReviewEvent

issue closedGoogleChromeLabs/link-to-text-fragment

Links that are bound to backfire: pages that need clicks to get to such links

https://www.usvotefoundation.org/vote/us/state-voting-information/IL#collapseEight:~:text=Overseas%20Voter will not help sharees get to here, 13921-0 Because that spot needs a few clicks to get to in the first place, when first visiting the page.

So maybe the app should say in an alert, that sorry, we are not able to give you this link because it wont work, as the page wasn't in the initial state etc...

closed time in 16 days

jidanni

issue commentGoogleChromeLabs/link-to-text-fragment

Links that are bound to backfire: pages that need clicks to get to such links

Unfortunately there’s no way for the extension to replay manual steps that may be required to navigate there. Try finding a spot in the page that’s closest to where someone needs to go, but that’s accessible on-load without user interaction.

jidanni

comment created time in 16 days

push eventtomayac/hiit-time

tomayac

commit sha 90cbadc66b465bc7bc21ecbfcab0b20e0de45bf3

Add sl-progress-ring

view details

push time in 17 days

issue commentWICG/idle-detection

Not all use cases of this API need the `notifications` permission

https://github.com/GoogleChrome/web.dev/pull/3993 😃

tomayac

comment created time in 18 days

PR opened GoogleChrome/web.dev

[Idle Detection article] Add user gesture requirement

Changes proposed in this pull request:

  • calling permission requires a user gesture.

@jpmedley, please just merge this once you approve, since I’ll be OoO next week. Thanks!

+2 -1

0 comment

1 changed file

pr created time in 18 days

create barnchGoogleChrome/web.dev

branch : tomayac-patch-1

created branch time in 18 days

issue commentWICG/idle-detection

Not all use cases of this API need the `notifications` permission

In #29 (just merged) the specification now defines a separate "idle-detection" permission.

https://web.dev/idle-detection/#using-the-idle-detection-api is up-to-date I think.

tomayac

comment created time in 18 days

more