8 ms·
Turn your website into a Progressive Web App
- benmarks 9y agoA decent primer which wisely handles the important things first: namely, misconceptions around what it is & what's required. "Application" in PWA is best thought of as indicating the user experience on a mobile, with the ability to add to homescreen without downloading via an app store, and offline capabilities. Where PWA shines is website > AMP > PWA. See https://www.google.com/search?q=myntra+kurtis https://www.google.com/search?q=myntra+kurtis on your mobile for a great example of this transition.
- pwinnski 9y agoIllustrated with an image that includes a giant bar with "ADD TO HOME SCREEN" on it. I already know how to do that on my phone. If I go to a page with a bar like that, I'm closing the page. I'm sure I'm not alone.
- vvdcect 9y agoI always had this idea that a PWA was a site/app that works without js.
- JustSomeNobody 9y agoNo, that was Progressive Enhancement where js was optional.
- prophesi 9y agoI was under the impression that the Progressive part of PWA meant Progressive Enhancement. I have a PWA that creates html/css in the build process. If JS is enabled, it acts as an SPA. If JS is disabled, it's a simple static site. If ServiceWorker can be used, caches the html/css I built which both the SPA and static site versions can use. If no SW, then fallback to AppCache/LocalStorage/etc. The hardest part was finding a CSS framework that doesn't use JS and still can do menus/etc nicely.
- swsieber 9y agoThis is correct - I would define PWA as a superset of Progressive Enhancement.
- pavlov 9y ago"Progressive" has been redefined, like "responsive" before it.
- deleted 9y ago[deleted]
- codedokode 9y agoI think "progressive" is just a new meaningless buzzword.
- Brakenshire 9y agoAs I understand, progressive here means that it will work as an ordinary website even if the extra features like Service Workers aren't supported by the browser.
- finchisko 9y agoFor me progressive should mean, that features (like adding to home screen, push notifications...) reveals progressively. Visitor should show some engagement, before PWA start to offering those features. Definitely not on first visit. It's very trendy nowadays, but extremely annoying to cancel all those feature request popups. "Do you want to receive push notifications?", "Please install our app for better experience", "Add app to homescreen" ... That's not web I like. And yes, I do realise it's far from original definition.
- codedokode 9y agoI think that it would be better to remove popups and only show an icon in the address bar so the user can click it and grant necessary permissions. My version of Chromium shows an icon when a site wants to install a service worker.
- adrianN 9y agoOr you could just serve a small website without scripts or huge images that doesn't need to be progressive because it could be viewed just as well on some 100Mhz Pentium I class computer over a 56k connection.
- Softcadbury 9y agoWell, reducing the loading time of your app is a part of the process to make a progressive app...
- gramstrong 9y agoWhat is the point of this comment? If you want to create a tiny static web page for which the benefits of a service worker are nominal, then do it and stop worrying about it. That's not the purpose of service workers anyways.
- hyperdunc 9y agoThe comment is intimating that many websites are over-engineered. Consider it a suggestion to developers who are tempted to implement cool new tech on a site just to tickle their own itch.
- deleted 9y ago[deleted]
- adrianN 9y agoThe linked article claims that a PWA is appropriate for a blog or a marketing site, or any content basically. I strongly disagree.
- untog 9y agoAnd how many of your users are using a 100Mhz Pentium I class computer over a 56k connection? Almost every smartphone is better than that. And you're ignoring huge benefits like offline availability, push notifications, storage...
- Softcadbury 9y agoI recently turned my app into a progressive web app, if you follow football results, you can check it https://github.com/Softcadbury/football-peek https://github.com/Softcadbury/football-peek
- kylecordes 9y agoPWA is very slick for making complex client-side web applications work and feel much more like native mobile applications, in terms of faster launch, off-line, etc. (And by the way, the machinery to make them work is getting quite nicely integrated in the box with Angular for example - I expect the same for other SPA libraries coming soon also). But I am somewhat skeptical of the implications beyond SPAs, which is that, across the entire Internet, basically every static website in the world should be converted to a PWA for an optimal mobile experience. Doesn't that seem backwards? Shouldn't mobile browsers have a way to "just work" and give a great experience for static websites, rather than changing all the sites? Shouldn't we only need something like PWA for rich SPAs?
- mxbck 9y agoI would argue that, while not every site should have to be converted to a PWA to work properly, every site can benefit from it. If a website is not a complex SPA, why should it not be fast, secure or offline-accessible? HTTPS or Service Worker caching is not something a mobile browser can do for you by default.
- zerkten 9y agoIt seems to me that a lot of the technology making up PWA has been bundled with a PWA philosophy that has made it difficult for folks coming from a progressive enhancement background to understand how it can be applied. Too many people make it seem like an all-or-nothing deal, or couple learning these technologies with other technology that's not an essential. In reality you can incrementally add pieces to your approach for new site, or improve an old site.
- untog 9y agoI agree to an extent, but it's important to remember that Progressive Web Apps are really just a branding exercise for a bunch of different technologies, and you don't have to implement them all. A news site might see huge value in implementing push notifications, whereas a shopping site might not. Messaging sites may see huge value in background sync, but it will be of little value to others. So on, and so forth. My main complaint is that the biggest win for PWAs is simple caching - you can explicitly choose which resources to add to a cache instead of relying on the normal browser cache. This becomes necessary on mobile because the browser cache is very small and is emptied far too often - I'd rather them solve that problem before forcing everyone to make a service worker just to ensure their CSS and JS is cached successfully.
- codedokode 9y agoThis is clearly overengineering if one has to write and maintain a service worker just to be able to display a static site offline. How to debug it? How to see if any of your visitors cannot load site because of error in a service worker? How to decide which pages to preload for offline reading? Also a service worker would add additional process in Chrome and require 30-40 Mb of RAM. I don't want service workers in my browser. Well, web standards have always been this broken and illogical as long as I rememeber.
- untog 9y ago> How to debug it? Chrome debug tools work just fine. > How to see if any of your visitors cannot load site because of error in a service worker? The service worker fetch event is a promise, so you can catch any errors encountered and tell the client to go fetch the remote version instead. You can then do whatever analytics stuff you want with the error. > How to decide which pages to preload for offline reading? Well, who knows. But it's flexible enough to let you decide yourself - the last attempt, AppCache, forced you to decide upfront. With a service worker you could in theory use a user's browsing history to know what pages they are likely to look at. Or you can actually create responses manually in the worker, so you can dynamically generate an entire page locally on the device. It's very powerful. > Also a service worker would add additional process in Chrome and require 30-40 Mb of RAM This part I can't argue with. I mean, Chrome already uses a different process for every tab, but more resources is more resources. I don't see service workers as over engineering, I see them as a low level API. We just need some abstractions.
- codedokode 9y agoThere is still a problem that some sites will have a service worker and some will not. Maybe it would make more sense to allow the user to pick what they want to cache for offline reading. > The service worker fetch event is a promise, By the way promises is another poorly designed technology: they catch unhandled errors and do not report them in any standard way [1]. [1] https://stackoverflow.com/questions/28001722/how-to-catch-uncaught-exception-in-promise https://stackoverflow.com/questions/28001722/how-to-catch-un...
- finchisko 9y agoPlease don't convert your website to PWA before thinking if it really adds an value to your visitors first. Some sites are just great as they're now. I understand you spent time "pimping up" your website, but No I don't want to receive push notification from your site, or ability to visit your website offline. Maybe I'm visiting your website for just single article and you'll never see me again. It reminds me AMP situation. Those who stepped into hype train, are now those whose starting to realise that maybe it wasn't such a great idea at first place.
- SimeVidas 9y agoA service worker can improve page load performance. A website can "become a PWA" for that reason alone.
- finchisko 9y agoany proof of that claim? EDIT: still talking about regular websites? First visit or repeated visit? Most website already can take advantage of plain browser caching and service worker is IMO hard to sell here.
- fenwick67 9y agoService workers can manually cache stuff ahead of time if it thinks you will need them later. For example if you visit the admin login page, it can trigger a fetch of the assets for the admin page, then stuff them in its own cache.
- sloppycee 9y agoService workers are not needed, and manually managing the cache seems overly complex. https://css-tricks.com/prefetching-preloading-prebrowsing/ https://css-tricks.com/prefetching-preloading-prebrowsing/
- SimeVidas 9y agoRepeat visit, of course :) The service worker can't do anything before it's installed (during the first visit). The browsers' network cache is great, but IIUC the browser still performs those 'if-modified-since' requests, doesn't it? Additionally, depending on your server setup and CDN, some assets may have a short max-age value, meaning they're reloaded more often than needed. With service worker, the website can create its own cache and have full control over it. In other words, the site can guarantee that its assets will be loaded directly from the browser's memory.
- rocky1138 9y agoThis is 2017's version of flashturbation.
- benmarks 9y agoNot really. Simulate a garbage cell connection and try buying things online. AMP+PWA are a fairy compelling experience.
- benmarks 9y agoNot really. Simulate a garbage cell connection and try buying things online. AMP+PWA are a fairy compelling experience.
- benmarks 9y agoNot really. Simulate a garbage cell connection and try buying things online. AMP+PWA are a fairy compelling experience.
- blueside 9y agois going full "Progressive Web App" worth really the time investment right now given Apple's lack of support in mobile Safari?
- drumttocs8 9y agoWhat about monetization? Do you serve Adsense or Admob with a PWA? Probably Adsense, but then you lose out on ads optimized for mobile.
- Zpalmtree 9y agoIs it impossible for websites to use my horizontal space? I don't like having a tiny bar in the middle when I have 300 unused pixels either side of the text, this phone centric internet is really annoying on desktop.
- kbsletten 9y agoI'm pretty sure this is because there's a critical limit on how wide a column of text can be before your eye won't snap back to the next line as easily. The thing I love about the phone centric web is that I don't have to have my browser full screen (as you say, it just wastes space).
- oneZergArmy 9y agoAgreed. I usually have two browser windows per screen, or I just zoom a little if a website uses too little horizontal space. When I come upon a site that uses too much horizontal space for me to read comfortably, I just leave.
- achairapart 9y agoWhile your horizontal space can be very useful for code and server logs, the ideal measure for reading text is around 66 characters per line[0], spaces included. Make it too long and you may have trouble to find the next line. Make it too short and your eyes will suffer from traveling back too often. [0]: http://webtypography.net/2.1.2 http://webtypography.net/2.1.2
- mmagin 9y agoThis is uh, a Chrome-specific thing?
- tuananh 9y agoThe author does this for fun / practice only i think. For personal static blog, it doesn't take any effort to be fast; just don't bundle lots of bs stuff with it. btw, there are still optimizations that can be done for author's site. See Google PageSpeed https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmxb.at%2Fblog%2Fhow-to-turn-your-website-into-a-pwa%2F&tab=mobile https://developers.google.com/speed/pagespeed/insights/?url=...