Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: Include polyfill.io for web builds #2722

Merged
merged 1 commit into from
May 7, 2021

Conversation

kidroca
Copy link
Contributor

@kidroca kidroca commented May 6, 2021

@Julesssss

Details

Provide a custom HtmlWebpackPlugin option to prevent bundling the script tag that adds polyfill.io on desktop
It's not needed there - desktop already works with latest tech
The script tag that loads polyfill.io is only included on web (and mWeb)

The ResizeObserver is added as it's not included in the default features
It's needed for the app to work on iOS 12 mWeb Safari

The gated flag is added to skip polyfilling a feature that is already supported
natively by the browser

Fixed Issues

Fixes #2520

Tests

  1. Have an iOS 12 simulator
  2. Launch Safari
  3. Open Expensify
  4. Login
  5. The app should be able to load past login and be usable (Previously it would break after login)

Since I've made changes to the webpack config and the index file that's used for desktop as well please run the same steps on desktop too

No changes to the native platforms

QA Steps

Same as above

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

image

Mobile Web

Screen.Recording.2021-05-06.at.21.58.16.mov

Desktop

image

@kidroca kidroca requested a review from a team as a code owner May 6, 2021 19:38
Provide a custom `HtmlWebpackPlugin` option to only bundle the script for
polyfill.io for the web/mWeb platform - it's not needed for desktop as
it already works with latest tech

The `ResizeObserver` is added as it's not included in the `default` features
It's needed for the app to work on iOS 12 mWeb Safari

The `gated` flag is added to skip polyfilling a feature that is already supported
natively by the browser
@kidroca kidroca force-pushed the kidroca/add-polyfill.io branch from 692d737 to 1494e3f Compare May 6, 2021 19:54
@kidroca
Copy link
Contributor Author

kidroca commented May 6, 2021

Some timing information

Effects on initial load time for the app

First Load on old browser

  • Adds between 50 - 350ms to initial load time (Depending on network speed)
  • This will happen as polyfill.io gets updated from time to time
  • Or if the src string of the script tag is modified (e.g. add/remove features)

image

First Load on a modern browser

  • 40 - 250ms

image
image

Consecutive loads from disk cache

  • Adds between 15 - 60ms (Does not depend on network speed)
  • This should be about 90% or more of the cases

image

Consecutive loads from memory

  • Less than 1ms
  • This would happen when the page is refreshed or something is opened in a new tab

image

First load on 3g network

  • 300 - 700ms

image

@Julesssss Julesssss removed the request for review from a team May 7, 2021 09:29
@Julesssss
Copy link
Contributor

Tested well on Web/Desktop and an iPhone 12.4 simulator.
Screenshot 2021-05-07 at 11 56 30

@Julesssss Julesssss merged commit 99fe0ae into Expensify:main May 7, 2021
@kidroca kidroca deleted the kidroca/add-polyfill.io branch May 7, 2021 11:19
@OSBotify
Copy link
Contributor

OSBotify commented May 7, 2021

🚀 Deployed to staging in version: 1.0.39-3🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

OSBotify commented May 8, 2021

🚀 Deployed to production in version: 1.0.39-5🚀

platform result
🤖 android 🤖 failure ❌
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

mWeb (iOS 12) - 1.0.2-54 - Chat - Blank screen is displayed after login [Pay on Friday 14th May]
3 participants