PWA integration

API & integrations
1

Hi,

I’m trying to follow the doc here to integrate Piwik for events tracking offline in my pwa:

But I keep having an error no matter what method I use to “import” the module “import PiwikPro from ‘@piwikpro/pwa-piwik-pro’;”

I either can’t use import in my serviceworker.js and if I load it via cdn in a script tag in my html I can’t use it in my serviceworker.js file because it doesn’t know it.

I’m stuck right now and I don’t find anything on the web.

Can someone help or have an example of pwa integration somewhere ?

Best

2

Hi,

What technology are you trying to use PWA in Angular, react? I ask because in our repository you will find an example of we using PWA together with Angular, maybe it will be helpful. If you explain what technology you are using I will try to prepare a solution for you.

The PWA library works independently, the very important thing is that the target file from the service worker is in js so that the browser can install it correctly.

For this purpose, it is best to prepare a person builder, e.g. ES5, which will import the library and create a single file in js.

3

Hi @Daniel_Twork ,

Thanks for your answer.
I just use vanilla javascript and html. it’s just simple HTML files and script tags.
I have my app.js file which register the service worker file: sw.js

Webpack bundles the sw.js file into the bundle.xxxxx.js file.

Best regards

4

I looked everywhere to see how I could use Piwik Pro analytics for a PWA that wasn’t built with a framework and I didn’t find anything useful. So here is what I did that worked for me. You’re basically going to create a node project that only has the Piwik Pro analytics functions in it and build that.

Note, this is only for analytics, it doesn’t work with the connection or install tracking (PiwikPro.enableInstallTracking(); and PiwikPro.enableInternetConnectionTracking();

Overview:

  1. Install modules
  2. Create a js file importing Piwik
  3. Configure Rollup
  4. Use Rollup to build
  5. Import build into service worker

Install modules

In your project, run:

npm install @piwikpro/pwa-piwik-pro
npm install -g rollup
npm install @rollup/plugin-node-resolve
npm install @rollup/plugin-replace

Create a js file importing Piwik

In main.js (or any other filename), put the following:

import PiwikPro from '@piwikpro/pwa-piwik-pro';

PiwikPro.initialize({
    containerURL: 'ttc-az.piwik.pro',
    containerId: 'c2c46c52-7720-411c-816d-c457f8d973eb'
});

Configure Rollup

Create a rollup.config.mjs in your project directory with the following (change filenames as needed):

import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';

export default {
	input: 'main.js',
	output: {
		file: 'bundle.js',
		format: 'iife', // immediately-invoked function expression — suitable for <script> tags
		sourcemap: true
	},
	plugins: [
		resolve(), // tells Rollup how to find node_modules
                replace({
			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
			preventAssignment: true
		}),// makes scripts work outside Node environment by setting the variable manually
	]
};

Use Rollup to build

Running rollup -c in your project directory should process everything you need into bundle.js

Import build into service worker

Add the following into your service-worker js file:

// Import Piwik Pro Scripts
importScripts('bundle.js')
1 Like