Show HN: Pep – Turn Your Website into a Progressive Web App | Hacker News Reader

Show HN: Pep – Turn Your Website into a Progressive Web App

pep.dev

91 pointsgrun54 comments

Painfully ironic that the static landing page for a service offering to improve website performance (by adding more technology) scores a miserable 66% on mobile and 90% on desktop with Google's PageSpeed Insights[0]. I honestly didn't realise static sites could score so poorly.

I'm assuming this is targeted at a non-technical audience (although posting to HN would suggest otherwise), but I suppose it could provide some benefit under ideal conditions.

Including a 24kb font for the three "pep" letters in the heading just tops off the eternal face-palming. Incredible.

[0] https://developers.google.com/speed/pagespeed/insights/?url=...

Thank you for the great criticism. Iterating in real time while answering questions here.

Lighthouse score is now 91%.

* https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...

Well done, it's a neat idea and if the service can provide a measurable improvement I think it's worthwhile to pursue further.

Seeing the service in action would really help both technical and non-technical audiences, I need to know it's not going to be a liability and my clients would want to see pretty colours / improvements.

Something like "before.pep.dev" and "after.pep.dev" would be great.

Get back to me when there's something to actually see.

Call my cynical but having made a few progressive webapps myself I'm very dubious that a "single line of code" is going to result in a great, performant PWA. How is the service worker installed? Or the manifest.json? How do you decide the user behavior that triggers a page precache? How does that precache deal with things like user logins when it has no visibility into your system? Where do the app icons come from? And so on. pep.dev's own service worker is just a Workbox cache and little more.

I'll openly admit I'm a cynic. Prove me wrong!

You aren't wrong. Period.

Hi guys!

I don't want to build native apps. So I built Pep. It turns your website into a Progressive Web App (PWA) with one line of code. It's kind of like Workbox (https://developers.google.com/web/tools/workbox), but with adaptive pre-fetching, CDN, and responsive asset batteries included.

I'd love your input; feedback is how good products become great.

Without a worked example to look at, this looks like an email harvesting operation.

Your site is not Lighthouse compliant. Why should I trust your service?

Thank you for the great feedback. Ship ship ship.

Lighthouse score is now 91%.

* https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...

No. It's not ship ship ship. Ship whenever you have something to ship.

Cool. Mixed message: your site starts with a loading spinner for me.

Pretty awesome idea. I could see trying this out on some older projects that would be a pain to upgrade to a PWA.

“The results speak for themselves: Pinterest..., Twitter..., FlipKart..., AliExpress..., Forbes..., Lancôme...”

Did any of them use Pep? Doesn’t look like it.

I’d say this is deceptive marketing. Not sure if it’s trademark violation.

It specifically talks about benefits of PWAs, not Pep. All of those sites built PWAs.

I checked the flow of the page again, yeah, the section does come directly after “PWA benefits” which doesn’t mention Pep at all. So technically it’s not deceptive.

As for whether it’s actually deceptive...

I've deployed a full PWA (by lighthouse standard) and its hard to understand how can you comply with one line of code.

Ex how do you define the installable icon for the Add to home screen icon ? Or how do you choose what gets in the cache for offline access ?

PS : this is your score https://www.webpagetest.org/result/200227_PT_b799b0e13e0417b...

Thank you for the Lighthouse test and great criticism. Iterating and fixing those in real time now.

* https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...

Great questions.

> Ex how do you define the installable icon for the Add to home screen > icon ?

Pep tries to source the default icon from the site itself, eg a high resolution favicon, if possible.

If unavailable, or a different icon is preferred, the user is prompted for one. But by default, Pep tries to source such data and information the best it can.

> Or how do you choose what gets in the cache for offline access ?

Requests are observed, in the ServiceWorker, to determine which assets are requested on different pages and across the whole site. Those observations are turned into confidence scores, per asset, to determine which assets should be cached (and pre-fetched if not already cached).

You can, of course, pin certain assets for offline caching 100% of the time. But, by default, Pep does its best to cache requisite resources as determined by observed site activity.

It's possible to add head elements with JavaScript, so you could define any number of things with a single added script. Not sure if that's what they're doing here, but certainly a possibility.

Posts like these really hurt the Show HN prefix.

There is absolutely nothing here. Just marketing fluff.

Are you coding on PowerPoint?

> Are you coding on PowerPoint?

One worse: Emacs. =]

