
Show HN: Pep – Turn Your Website into a Progressive Web App - grun
https://pep.dev/
======
brod
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=...](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpep.dev%2F)

~~~
grun
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...](https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90b37ea3a3e4f78c965/)

~~~
brod
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.

------
untog
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!

~~~
c000e3
You aren't wrong. Period.

------
grun
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](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.

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

~~~
grun
Thank you for the great feedback. Ship ship ship.

Lighthouse score is now 91%.

* [https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...](https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90b37ea3a3e4f78c965/)

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

------
oefrha
“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.

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

~~~
oefrha
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...

------
lucasverra
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...](https://www.webpagetest.org/result/200227_PT_b799b0e13e0417b61ccb2456633c80f2/)

~~~
grun
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...](https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90b37ea3a3e4f78c965/)

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.

------
taytus
Posts like these really hurt the Show HN prefix.

There is absolutely nothing here. Just marketing fluff.

Are you coding on PowerPoint?

~~~
grun
> Are you coding on PowerPoint?

One worse: Emacs. =]

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

~~~
hoistbypetard
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.

~~~
anitil
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

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

------
benrmatthews
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?

~~~
grun
> 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.

------
oblib
"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.

~~~
grun
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.

~~~
oblib
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.

------
nmca
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

------
spectramax
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.

~~~
z3t4
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.

~~~
oefrha
> 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.

~~~
z3t4
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.

~~~
oefrha
I think Cocoa is pretty noticeable.

------
tilolebo
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.

------
z3t4
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.

------
drum
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.

~~~
grun
Great feedback. Thank you.

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

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

~~~
hoistbypetard
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](http://todomvc.com)

------
criddell
What's an example of a great PWA?

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

