Skip to content

feature: Include polyfill.io for web builds#2722

Merged
Julesssss merged 1 commit into
Expensify:mainfrom
kidroca:kidroca/add-polyfill.io
May 7, 2021
Merged

feature: Include polyfill.io for web builds#2722
Julesssss merged 1 commit into
Expensify:mainfrom
kidroca:kidroca/add-polyfill.io

Conversation

@kidroca

@kidroca kidroca commented May 6, 2021

Copy link
Copy Markdown
Contributor

@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

kidroca commented May 6, 2021

Copy link
Copy Markdown
Contributor Author

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
Copy Markdown
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

OSBotify commented May 7, 2021

Copy link
Copy Markdown
Contributor

🚀 Deployed to staging in version: 1.0.39-3🚀

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

@OSBotify

OSBotify commented May 8, 2021

Copy link
Copy Markdown
Contributor

🚀 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