Well, you can sure handle criticism like a champ. Well done for shipping and for sticking around. Tough crowd.

Got a link to what they've shipped? I'm really interested, I've been looking, and I cant find an example of pep in action.

All I can find on the OP's link is marketing copy about how much PWAs are than standard web sites.

Ok maybe 'shipping' was the wrong word. I understand the criticism here, but unlike many posters that disappear at the slightest criticism, OP stuck around and at least had a sense of humour about it. That counts for something in my book

Mind to explain how it works? At least on the mobile website there is no way to find out...

Kudos for making it so easy. If PWA is the way forward, then services like this will help accelerate adoption.

Will be good to see how this affects / slows down site performance.

On a separate note, how many users know about or bother to “Add to screen”? Can the number of users launching from the home screen be tracked?

> Kudos for making it so easy. If PWA is the way forward, then services > like this will help accelerate adoption.

Thank you!

> On a separate note, how many users know about or bother to “Add to > screen”?

PWAs are relatively new. Not many users know about installing them yet. But that's changing. See the install flow videos here

  http://i.imgur.com/vVoDtbW.png

to see what installing a PWA looks like from the users perspective.

> Can the number of users launching from the home screen be tracked?

Definitely.

In the PWA's manifest, you can specify the `start_url`. This can include a sentinel to differentiate a PWA launch vs a browser session, eg

  "start_url": "/?launch=pwa"

That's actually a great idea to add to Pep. Kudos.

"Your static JavaScript, CSS, and images are automatically minified, optimized, and hosted globally on Google's Cloud"

That's a non-starter for me. Google screwed me hard years ago when I was using their Adwords. I can't forgive or forget that.

If it’s a static bundle, I think cloud deployment should be trivial...at worst they can add a feature to download a zip and sync to s3. I wouldn’t rule out this tool based on this fact alone.

Yep. Pep's definitely not married to Google nor its CDN.

If Google precludes certain users, we'll switch to something that doesn't.

Huh. How did Google screw you?

Pep's not married to Google's CDN. Which other CDN(s) do you, or would you prefer to, use over Google's?

Thank you for weighing in.

It was a long time ago. I was advertising on Adwords and my ad was getting hit every few seconds. Whomever it was would go to the linked page from the ad and hit a few more pages within just a few seconds and then leave without spending enough time to even see those pages. The clicks were coming from more than just one IP address but it was same thing from all of them.

I suspected it was a competitor paying some bogus group or bot network to run up my clicks and asked Google to look into it. They asked for my log files, which I sent them, but then told me "no problem found".

It cost me several thousand dollars before I realized what was going on. I shut the ad down for a few months and then turned it back on but the same thing happened again right away. I tried again to get them to look into it but got the same response. I refused to pay for those ads and they buried my site in their rankings afterwards.

Not op but Google has been known to ban accounts, even well established ones, for either stupid reasons(like an expired payment method) or unknown reasons, and there's very little you can do about it - other then make a HN post and hope some Google engineers can talk to the right people.

Very, very slow for me on the first loading screen on pixel 3 XL, mobile 4g, both chrome and mobile Firefox. Firefox loaded after 4s or so, chrome did not after 10s

Can someone explain what a PWA is? I tried reading the official Mozilla docs and wikipedia. I don't understand - how do these apps work like "native" apps if they are not using native UI kits and running inside a browser? That's not really "native". Native app to me is like macOS Mail or Sublime Text. I don't consider any of the electron apps (Slack, VSCode) as "native".

There is a real beauty of using native apps. I don't like this move towards PWAs(from what I understand) - its like the developer has to put up with 3 different dists (macOS, Windows and Linux) so let's make the entire app extremely bloated, fuck the user experience and native integration and lets all go full wild wild west in the Javascript land. Developer's laziness has lead to Electron and Javascript spaghetti world we live in. I have noticed this and its controversial but everytime I see anything done in Javascript, 9/10 times it is awful and convoluted. Slow. Javascript developers appear to be a lot more inexperienced in software engineering than say a C++ developer. BootCamp courses teach you how to make bloat. Don't get me wrong - there are some good Javascript libraries but they're rare. I am sure there are a lot of good Javascript developers out there, but the general observation I've got is not very positive.

