JavaScript Pwa

Open-source JavaScript projects categorized as Pwa | Edit details

Top 23 JavaScript Pwa Projects

  • GitHub repo lighthouse

    Automated auditing, performance metrics, and best practices for the web.

    Project mention: Avoid unnecessary re-renderings of React.js sites | dev.to | 2022-01-16

    I will add one of the most famous tools to measure website performance for now. This is LightHouse: https://developers.google.com/web/tools/lighthouse .

  • GitHub repo Quasar Framework

    Quasar Framework - Build high-performance VueJS user interfaces in record time

    Project mention: A starter template with Vite, Vue3, Vue Router 4, Pinia, Quasar, and TypeScript | reddit.com/r/vuejs | 2022-01-15

    Yup, they are currently working on it, at least their roadmap tells it:

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • GitHub repo snapdrop

    A Progressive Web App for local file sharing

    Project mention: Android File Transfer & Samsung S21+ | reddit.com/r/macapps | 2022-01-17

    If yoou're on the same network, then snapdrop can help https://github.com/RobinLinus/snapdrop (local file sharing in your browser)

  • GitHub repo onsenui

    Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

    Project mention: Native-like Navigation of Web apps | news.ycombinator.com | 2021-11-21
  • GitHub repo web-skills

    A visual overview of useful skills to learn as a web developer

    Project mention: Web Skills – This is a nice chart of web dev skills. Could be a reminder of how far you've come, or a glimpse of how much there is to learn. Web development is hard. | reddit.com/r/webdev | 2021-10-10

    I recommend reading the Readme for the project as others have mentioned https://github.com/andreasbm/web-skills, as it isn't the intention of the author to deter beginner programmers.

  • GitHub repo preact-cli

    😺 Your next Preact PWA starts in 30 seconds.

    Project mention: Angular Is Rotten to the Core | news.ycombinator.com | 2021-11-04
  • GitHub repo offline-plugin

    Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)

    Project mention: Meteor with Webpack in 2018 — Faster compilation and better source handling | dev.to | 2021-07-29

    For example, you have a Progressive Web Application using Service Workers, written in Angular, then you have to create a service worker manifest based on your output files. We don’t have a solution for this on Meteor CLI natively. However, Webpack has a lot of community plugins such as OfflinePlugin , Workbox and many others for this problem as a solution. Just install them, and add to your webpack.config.js . Meteor-Webpack will handle it like you’re working on a pure Webpack project.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo just

    A library of dependency-free JavaScript functions that do just do one thing. (by angus-c)

    Project mention: Weekly Digest 42/2021 | dev.to | 2021-10-24

    View on GitHub

  • GitHub repo Reactive Resume

    A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

    Project mention: Search: Resume Builder like Reactive Resume but 100% selfhosted | reddit.com/r/selfhosted | 2022-01-08

    Basically im looking for a resume builder exactly like https://rxresu.me/ 100% self hosted.

  • GitHub repo next-pwa

    Zero config PWA plugin for Next.js, with workbox 🧰

    Project mention: Precaching pages with next-pwa | dev.to | 2021-11-22

    It's possible that next-pwa might support precaching pages in the future. Subscribe to issue 252 to keep up to date on that.

  • GitHub repo react-most-wanted

    React starter kit with "Most Wanted" application features

  • GitHub repo storefront-ui

    Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and Google Retail UX Playbook. Made with 💚 by Vue Storefront team and contributors.

    Project mention: Do you know good opensource Vue3 projects to learn advanced vue concepts ? | reddit.com/r/vuejs | 2021-11-29
  • GitHub repo OpenNote

    OpenNote was built to be an open web-based alternative to Microsoft OneNote (T) and EverNote.

  • GitHub repo next-offline

    make your Next.js application work offline using service workers via Google's workbox

    Project mention: Does anyone have any experience with making PWAs in Next? | reddit.com/r/nextjs | 2021-04-13

    There's next-offline and next-pwa (and some comparison too). But has anyone here made a PWA with NextJS? Now I am not only referring to service workers/offline functionality, but also icons, adding to homescreen, manifest, and other PWA features. Does anyone have any good examples or guides to refer to?

  • GitHub repo community-modules

    Project mention: How do I smoothly transition the error message to appear on the screen in the code snippet below? | reddit.com/r/Nuxt | 2021-06-03

    Checkout the nuxt toast module. Makes it super easy to report errors in a ux pleasing way. https://github.com/nuxt-community/community-modules/tree/master/packages/toast

  • GitHub repo pwacompat

    PWACompat to bring Web App Manifest to older browsers

    Project mention: Introduction to Progressive Web Applications – Part 2 | dev.to | 2021-06-08
  • GitHub repo pwa-studio

    🛠Development tools to build, optimize and deploy Progressive Web Applications for Magento 2.

    Project mention: Why is it SO DANG HARD in ecommerce to get a fast mobile PageSpeed, and am I wasting my time trying to achieve a better time? | reddit.com/r/webdev | 2021-04-30

    Daffodil (Angular) - https://github.com/graycoreio/daffodil PWA Studio (React): https://github.com/magento/pwa-studio Vue Storefront (Vue): https://github.com/vuestorefront/vue-storefront

  • GitHub repo PWAsForFirefox

    A tool to install, manage and use Progressive Web Apps (PWAs) in Mozilla Firefox

    Project mention: How to improve Progressive Web Apps for Firefox project? | reddit.com/r/firefox | 2021-12-31

    I'm the author of the PWAsForFirefox project (previously known as FirefoxPWA), an unofficial project to make installable Progressive Web Apps (PWA) / Site Specific Browsers (SSB) possible on Firefox.

  • GitHub repo sorted-colors

    A tool to sort the named CSS colors in a way that it shows related colors together

    Project mention: Perpetual Education: Week 3 | dev.to | 2021-11-23

    We’ve moved from using the attributes within HTML tags to using the actual tag the in the head of the HTML doc. This is our introduction to the CSS rule. Much easier on the eyes. I always find it odd that people who are comfortable with JavaScript find CSS confusing. To me this syntax is the most straightforward. I remember the first time I saw the CSS rule and thinking “this makes sense.” It’s actually a lot of fun so it’s easy to get carried away. Sometimes I’ll go nuts and style an element to the point where it makes more sense to just throw together an image in Affinity Designer.

    Next up was our first challenge. For this we had to create a multi-page site with a nested file structure. Nothing too crazy. Some trial and error. Lots of page refreshing and questioning if you put the 2 periods and slash in the right order, in the right place — welcome to coding. Aside from that we had to style each page slightly differently. For mine I referenced this awesome color palette generator and threw in some linear-gradients to accent each block element. If you’re interested you can check it here.

    For the next lesson we got introduced to the pen tool in Affinity Designer and CodePen:

    1. The Pen Tool

      1. Takes some getting used to.
      2. I can see it’s power but I suck at it right now.
      3. Slowly gaining a natural sense of how to use it.
      4. Created this creepy ghost with hollow eyes (see fig. 1). Don’t judge me.
    2. CodePen

      1. Love this site. Great for workshopping ideas, collaboration, inspiration, etc.
      2. Had to create text with an image inside it
      3. I chose CAGE and put a different image of the controversial Nicolas Cage inside each letter.
      4. Chose a font with a thick width so I could get his face in there.
      5. Messed with some CSS properties I don’t fully understand but hey! I got a working model. Looks cool too. Check it here.
      6. He looks so “at home” with a fire background.
    3. Had to create a pen using the float: property

      1. Never used this before. I find it useful but a lot of devs don’t seem too stoked on this.
      2. Created my own version of this page from the Forest Park website.
      3. Used an image of the Olmstead bros for the float: property.
      4. Interested? Check it here.

    creepy ghost

    Hello s and hash links. Got familiarized with embedding the YouTube videos on a webpage. s have their use but Derek showed us how if used incorrectly they can mess up the google search for your site. Hash links are pretty standard if you’re setting up a single page site. Easy and intuitive. Added some smooth scrolling with hash links to the Dead Moon redesign I’m having fun with. Check it here.

    Next up we learned about CSS resets. There’s all these automated sizes and margins when you don’t reset, so it’s nice to build from scratch and have full control. Along with that we learned about some useful CSS properties like letter-spacing: and line-height:. Never thought twice about these 2 things but now I can’t unsee it. Also learned how to combine selectors to style multiple elements at the same time. For the sake of practice, I got a little wacky with styling this page.

    Like I’ve said in the past, some days at PE aren’t completely buried in the computer. To take a break from coding we learned about the history of printing. We watched 3 documentaries. All really cool and interesting. I really enjoyed the last one on Linotype. It was a bit sad seeing it get phased out in favor of computers but you can’t argue when computers can pump out 1,000 lines a minute whereas the Linotype machine can only do 14. The scene with the guy using the machine one last time was particularly sad. He’s just drags his fingers slowly across the keys, trying to make the most of it.

    Derek took a day off so Drake could teach us about box-sizing:. Thanks Drake.

    Now that we’re a bit more comfortable using CSS and HTML we were tasked with styling an article. The goal was to try and make it look legit and fun to read. I started thinking of random topics I’m interested in and looked up an article on Slab City. I took the text and photos from this NPR article and styled it in my own way. I initially made a colored version but then noticed that that we were suppose to make it black and white. Whoops. Did a quick fix. Always knew that double border would look cool at some point. Adjusted the font for SLAB in the title too. Did a google search for “CSS make photo grey” and up came the MDN doc for the filter: property. Pretty cool.

    Believe it or not, Bill Murray hired me to make his personal site. Well… Derek pretended to be him — same thing though. William (as his friends call him) has no taste. You’d figure all that time spent with Wes Anderson would have a profound effect on him but I guess not. This exercise was just a fun intro to what it might be like working with a client. I look forward to deleting these from my CodePen archive. Marble backgrounds? 🤮

    Moving onto semantic markup and the inner-column — a good standard way of designing a page. Basically you set the content of each display: block; element inside a

    to make an inner-column. Looks nice and organized when you put a around everything.

    After learning this William( 🤡 ) contacted me again to update his site. He let his friend take a stab at it. She did pretty good but I had to do a few quick fixes. This was more so practice for semantic markup, creating an inner-column, and spotting redundant CSS declarations.

    Now we’re jumping from CodePen and back into Sublime to revisit our multi-page site. When we first built this it had no styling but now we’re tasked with creating one style sheet that can be applied to every page. Kept it pretty simple for this one. Just used a subtle color combo and the Roboto font. Really basic styling depending on font-size: and font-weight:. I like it. Hey! I added my movie lists to the site if you’re ever bored and don’t know what to watch.

    Following this we had another easygoing day. This time we watched a documentary on Helvetica. Another one of the those things I can’t unsee now that I’m aware of it. I thought I was a nerd but holy crap, I got nothing on these typography nerds. Some of those scenes reminded me of Spinal Tap and King of Kong. I like the scene where David Carson (sort of the anti-Helvetica dude) looks at the word caffeinated (spelled in Helvetica) and says, “that doesn’t say caffeinated!”

    Back to coding. Now we get to research, plan, and execute a project. We had to do a lot (for me) within the time constraints. This was fun but some of my code is super wonky. Hey, desperate times call for desperate syntax. For this one I made a tame version of Jacob Leach’s personal site. Here’s my sad version.

    Welp, that’s the gist. See ya again next week! ✌️

    …craving some Elton John.

  • GitHub repo vue-firebase-auth-vuex

    Vue Firebase🔥 Authentication with Vuex

    Project mention: A curated list of awesome things related to Vue.js | dev.to | 2021-08-07

    vue-firebase-auth-vuex A Vue2 Firebase Authentication with Vuex and support Progressive Web Apps

  • GitHub repo appleshouter

    iOS Push Notifications for PWAs and Web apps

    Project mention: Solving iOS Push Notifications? | reddit.com/r/PWA | 2021-05-28

    So for your first approach there's already a library that does just that for you: https://github.com/kosmigramma/appleshouter

  • GitHub repo svelte-pwa

    Svelte Progresssive Web App (PWA) starter template

    Project mention: Building a PWA with Svelte | dev.to | 2021-10-04

    Now that we understand the features that define PWAs, let’s build our own using Svelte. The example found in this section is based on an example from GitHub.

  • GitHub repo simplQ-frontend

    Modern and fully web based free queue management open source software.

    Project mention: In case anyone is looking to learn serverless by doing a hands-on project | dev.to | 2021-10-09
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-01-17.

JavaScript Pwa related posts

Index

What are some of the best open-source Pwa projects in JavaScript? This list will help you:

Project Stars
1 lighthouse 24,002
2 Quasar Framework 20,258
3 snapdrop 10,708
4 onsenui 8,529
5 web-skills 5,241
6 preact-cli 4,519
7 offline-plugin 4,452
8 just 3,906
9 Reactive Resume 3,356
10 next-pwa 1,934
11 react-most-wanted 1,897
12 storefront-ui 1,843
13 OpenNote 1,493
14 next-offline 1,443
15 community-modules 1,302
16 pwacompat 1,070
17 pwa-studio 877
18 PWAsForFirefox 578
19 sorted-colors 544
20 vue-firebase-auth-vuex 260
21 appleshouter 188
22 svelte-pwa 162
23 simplQ-frontend 137
Find remote jobs at our new job board 99remotejobs.com. There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
OPS - Build and Run Open Source Unikernels
Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
github.com/nanovms