I built a PWA successfully for the first time!

Informal
#1

Hi!
My progressive web app finally works!

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. Wikipedia

I have been working months (lol) to get this stupid thing to work.
Turns out that I was editing the wrong file the whole time lol. :person_facepalming:
But, I’m glad I finally found it out and fixed it…
See that install button in the address bar?
image
Check it out:

It even works on google :smiley:
image

Spoilers Unfortunately, InfinityFree doesn't support `serviceWorker`, so I had to use another free hosting service

Hint: It’s not profreehost, heliohost, or 000webhost

2 Likes
#2

Are you sure??

#3

When I tried it didn’t work here
I literally even tried copying the files from MDN, but I eventually gave up :expressionless:

Here was my initial code:
sw.js

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('fox-store').then((cache) => cache.addAll([
      //'sw.js',
      'index.php',
      'index.js',
    ])),
  );
});

self.addEventListener('fetch', (e) => {
  console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then((response) => response || fetch(e.request)),
  );
});
#4

if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(‘/sw.js’, {scope: ‘/’});
});
}

Are we talking abt the same thing?

#5

I used this:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('sw.js')
    .then(() => { console.log('Service Worker Registered'); });
}
#6

Maybe this will help?

self.addEventListener(‘install’, function(event) {
// The promise that skipWaiting() returns can be safely ignored.
self.skipWaiting();
});

#7

Infinityfree can’t change what JavaScript you use. Service workers are on the client, so unless they read your JavaScript files and prevent you from uploading files that register service workers, you probably just did something wrong.

1 Like
#8

Also, you made this by yourself?

Amazing!

(I suck at CSS)
:frowning:

1 Like
#9

Yes, I made it by myself.
I used the materialize CSS framework too

Obviously, I love the material design and try to implement it everywhere

#10

Interesting.
I found this article, which is why I changed:

But, I still use InfinityFree!!! Without it would be very hard for me

#11

great work and lovely looking site, well done

4 Likes
#12

GG for getting it to work. But I know that PWAs work on here as I only recently just made one :wink:

4 Likes
#13

As a JS dev…
I approve (ngl Your PWA app is beautiful)

4 Likes
#14

If the serviceWorker is sending requests to our servers very often (i.e server hammering) Then it isn’t allowed, same reason with why chat scripts aren’t allowed.

3 Likes
#15

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.