Ever used Sublime Text? Instantly different than any web app or electron app. I kind of want us to go back to old ways of doing things.

PWAs can be turned into native apps as well, that is the part you missed while trying to understand them.

PWAs have two ways of deploying, either via the standard Web, where they get to use only Web APIs and via the manifest and service workers, get promoted to have some OS light integration with removal of the browser frame.

However, you missed the second way of deploying them, if you package the application URL alongside a signed package on app stores (Android/Windows/ChromeOS), then the PWA gets upgraded and has access to the native APIs just like any other native app.

Here is how it is done for UWP with the old Edge, the new one will eventually catch up.

https://docs.microsoft.com/en-us/microsoft-edge/progressive-...

Similar approach on Android,

https://developers.google.com/web/updates/2019/02/using-twa

If you want C++, then PWAs can also enjoy WebAssembly + WebGL (and eventually WebGPU).

https://www.qt.io/qt-examples-for-webassembly

Or just package them into the store format from above and call the native versions of GL/DirectX directly.

What if I told you that macOS Mail and Sublime Text was made with "web" techbology? You can make slow apps with bad UI in any language or framework, JavaScript just makes the barrier to entry lower, so you will get more shitty apps.

Progressive web app (PWA) just means that it use feature detection to enhance itself. The most notably features are "add2desktop" and "service workers". "add2desktop" lets you add the app to the app drawer, and service workers lets you manage the cache and, listen for push notifications, and acts like a proxy in front of the app, making it possible to serve from the cache while the user is offline.

> macOS Mail... made with web technology

Do you have a source for this? Mail content may very well be rendered in a web view (which is unsurprising given rich text and HTML are underpinnings of email), but I’d be surprised if the UI and widgets aren’t native.

If the app is any good you should not notice what stack it was built with. It was a hypothetical question, I actually have no idea.

I think Cocoa is pretty noticeable.

I think you are a bit unfair towards the end of this and the focus on developers is misguided. I agree that the cross platform hype is a bad trend that sacrifices user experience for developer experience however one needs to look at the incentives that developer operate under before placing the blame solely with them. Businesses are equally or more to blame for the current state of things than individual developers.

> ...software engineering than say a C++ developer. BootCamp courses teach you how to make bloat...

Reeks of elitism

PWA is basically a mobile optimized (read: responsive) website that caches page content and data (see IndexedDB). Mobile browsers have the option of "installing" them, basically saving the data and making a shortcut in your app drawer / home screen. There is also support for push notifications but not on iOS. The idea is basically a web page that still functions if you lose connectivity.

It's an "installable" web app - ie creates a desktop icon or mobile launch icon and removes the chrome from the browser so it looks like a native app. For mobile I believe there's a pop-up that prompts for install, on desktop you have to do it in the options menu I believe.

It's more than that, you've been able to do this with bookmarks on mobile platforms since day one. It also support offline use among other features.

PWA is actually hybrid app (web container inside app husk) compiled by Google for example. On Android once you install it, it's actually APK that has WebView.

The PWA examples section is cleverly designed.

One would think all these companies use Pep.

But the page doesn't make it easy to understand exactly what is provided.

I fear that "do you want to add to desktop" will end up just like "do you want notifications". Please Chromium and Firefox team, for the love of web apps, stop the modal spam! Its very useful features, but you are teaching users to ignore them.

The demo videos in the 'Installable' section should be up in your hero with the benefits listed alongside as subtitles. It took me a while to fully understand what your service does.

Great feedback. Thank you.

Might be helpful to add an example. This is google before/after type thing.

Just to make sure I understand you (explicit always better than implicit =]), an example of what? An example PWA?

The example I'd like to see is an application before and after conversion using the tool you're trying to sell here.

e.g. go grab one of the many TodoMVC[1] implementations, fork it, use your tool to turn it into a PWA, publish your changes to your fork, and let us all see the results.

[1]: http://todomvc.com

An example project using Pep. Most people are going to be skeptical that this can be done with a single line of code.

What's an example of a great PWA?

no need for this if the page had been mostly server rendered html and sprinkles of JS.

Reply on news.ycombinator.com