play audio after prompt on the first encounter • If the user says “OK”, start playing audio and save the status to the browser storage • If the user says “NO”, always ask before playing audio
polyfill options: Bundle JS files with polyfills like core-js Using polyfill services like polyfill.io Differential script loading is also recommended <script type="module" src="main.esm.mjs"></script> <script nomodule src="main.es5.js"></script> ECMAScript 2016+ compatibility table is almost all green, but we need to load polyfill for now https://kangax.github.io/compat-t able/
priority for better UX • Users prefer fast apps • Better for business metrics voice.ameba.jp -44% Client Rendering Time +57% Page Views https://developers.cyberagent.co.jp/blog/archives/636/
updated precisely with server file update • Runtime assets caches (except partial audios) • HTTP caches if the browser does not support SW 98% Cache Cavarage
/ DB CDN Browser Purge on data update 98% Cache Cavarage 98% Cache Hit Fetch on file change High cache hit/coverage reduces unnecessary network requests
types of data Lab Controlled/Consistent Real-world/Wild Field Lighthouse DevTools SpeedCurve Chrome User Experience Report Firebase Performance Monitoring SpeedCurve
Comparing metrics to competitors with 20% rule 3. Setting perf budgets 4. Monitoring budgets on a daily or a deployment basis 5. Updating budgets (e.g. adding Field metrics)
budget: • Reducing size if possible • Finding reason for size increases • Issuing it to refactor later Exceeded? Ship it! Can reduce size? Reduce size Issue reason Consume budget Refactor Ship it! No Yes No Yes
safe, and frequent • Rollbacks are also easy • Master branch is deployed automatically (on a daily basis, planning) >= 1,000 Releases in 10 Month Push CLI Purge
better DX Similar approach to JAMStack: • Entire Project on a CDN • Everything Lives in Git • Modern Build Tools • Automated Builds • Atomic Deploys • Instant Cache Invalidation Cloud Functions Cloud Storage Cloud Functions Web App Assets Audios API POST/DELETE API GET 93% Endpoints Cacheable https://jamstack.org/
unit testing • Visual regression testing (pages) Tests working in progress: • Logic unit testing on brosers • Server-side testing https://qiita.com/junkisai/items/016c567a9fbade08d65b
Based on WCAG 2.1 • Web Bundle is available https://openameba.github.io/a11y-guidelines/ openameba.github.io https://github.com/openameba/a11y-guidelines/releases
data-src=”https://...” loading=”lazy” /> <noscript> <img alt=””src=”https://...” loading=”lazy” /> </noscript> if ('loading' in HTMLImageElement.prototype) { // copy value from data-src to src } else {} // fallback with Intersection Observer https://twitter.com/herablog/status/1164475719100952576
your app, you can load images with • Intersection Observer • Element Lazy-rendering https://calendar.perfplanet.com/2019/native-image-lazy-loading-in-chrome-is-way-too-eager/
in navigator) { // Chrome let wakeLock; const requestWakeLock = async () => { try { wakeLock = await navigator.wakeLock.request('screen'); } catch (err) { console.error(err); } }; document.addEventListener('visibilitychange', handler); document.addEventListener('fullscreenchange', handler); } else { // you can use NoSleep.js if wake lock is a critical fearture // no fallback also makes sence } O rigin Trial
Chrome if (‘chooseFileSystemEntries’ in window) { const fileHandle = await window.chooseFileSystemEntries(); } else { // fallback with HTML element // use <input type=”file” /> to open file // use <a download> to download files } Planning
, User-Agent, is going to be freezed Tested in Google Chrome Canary 81 if (req.http.Sec-CH-UA ~ "Google Chrome (\d+)$") if (std.atoi(re.group.1) >= 63) { call esm_origin; } }