15 ms·
Tiny PWAs and why I keep building them
- frereubu 8y agoTiny PWAs and why they don't render until you force refresh on mobile Safari. Edit: to be slightly less snarky, that was my experience of the linked site - just one long scrolling blank page. This could be a really simple HTML / CSS page. Why do it as a PWA and add more points of failure?
- oneeyedpigeon 8y ago> why do it as a PWA? Presumably, so that it can be available in his car, when there’s no network access.
- frereubu 8y agoI meant the site linked to here - it's done as a PWA when there was no need to, and it fails on first load on mobile Safari for some reason.
- oneeyedpigeon 8y agoAh, right. I was confused because everything worked fine for me. Although, believe it or not, after reading this comment, I went back and saw the exact behaviour you describe! (Safari, iPad)
- taneq 8y agoOh, and here was I thinking it was just advanced snarcasm. :P
- cuddlecake 8y agoPWA on Safari (iOS, MacOS) ... Is not yet as progressed as one would hope.
- jeroenhd 8y agoIs it a PWA? I didn't get the normal "add to your homescreen" popup and manually adding it to my homescreen adds a bookmark instead of opening in a separate instance. I think this is just a regular old website with strange javascript libraries. The footer says it's based on Polymer and Hugo, perhaps they don't play along well with Safari? Strange how Safari still has trouble with PWAs, web applications were one of the main selling points of the original iPhone...
- extra88 8y ago> I didn't get the normal "add to your homescreen" popup I thought that only happened after a PWA site had been visited a few times, not on first visit. Hugo is a static site generator so that has no bearing on the page's behavior in the browser. I don't know if it's a PWA but they used Polymer in such a way that there's no content in the HTML, which is stupid. I don't think PWAs are antithetical to PWE, Progressive Web Enhancement.
- oneeyedpigeon 8y agoLooks like there are OS-specific oddities at play. I see an 'Add to home screen' prompt on android, it installs with a custom icon, and then opens in a chromeless browser.
- wffurr 8y agoWhat happens to your PWA page weight when you add tracking and ads to it? How do I find your ad-free hobby project in the sea of search results for "speedometer" PWAs on the open web? What makes sure you will keep paying the, admittedly modest, hosting costs for the app? I think it's great you can make "tiny PWAs" but I think the article is glossing over the incentives and discovery problem that leads to 30MB ad-infested utility apps on the play store.
- oneeyedpigeon 8y agoHe describes it as an app essentially for his own use - there IS no business model. He’s not going to need to add tracking or ads.
- RodgerTheGreat 8y agoViewing the source of the reading light and speedometer reveals that both include google analytics tracking code.
- oneeyedpigeon 8y agoWhere do you see the google analytics code in the speedometer? It's true that the site his example is running on includes GA, but I can't see anything in the source other than a reference to an analytics build which uses a file that only exists if you choose to create it.
- mort96 8y agoThe HTML includes this: <script async="" src="https://www.google-analytics.com/analytics.js"></script> <script>window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));ga('create', 'UA-130560367-1', 'auto');ga('set', 'transport', 'beacon');ga('set', 'anonymizeIp', true);ga('send', 'pageview');</script> The network pane in my browser, when disabling ublock, looks like this: https://s.mort.coffee/d/img/scr-2019-02-03-74462.png https://s.mort.coffee/d/img/scr-2019-02-03-74462.png
- deleted 8y ago[deleted]
- fggdgvcdderr 8y agoWhat is a PWA?
- oneeyedpigeon 8y agoProgressive web app - https://developers.google.com/web/progressive-web-apps/ https://developers.google.com/web/progressive-web-apps/
- deleted 8y ago[deleted]
- rthomas6 8y agoIt's a website built to a standard that Google created, and when a site is built that way Google and iOS treat it like an app. It can be "installed" on your phone and used like a normal app.
- pjmlp 8y agoAnd if distributed via the store, also get access to native APIs.
- palsecam 8y agoIndeed! While such access is still hard on Android (see https://news.ycombinator.com/item?id=19057673 https://news.ycombinator.com/item?id=19057673) or impossible on iOS, you on the other hand can easily call all the WinRT APIs from JavaScript if you distribute a PWA on the Microsoft Store. See https://docs.microsoft.com/microsoft-edge/windows-runtime https://docs.microsoft.com/microsoft-edge/windows-runtime. There are examples of what these APIs allow you to do on https://www.pwabuilder.com/windows https://www.pwabuilder.com/windows. BTW, you can use https://pwa2uwp.fragara.com/ https://pwa2uwp.fragara.com/ to publish a PWA to the Microsoft Store, without needing Visual Studio or even a Windows machine.
- albertgoeswoof 8y ago> “surely there is a app for that!” A quick look leads to speedometer apps with ads and 30MB download weight, and simple screen light that also have ads that weight in at 5MB. I’m finally groking what rms has been banging on about for so long. It is completely unacceptable that we are running software that does this to the user. Users need to be empowered and able to run code that they can control.
- denniskane 8y agoI started building something I like to call "Linux on the Web" (LOTW) 6+ years ago in order to start working on this problem (it's live on the web right now). Just like with node.js applications, the smallest legal file size for an app running inside of LOTW is precisely 0 bytes. I've tried to shave that down even more, but I seem to be running into physical limits :)
- jstanley 8y agoCan you share a link? People reading your comment have no way to know how to learn more about your project, or even whether it is relevant to the topic at hand. The most relevant result I could find for "linux on the web" was https://linuxontheweb.appspot.com/ https://linuxontheweb.appspot.com/ which doesn't seem to be relevant at all.
- denniskane 8y agoDid you try the "desk.os" link that is link number 3 on that page... https://linuxontheweb.appspot.com/desk.os https://linuxontheweb.appspot.com/desk.os ? I can really only guarantee that things work on a relatively recent version of Chrome (like within the last few stable releases). The version that is live now is a couple weeks old. I'm working on some really cool features for the modular synth app right now. I'd love to start sharing this stuff with you guys! Also, link number 5, at https://linuxontheweb.appspot.com/shell.os https://linuxontheweb.appspot.com/shell.os is for people who just want to poke around the deep system internals via a command line. For that, you need to use the "import" command in order to pull in libraries of commands. For instance, running a command like: $ import fs && vim should open up my custom-made vim clone.
- saagarjha 8y ago> A quick look leads to speedometer apps with ads and 30MB download weight, and simple screen light that also have ads that weight in at 5MB. I don’t see why this means PWAs are better than apps. There’s nothing stopping you from writing an app instead of a PWA in this case.
- w8rbt 8y agoRuns in any browser?
- xrisk 8y agoOnly a browser that supports those APIs
- deleted 8y ago[deleted]
- detaro 8y agoWith Safari coming around, I think all mainstream browsers except IE11 do support them.
- chiefalchemist 8y agoAnd I think MS recently officially stop supporting IE11.
- pjmlp 8y agoIE 10, not 11.
- untog 8y agoBoth major mobile platforms do. That's more that you can say for the native solutions each platform provides.
- detaro 8y ago
- twic 8y ago> You see my car, a 2005 Prius, has a terrible glitch in the dashboard where the dash simply doesn’t work. No speedometer, no gasoline gauge, nada. > Both the above cases would lead one to say “surely there is a app for that!” I note from his 'about' page that the author is a proud and admirably public-spirited citizen of Oakdale, which proclaims itself "Cowboy Capital of the World". Seems about right.
- hasperdi 8y agoIf you do like the programming challenge then fine. Speaking for myself, I spend too much time working with computers already. I just want a practical solution and spend time doing things I enjoy. Speedometer app for example, I bought Ulysses Speedometer a long time ago. The price is almost nothing but over the years they maintained it well and added useful features. To me that is the most time and money efficient solution.
- varjag 8y agoI'm amazed there's a jurisdiction in a developed nation where driving a car with dead dashboard is legal.
- stevehawk 8y agoIt's not, but it would only show up in annual or bi annual safety inspections, if their area even had them. In the US it's on a per state basis, with emissions testing on a county level in some states.
- roryisok 8y agoThat was my first reaction. If I was pulled over in Ireland with no dash the car would be impounded. And the speedometer is great but what about the other info? Fuel gauge? Mileage? Battery Charge? Engine faults?? Geolocation won't help with any of those. That said I do love the PWA approach to things and I think more people should embrace it. Just... not for this.
- varjag 8y agoReally doubt you are legally allowed to use GPS based speedometer in place of actual one either.
- cronix 8y agoOk, but it's more accurate than the spedometer in my higher end car, which seems to be off by about 4.6mph lol. I was always wondering why those speed radar things on the side of the road that tell how fast you are going (usually in residential neighborhoods) were consistently showing me going about 5mpg slower than my car was indicating until I checked with my phone gps. So, I was consistently going about 5 mph under the posted speed limit because apparently BMW can't make a decent speedometer gauge! The fuel gauge in my dads pickup is also really whacked. Once it hits about 50% fuel left, it rapidly goes down to 0. Cars don't burn though higher rates of fuel just because of how much is in the tank.
- 8y ago
- thosakwe 8y agoThere are only two real things limiting PWAs in my opinion: 1. Lack of support on iOS. I presume it’ll stay this way for a while (years!). Mobile Safari finally has service workers, but really, that’s about it. No support for “Add to Home Screen” (technically it’s there, but doesn’t work the way it does in other browsers), and a lot of other APIs. 2. The Web is missing some APIs that would really let it compete with native apps. I know there was WebNFC at some point, but it was dropped. No standard/widely implemented API for reading contacts, sending texts, etc. Features like that would really push PWA over the edge and make it awesome.
- CharlesW 8y ago> I presume it’ll stay this way for a while (years!). It turns out iOS 12.2 will be "one heck of a release for Progressive Web Apps…"[1] [1] https://medium.com/dev-channel/progressive-web-app-progress-in-ios-12-2-beta-1-build-16e5181f-a18cd05ca361 https://medium.com/dev-channel/progressive-web-app-progress-...
- paulgb 8y agoIt’s a shame they haven’t budged much on push notifications. I know they have a reputation because they are used so much for spammy purposes, but I see that as a UI problem rather than a problem with push notifications themselves. I think if iOS got push notifications we’d start to see non-spammy use cases, e.g. one-click waitlist notifications and no-install turn-based games. One fun use I've found (I have an Android so push is supported) is getting messages with the loss at each training epoch in Keras (see the side project in my profile.)
- hn_throwaway_99 8y agoI think a reasonable solution on mobile is to only allow push notification requests to PWAs that you have added to your home screen (i.e. "installed"), and removing the app from your home screen should remove the notifications. This way it will function pretty much like native apps, and you won't have to worry as much about random requests for spammy notifications - if I've gone through the trouble to "install" the PWA, then it's more likely I have a higher degree of connection to that app than just some random news site asking if it wants to send me notifications.
- gardaani 8y agoIf you want to see more PWAs, then go to the PWA Directory maintained by Google: https://github.com/GoogleChromeLabs/gulliver https://github.com/GoogleChromeLabs/gulliver Interesting, there is one speedometer there, created 2-3 years ago. The source code is even available in GitHub. It seems that it isn't easy to find PWAs? https://pwa-directory.appspot.com/pwas/5079866537934848 https://pwa-directory.appspot.com/pwas/5079866537934848
- Brakenshire 8y agoThe best thing that Google could do to support pwas would be to build a good search for them.
- hartjer 8y agoIntroduce acronyms before you use them. I'll say it again for the people in the back. Introduce acronyms before you use them.
- keeler 8y agoThe first sentence of the article reads: "I did not set out to build tiny progressive web apps."
- aklemm 8y agoFor the last line, you could have said IABYUT.
- tw1010 8y agoYou wouldn't introduce the acronym "omg" since what it stands for is so well known. I'd argue the same is true in this scenario.
- pnw_hazor 8y agoWhat does PWA mean? After reading some comments I guess personal web apps but I not sure.
- anderber 8y agoGoogling "PWA" answers your question right away.
- Thasc 8y agoProgressive web app. They're kind of like JavaScript-driven websites that think they're native apps. They tend to be characterised by their use of modern web standards to do some useful things, like being available offline, and caching everything heavily to cut down load time. It's like a website you can install, basically.
- choward 8y agoPWA is not an acronym. It's an initialism. I'll say it again for the people in the back. PWA is not an acronym. It's an initialism.
- Twirrim 8y agoHoly crap it's scary that he's building his own speedometer like that. GPS based speedos aren't all that accurate. Ballpark, sure, but not accurate. There are also many circumstances under which GPS won't work. In many countries a car without a functional speedometer is not allowed on the road, for safety reasons.
- maroonblazer 8y agoHow inaccurate is GPS? It seems like for his purposes a variance of even +/- 5 mph could be tolerated given one can generally sense approximately what speed they're traveling and can also compare themselves to other cars on the road.
- kkarakk 8y agoproblem is usually line of sight to satellites, it varies a LOT and usually leads to variance in calculations.
- dreamache 8y agoAnd many countries are authoritarian shitholes who care more about revenue generation than protecting people. People don't need a speedometer to drive safely.
- leetbulb 8y agoChicago is a good example. Nobody follows the speed limit, especially on the express ways (often 30+ over). Going with the flow of traffic is key.
- Twirrim 8y ago> People don't need a speedometer to drive safely. Yes, they really do. Just ignoring the fact that people tend to drive faster when they don't have a speedometer, people already travel too fast for road conditions as a matter of course. Let alone the fact that at residential road speeds, the difference in life expectancy of someone hit by a vehicle drastically changes with even a slight increase in speed. Safety checks exist because vehicles are roving machines of death driven by easily distracted people, who have a long track history of ignoring what they can't see. Your life shouldn't be put in danger because some other arsehole decided that it's perfectly fine to drive a rust bucket with nothing more than a sheet of paper left by way of brakes, or with lights that are so badly adjusted anyone else gets blinded, or with windows in a state that someone sneezing will shatter them, or any other number of things. But yeah, authoritarian government overreach. Sure.
- tablethnuser 8y agoThis was cool and inspiring to read. I too enjoy making little apps to meet my needs and it was educational to see how someone else structures their tiny projects. Not just the projects themselves but also the lil domain they're hosted at.
- BenoitEssiambre 8y agoThis made me think about building your own services vs integrating others and I can't help to think rolling your own makes more and more sense. I always come back to a paper some Netflix guys mentioned in a presentation I saw at a conference to make us appreciate how extremely hard integrating separate systems is : "Hundred Impossibility Proofs for Distributed Computing" (https://groups.csail.mit.edu/tds/papers/Lynch/podc89.pdf https://groups.csail.mit.edu/tds/papers/Lynch/podc89.pdf). The paper basically says there are at least a hundred walls that are mathematically proven to be insurmountable that you are going to potentially hit when trying to keep your data corruption free across systems. This makes systems that keep data within the bounds of a non distributed, transactionally sound database like Postgresql comparably much more agile and powerful as you don't hit these hundred plus walls. After some high profile failures of integration like Oracle/IBM's "Phoenix Pay" here in Canada, after people tried to counteract the problems with sophisticated and costly CQRS layers to manage the connections, they are now noticing what was mathematically proven in that paper, that you can't make a maintainable and reliable system when data is spread across too many different companies' servers. I think, at least for tech companies that know how to build stuff, that the trend is now to minimize holding data in a web of connected SAAS services, regrouping key data to their own transactional databases. This trend has been helped by the fact that, it is now incredibly easy to build frontend and backend services tied to your own database. This "Tiny PWAs" article is a good example. This guy quickly built apps so that he didn't have to deal with ad laden ones in the app stores. As a testament to their simplicity, these apps ended up being only 1.7KB and 800B. This would have been impossible just a few years ago.
- myfonj 8y agoSystem on my old laptop had somewhat broken battery indicator in systray, so I ended up using simple HTML page polling / listening to navigator.battery changes [0] and displayed it, even in a "graph" form (in fact, just didn't redraw old values, so it was a side efffect). That worked pretty well, but then whole API became obsolete because of fingerprinting abuse. Ah, days of yore. [0] https://developer.mozilla.org/en-US/docs/Web/API/Navigator/battery https://developer.mozilla.org/en-US/docs/Web/API/Navigator/b...
- sdfjkl 8y agoYour car dashboard is broken. Instead of fixing it, you write an app that provides a lousy workaround. Is this meant to be a bad example?
- xparco 8y agoHow is it lousy? You seem jealous
- kkarakk 8y agogoodluck sticking to speed limits by relying on a gps based speedometer...although seeing as how you're on the chamber of commerce in a tiny town that must not be a problem for you
- hiccuphippo 8y agoSounds like a hack if I ever heard of one.
- tokyodude 8y agoNot sure if there is anything progressive about this but it's small, has a manifest so it will supposedly get cached, and is installable I think. Wrote it for similar reasons, sick of ads. https://greggman.github.io/interval-timer/ https://greggman.github.io/interval-timer/
- deleted 8y ago[deleted]
- emmanueloga_ 8y agoWhen I first heard someone talking about "Progressive Web Apps" I thought they were talking about "Progressive Enhancement" [1]. Turns out doing a PWA is just basically about using the "Service Workers" API [2] and the practices around that. This nice article does a lengthy trace on the origins of the "PWA" term [3]. The same guy that started the "Service Workers" spec in Github [4] created the PWA marketing campaign, apparently. Makes me wonder why he thought it was more marketable to sell this PWA idea more than the simpler and more direct message: "use Service Workers". The PWA campaign also reminds me of the less successful "Offline First" campaign from a couple of years ago [5]. 1: https://alistapart.com/article/understandingprogressiveenhancement https://alistapart.com/article/understandingprogressiveenhan... 2: https://jakearchibald.github.io/isserviceworkerready/ https://jakearchibald.github.io/isserviceworkerready/ 3: https://medium.com/@amberleyjohanna/seriously-though-what-is-a-progressive-web-app-56130600a093 https://medium.com/@amberleyjohanna/seriously-though-what-is... 4: https://github.com/w3c/ServiceWorker/tree/c49c878cdcbaf7a81e9e8cf3cca9970787017a19 https://github.com/w3c/ServiceWorker/tree/c49c878cdcbaf7a81e... 5: http://offlinefirst.org/ http://offlinefirst.org/
- abraae 8y agoMaybe he took his lead from the success of "Ajax" as opposed to "XMLHttpRequest Objects".
- kaycebasques 8y agoI work on the same team (Web DevRel) as the "service worker guy" you mention (Jake Archibald). Alex Russell (who introduced the "PWA" and is now advocating for the "Never-Slow Mode" idea you may have heard about recently) works on Chrome but collaborates with us frequently. > When I first heard someone talking about "Progressive Web Apps" I thought they were talking about "Progressive Enhancement" Progressive enhancement is indeed where the P in PWA comes from. The core idea is to ship great sites for all users, and progressively upgrade with the latest web capabilities (service workers for offline, manifest for adding to homescreen and full-screen displays, and so on) when a user's device supports it. If the user's device doesn't support it, they should still get a good, traditional web experience: fast, secure, usable. > Turns out doing a PWA is just basically about using the "Service Workers" API [2] and the practices around that. Your first impression about progressive enhancement was closer to the mark. The PWA Checklist [1] is the canonical document about what constitutes a PWA. We created that doc in November 2016 [2] to try to clear up the massive confusion about the definition of a PWA, but apparently to no avail. Under the "Baseline PWA" checklist you'll notice that there's mention of service workers and manifest files, but there's also mention of loading fast on 3G, having mobile-friendly design, being secure, supporting all browsers, and so on. Again, the core idea is to ship good experiences for all users, and progressively enhance the UX when possible. It'd be an interesting postmortem to study why the "PWA" term has been so notoriously confusing. IMO part of the problem was that we as a team weren't 100% crystal-clear on the definition at the start. But to be fair, I think we did straighten out our messaging pretty early on. The PWA Checklist that I linked to which has been out since November 2016 is evidence of this. But by that time it was already too late. PWA became a buzzword, and the blogging community seemed to conflate "PWA" with "promising new web platform capabilities" (service workers and manifests). I don't mean to shift blame. We (Web DevRel) most likely caused that conflation. I think the takeaway is that this is a lesson on what can happen when you're not 100% clear on messaging right from the start. [1] https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/progressive-web-apps/check... [2] https://github.com/google/WebFundamentals/commits/master/src/content/en/progressive-web-apps/checklist.md https://github.com/google/WebFundamentals/commits/master/src...
- kristianp 8y agoI think it would be easier to build an Android/IOS app if you already have the dev tools installed. Chrome APIs needed for web apps that interact with hardware are often unstable and not supported on all hardware or android patch from vendors. I built a simple app to submit links to HN, took maybe an hour, without much Android knowledge.