DEV Community

Cover image for Transform any Meteor App into a PWA

Transform any Meteor App into a PWA

Jan Küster on February 02, 2020

Okay, so you created and tested your Meteor app successfully. Now you want your users enjoy the benefits of a pwa (progressive web app), too. Not t...
Collapse
 
lizzymendivil profile image
Lizzy Mendivil

Hi, I just followed your guide but it did not work. Maybe my chrome does not support service worker? I am working with this: Version 80.0.3987.122 (Official Build) (64-bit) Could help me please? :(

Collapse
 
jankapunkt profile image
Jan Küster

Hi Lizzy, what does the chrome console say?

Collapse
 
lizzymendivil profile image
Lizzy Mendivil

I added this:
if ("serviceWorker" in navigator) {
in serviceWorker.js file
So it never enters into the conditional

Thread Thread
 
jankapunkt profile image
Jan Küster

Please try the code as from the tutorial:

// serviceWorker.js
import { Meteor } from 'meteor/meteor'

Meteor.startup(() => {
  navigator.serviceWorker
    .register('/sw.js')
    .then(() => console.info('service worker registered'))
    .catch(error => { 
      console.log('ServiceWorker registration failed: ', error)
    })
})

does it throw an Error? If so, could you please show me the error stack?

Thread Thread
 
lizzymendivil profile image
Lizzy Mendivil
serviceWorker.js:5 Uncaught TypeError: Cannot read property 'register' of undefined
    at serviceWorker.js:5
    at maybeReady (meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938)
    at HTMLDocument.loadingCompleted (meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950)
Thread Thread
 
jankapunkt profile image
Jan Küster

Hm there seems to be no service worker in navigator. Is this a private session or do you block all cookies? I think there were some sw issues at least in Firefox that were related to these.

Thread Thread
 
lizzymendivil profile image
Lizzy Mendivil

well, i am using a virtual machine with ubuntu 16.04 but i connect through ssh and a network location and open the application in my window (physical machine)

Thread Thread
 
lizzymendivil profile image
Lizzy Mendivil

So, my url is 172.21.19.91:3000/
could it be the problem?

Thread Thread
 
lizzymendivil profile image
Lizzy Mendivil

JIC, I helped me
stackoverflow.com/questions/522992...

Now it is working fine! Thanks!

Collapse
 
borisimple profile image
Boris Krstić

I enjoyed working with Meteor back in 2016. I think this framework was just a bit ahead of its time 😏

Collapse
 
jankapunkt profile image
Jan Küster

Hey Boris, yes their lead developer is constantly on the edge of Js.
Btw, you should check out the roadmap: github.com/meteor/meteor/blob/mast...

Also note that Meteor has been aqquired by Tiny: blog.meteor.com/a-new-chapter-for-...

Collapse
 
mullojo profile image
Bob

This guide worked really great for me! 🎉 I now have a desktop & mobile installable app, amazing!! Thanks Jan!

Collapse
 
chaawlaapooja profile image
chaawlaapooja • Edited

Hello Jan,
Thanks for the article. I followed the steps mentioned above and my app is now PWA compliant. Can you help me on how to implement features like push notifications to make it behave like native app?

Collapse
 
jankapunkt profile image
Jan Küster • Edited

I currently did not implement push notifications in my pwas but I am planning a follow up article on specific pwa features that bases on this article. In the meantime you may check out the package registry atmospherejs.com for packages that provide push notifications.

Collapse
 
chaawlaapooja profile image
chaawlaapooja

Thanks!

Collapse
 
harryadel profile image
Harry Adel

Great icons :D

Collapse
 
jankapunkt profile image
Jan Küster • Edited

In the past I used to spend time and engery on design things but I realized that it won't be better with more time spent. Instead I saved the effort for writing. ;-)

Collapse
 
harryadel profile image
Harry Adel

yeah, great and informative article nonetheless

Collapse
 
ramprakashram profile image
Ram

Hi, i added force-ssl, still i am getting "Does not redirect HTTP traffic to HTTPS" error when i run lighthouse. Could you help me please ???

Collapse
 
jankapunkt profile image
Jan Küster

I assume you are on localhost? Then this is expected behavior. It will work on your deployment, assuming your certificate is correctly installed.

Collapse
 
ramprakashram profile image
Ram

Awesome, it worked fine on Deploying. Thank you Jan.
BTW, can you write a article for prompting user to install app on iOS.

Collapse
 
desdichado profile image
Pontus Kindblad

I got the error: start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker.