7 ms·

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

91 points by grun 7y ago

grun 7y ago
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.
- jpttsn 7y ago
  Cool. Mixed message: your site starts with a loading spinner for me.
- jakearmitage 7y ago
  Your site is not Lighthouse compliant. Why should I trust your service?
  - grun 7y ago
    Thank you for the great feedback. Ship ship ship. Lighthouse score is now 91%. * https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90b37ea3a3e4f78c965/ https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...
    - taytus 7y ago
      No. It's not ship ship ship. Ship whenever you have something to ship.
- hoistbypetard 7y ago
  Without a worked example to look at, this looks like an email harvesting operation.
- makeee 7y ago
  Pretty awesome idea. I could see trying this out on some older projects that would be a pain to upgrade to a PWA.
interestingsoup 7y ago
Ooo can’t wait to check them out!
schtono 7y ago
Mind to explain how it works? At least on the mobile website there is no way to find out...
nmca 7y ago
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 7y ago
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.
- metalrain 7y ago
  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.
- petersonh 7y ago
  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.
  - K0nserv 7y ago
    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.
wolco 7y ago
Might be helpful to add an example. This is google before/after type thing.
- grun 7y ago
  Just to make sure I understand you (explicit always better than implicit =]), an example of what? An example PWA?
  - cmcd 7y ago
    An example project using Pep. Most people are going to be skeptical that this can be done with a single line of code.
  - hoistbypetard 7y ago
    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
lucasverra 7y ago
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_b799b0e13e0417b61ccb2456633c80f2/ https://www.webpagetest.org/result/200227_PT_b799b0e13e0417b...
- robgibbons 7y ago
  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.
- grun 7y ago
  Thank you for the Lighthouse test and great criticism. Iterating and fixing those in real time now. * https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90b37ea3a3e4f78c965/ 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.
drum 7y ago
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 7y ago
  Great feedback. Thank you.
benrmatthews 7y ago
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 7y ago
  > 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 7y ago
"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.
- yingw787 7y ago
  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.
  - grun 7y ago
    Yep. Pep's definitely not married to Google nor its CDN. If Google precludes certain users, we'll switch to something that doesn't.
- grun 7y ago
  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.
  - penagwin 7y ago
    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.
  - oblib 7y ago
    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.
tilolebo 7y ago
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.
oefrha 7y ago
“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 7y ago
  It specifically talks about benefits of PWAs, not Pep. All of those sites built PWAs.
  - oefrha 7y ago
    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...
untog 7y ago
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 7y ago
  You aren't wrong. Period.
criddell 7y ago
What's an example of a great PWA?
z3t4 7y ago
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.
taytus 7y ago
Posts like these really hurt the Show HN prefix. There is absolutely nothing here. Just marketing fluff. Are you coding on PowerPoint?
- grun 7y ago
  > Are you coding on PowerPoint? One worse: Emacs. =]
  - anitil 7y ago
    Well, you can sure handle criticism like a champ. Well done for shipping and for sticking around. Tough crowd.
    - hoistbypetard 7y ago
      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 7y ago
        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
brod 7y ago
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%3A%2F%2Fpep.dev%2F https://developers.google.com/speed/pagespeed/insights/?url=...
- grun 7y ago
  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_75b0bc807f4fc90b37ea3a3e4f78c965/ https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...
  - brod 7y ago
    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.
dzonga 7y ago
no need for this if the page had been mostly server rendered html and sprinkles of JS.

91 points by grun 7y ago

grun 7y ago

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.

jpttsn 7y ago
Cool. Mixed message: your site starts with a loading spinner for me.
jakearmitage 7y ago
Your site is not Lighthouse compliant. Why should I trust your service?
- grun 7y ago
  Thank you for the great feedback. Ship ship ship. Lighthouse score is now 91%. * https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90b37ea3a3e4f78c965/ https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...
  - taytus 7y ago
    No. It's not ship ship ship. Ship whenever you have something to ship.
hoistbypetard 7y ago
Without a worked example to look at, this looks like an email harvesting operation.
makeee 7y ago
Pretty awesome idea. I could see trying this out on some older projects that would be a pain to upgrade to a PWA.

interestingsoup 7y ago

Ooo can’t wait to check them out!

schtono 7y ago

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

nmca 7y ago

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 7y ago

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.

metalrain 7y ago
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.
petersonh 7y ago
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.
- K0nserv 7y ago
  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.

wolco 7y ago

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

grun 7y ago
Just to make sure I understand you (explicit always better than implicit =]), an example of what? An example PWA?
- cmcd 7y ago
  An example project using Pep. Most people are going to be skeptical that this can be done with a single line of code.
- hoistbypetard 7y ago
  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

lucasverra 7y ago

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_b799b0e13e0417b61ccb2456633c80f2/ https://www.webpagetest.org/result/200227_PT_b799b0e13e0417b...

robgibbons 7y ago
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.
grun 7y ago
Thank you for the Lighthouse test and great criticism. Iterating and fixing those in real time now. * https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90b37ea3a3e4f78c965/ 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.

drum 7y ago

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 7y ago
Great feedback. Thank you.

benrmatthews 7y ago

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 7y ago
> 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 7y ago

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

yingw787 7y ago
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.
- grun 7y ago
  Yep. Pep's definitely not married to Google nor its CDN. If Google precludes certain users, we'll switch to something that doesn't.
grun 7y ago
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.
- penagwin 7y ago
  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.
- oblib 7y ago
  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.

tilolebo 7y ago

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.

oefrha 7y ago

“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 7y ago
It specifically talks about benefits of PWAs, not Pep. All of those sites built PWAs.
- oefrha 7y ago
  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...

untog 7y ago

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 7y ago
You aren't wrong. Period.

criddell 7y ago

What's an example of a great PWA?

z3t4 7y ago

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.

taytus 7y ago

Posts like these really hurt the Show HN prefix. There is absolutely nothing here. Just marketing fluff. Are you coding on PowerPoint?

grun 7y ago
> Are you coding on PowerPoint? One worse: Emacs. =]
- anitil 7y ago
  Well, you can sure handle criticism like a champ. Well done for shipping and for sticking around. Tough crowd.
  - hoistbypetard 7y ago
    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 7y ago
      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

brod 7y ago

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%3A%2F%2Fpep.dev%2F https://developers.google.com/speed/pagespeed/insights/?url=...

grun 7y ago
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_75b0bc807f4fc90b37ea3a3e4f78c965/ https://www.webpagetest.org/result/200227_RM_75b0bc807f4fc90...
- brod 7y ago
  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.

dzonga 7y ago

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